a-frame 实体定位和旋转答案

【问题标题】：a-frame entity-positioning and rotationa-frame 实体定位和旋转
【发布时间】：2019-12-01 23:41:35
【问题描述】：

遗憾的是，我不熟悉实体在 3D 空间中的定位和旋转，所以我想创建一个函数来定位具有更易于理解的参数的实体，例如：

createEntity(vertical, horizontal, distance)

为

<a-entity position="-2 0 -2" rotation="-10 30 0"></a-entity>

其中垂直和水平是 0 到 360 之间的浮点值，距离是一个浮点数，其中 0 是位置“0 0 0”，并且值高于实体移动的距离。

旋转应在初始化时面向相机。

是否有用于计算的辅助函数？

【问题讨论】：

标签： javascript three.js aframe webvr

【解决方案1】：

听起来您想使用Spherical coordinate system 来定位元素，并使用look-at 组件将对象朝向相机旋转。

我不知道有任何帮助程序，但使用自定义组件很容易做到这一点，如下所示：

// Register the component
AFRAME.registerComponent('fromspherical', {
  // we will use two angles and a radius provided by the user 
  schema: {
     fi: {},
     theta: {},
     r: {},
   },
   init: function() {
     // lets change it to radians
     let fi = this.data.fi * Math.PI / 180
     let theta = this.data.theta * Math.PI / 180

     // The 'horizontal axis is x. The 'vertical' is y. 
     // The calculations below are straight from the wiki site.
     let z = (-1) * Math.sin(theta) * Math.cos(fi) * this.data.r
     let x = Math.sin(theta) * Math.sin(fi) * this.data.r
     let y = Math.cos(theta) * this.data.r
     // position the element using the provided data
     this.el.setAttribute('position', {
       x: x,
       y: y,
       z: z
     })
     // rotate the element towards the camera
     this.el.setAttribute('look-at', '[camera]')
   }
 })

在this fiddle 中查看。

计算的顺序与 wiki 网站上的不同。这是因为在 aframe 中，XYZ 空间看起来像这样：

默认初始化时，相机沿负 Z 轴观察。

【讨论】：