如何在使用 A-Frame 触发时设置对象的旋转以匹配 Vive 控制器旋转？答案

【问题标题】：How do I set an object's rotation to match a Vive controller rotation upon trigger using A-Frame?如何在使用 A-Frame 触发时设置对象的旋转以匹配 Vive 控制器旋转？
【发布时间】：2017-01-11 19:30:08
【问题描述】：

以项目 A-Frame Dominoes 为例，我正在创建一个基本的 A-Frame 应用程序，当按下 Vive 触发器时会生成对象。

我可以让新生成的对象在触发时匹配 Vive 的控制器位置，但是我无法找到一种方法来匹配新对象的旋转与控制器的旋转。

这是我尝试过的：

onTriggerDown: function () {
  var sceneEl = d3.select(this.el.sceneEl);
  var controllerWorldPosition = this.el.object3D.getWorldPosition();
  var controllerWorldRotation = this.el.object3D.getWorldRotation();

  sceneEl.append('a-obj-model')
         .attr('id', 'base-street-children')
         .attr('scale', '0.01 0.01 0.01')
         .attr('position', controllerWorldPosition)
         .attr('rotation', controllerWorldRotation)
         .attr('src', '#base-street-obj')
         .attr('mtl', '#base-street-mtl');
},

使用 JavaScript 设置新对象的旋转有什么特别之处吗？

【问题讨论】：

你能检查一下世界位置/旋转值是否正确吗？一看就对了。远景可能是将 Vector3 转换为普通的 {x, y, z} JavaScript 对象。
它们看起来确实正确，并且我已将日志记录添加到函数中，以将旋转作为 js 对象和 x、y 和 z 的字符串欧拉值吐出。 rotation: THREE.Euler_order: NaN_x: 0.9155754789964565_y: 0.40301867851568707_z: -0.606638077169057order: (...)x: (...)y: (...)z: (...)__proto__: Objectrotation: 0.9155754789964565 0.40301867851568707 -0.606638077169057position: THREE.Vector3x: -0.5138129591941833y: 0.35001492500305176z: -0.3904404938220978__proto__: Object OBJLoader.js:558 OBJLoader: 1.000ms
我尝试从欧拉旋转的字符串组件中设置新对象的旋转属性，但也没有成功。这是代码：.attr('rotation', controllerWorldRotation._x + ' ' + controllerWorldRotation._y + ' ' + controllerWorldRotation._z)

标签： javascript three.js rotation aframe

【解决方案1】：

在 Three.js 中，旋转以弧度为单位，但在 A-Frame 中，旋转以度为单位。由于您要从 Three.js Object3D 中提取旋转数据，因此您需要在将其应用到 A-Frame 实体之前进行转换。

在您的示例中可以这样做：

.attr('rotation', function() {
  var controllerWorldRotationX = controllerWorldRotation._x / (Math.PI / 180);
  var controllerWorldRotationY = controllerWorldRotation._y / (Math.PI / 180);
  var controllerWorldRotationZ = controllerWorldRotation._z / (Math.PI / 180);

  return controllerWorldRotationX + ' ' + controllerWorldRotationY + ' ' + controllerWorldRotationZ;
})

【讨论】：