A-Frame 如何调用 object3D
A-Frame 是一个可以在HTML中创建3d场景的框架，使用Three.js和WebGL来创建VR场景。
操作方法
- 01
模板 A-Frame 的所有元素都放在 <a-scene> 中，初始代码如下： <!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Our First A-Frame Experience</title> <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> </head> <body> <a-scene> </a-scene> </body></html>
- 02
天空 天空使用的元素是 <a-sky>，代码如下： <a-sky color="#C500FF"></a-sky> 此时会产生一个紫红色的天空。天空也可以是一个全景图.flickr 有很多全景图，我们选一个作为背景，比如这一张
- 03
现在把天空换成这张全景图。 <!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>Our First A-Frame Experience</title> <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky src="https://c1.staticflickr.com/8/7376/16218590470_468084c950_h.jpg"></a-sky> </a-scene> </body></html> 现在代码（在http://codepen.io打开代码，在codepen.io预览） 现在用手机看效果是不是有身临其境的感觉了。
- 04
放一个球进去 <a-scene> <a-sky src="https://c1.staticflickr.com/8/7376/16218590470_468084c950_h.jpg"></a-sky> <a-sphere position="0 1.25 -5" radius="1.25" color="#66ffcc"></a-sphere> </a-scene> 现在场景中多了一个蓝色的球，直接看效果。
- 05
球也可以不是纯色的，这就需要给球表面贴图，我们先从 subtlepatterns 选一个材质，就这一张木纹吧：
- 06
<a-scene> <a-sky src="https://c1.staticflickr.com/8/7376/16218590470_468084c950_h.jpg"></a-sky> <a-sphere position="0 1.25 -5" radius="1.25" src="https://www.toptal.com/designers/subtlepatterns/patterns/retina_wood.png"></a-sphere> </a-scene> 效果是这样的
- 07
光标交互 VR里也有对应的交互方案，我们现在增加动画和事件库。场景里增加一个camera和放在其中的curosr。 <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> <script src="https://npmcdn.com/aframe-animation-component@3.0.1"></script> <script src="https://npmcdn.com/aframe-event-set-component@3.0.1"></script> <a-scene> <a-sky src="https://c1.staticflickr.com/8/7376/16218590470_468084c950_h.jpg"></a-sky> <a-sphere position="0 1.25 -5" radius="1.25" src="https://www.toptal.com/designers/subtlepatterns/patterns/retina_wood.png"></a-sphere> <!-- Camera + cursor. --> <a-entity camera look-controls> <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" event-set__1="_event: mouseenter; color: #0092d8" event-set__2="_event: mouseleave; color: black"></a-cursor> </a-entity> </a-scene> 现在代码（在codepen.io查看代码，在codepen.io预览）。
- 08
现在随着视口（摄像机）移动，在屏幕中央的光标（定位相对于摄像机固定）会跟着摄像机移动。 光标与鼠标一样遇到圆球，触发 mouseenter 事件，离开圆球触发 mouseleave 事件。现在我们已经增加了这两个事件，进入的时候光标变蓝色，离开变回默认的黑色。点击时伴随有光标缩放效果。