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

Question

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

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

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

How do I set an object's rotation to match a Vive controller rotation upon trigger using A-Frame?

javascript

rotation

three.js

aframe