a-frame实体定位和旋转

Question

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

createEntity(vertical, horizontal, distance)

为

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

其中垂直和水平是介于 0 和 360 之间的浮点值，距离是一个浮点值，其中 0 是位置“0 0 0”，值越大实体越远。

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

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

Answer 1

听起来您想使用 Spherical coordinate system to position the elements, and the 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 网站上的顺序不同。这是因为在框架中 XYZ space 看起来像这样：

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

a-frame实体定位和旋转

a-frame entity-positioning and rotation

javascript

three.js

webvr

aframe