A-Frame Documents
A-Frame 和 Three.js 关系
映射关系
-
<a-scene> 和 Three.js 的 scene:
1对1
-
<a-entity> 和 Three.js 的 object:
1对多
-
Three.js 的 object 通过
.el
对<a-entity> 进行实体引用
层级关系
- A-Frame
<a-scene>
<a-box>
<a-sphere></a-sphere>
<a-light></a-light>
</a-box>
</a-scene>
- Three.js
THREE.Scene;
THREE.Mesh;
THREE.Mesh;
THREE.Light;
-
调用 Three.js 的 API
-
使用 Three.js 全局对象:
console.log(THREE);
-
访问 Three.js 场景
// a-scene 访问 Three.js 场景 document.querySelector("a-scene").object3D; // a-entity 访问 Three.js 场景 document.querySelector("a-entity").sceneEl.object3D; // 注册组件时访问 Three.js 场景 AFRAME.registerComponent("foo", { init: function () { var scene = this.el.sceneEl.object3D; // THREE.Scene }, });
-
通过 a-entity 访问 Three.js 的对象组(THREE.GROUP)
document.querySelector("a-entity").object3D; // THREE.Group // <a-entity geometry light></a-entity> console.log(entityEl.object3DMap); // {mesh: THREE.Mesh, light: THREE.Light} entityEl.getObject3D("mesh"); // THREE.Mesh entityEl.getObject3D("light"); // THREE.Light
-
生命周期中使用 Three.js 进行增删改
// 注册灯光组件 AFRAME.registerComponent("pointlight", { init: function () { this.el.setObject3D("light", new THREE.PointLight()); }, }); // <a-entity light></a-entity> // 访问方式 entityEl.getObject3D("light"); // 对light实体进行引用 entityEl.getObject3D("light").el;
// 删除实体组件 AFRAME.registerComponent("pointlight", { init: function () { this.el.setObject3D("light", new THREE.PointLight()); }, remove: function () { // Remove Object3D. this.el.removeObject3D("light"); }, });
-
-
全局与局部坐标转换(父子对象)
-
Object3D 对象的操作函数:https://threejs.org/docs/#api/en/core/Object3D
-
调用 Three.js 实现
局部转全局
坐标<a-entity id="foo" position="1 2 3"> <a-entity id="bar" position="2 3 4"></a-entity> </a-entity>
var worldPosition = new THREE.Vector3(); entityEl.object3D.getWorldPosition(worldPosition); var worldQuaternion = new THREE.Quaternion(); entityEl.object3D.getWorldQuaternion(worldQuaternion); //以及其他 .localToWorld (vector) .getWorldDirection (vector) .getWorldQuaternion (quaternion) .getWorldScale (vector)
-
调用 Three.js 实现
全局转局部
坐标var worldToLocal = new THREE.Matrix4().getInverse(object3D.matrixWorld); anotherObject3D.applyMatrix(worldToLocal);
-