如何在使用A框架觸發時設置對象的旋轉以匹配Vive控制器的旋轉？

Question

以項目A-Frame Domino為例，我正在創建一個基本的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幀中旋轉單位是度。 由於要從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;
})