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

时间:2016-09-04 04:05:08

标签: javascript three.js rotation aframe

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

1 个答案:

答案 0 :(得分:2)

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