javascript - 如何使用 A-Frame 设置对象的旋转以匹配触发时的 Vive Controller 旋转？

Question

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

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

这是我尝试过的:

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 设置新对象的旋转有什么特别之处吗？我缺少什么？

Answer 1

在 Three.js 中，旋转以弧度为单位，但在 A 框架中，旋转以度为单位。由于您是从 Three.js Object3D 中提取旋转数据，因此您需要先进行转换，然后再将其应用到 A 框架实体。

以下是在您的示例中如何完成此操作:

.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;
})