We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
本文为A-Frame简明教程系列文章的第二篇，大家可以到专题里了解更多。
在A-Frame中，场景是全局根对象，是存放所有实体的容器，场景通过元素来表示。
接下来，我们来通过一个案例来逐步了解下A-Frame的场景创建。
准备工作可以分为两个部分：
a-sky
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>A-Frame创建场景</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene> </body> </html>
接下来，我们来添加实体，利用a-box标签来添加一个盒子，类似的标签还有球体<a-sphere>、平台<a-plane>、圆柱<a-cylinder>等。
a-box
<a-sphere>
<a-plane>
<a-cylinder>
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!--添加一个盒子--> <a-box></a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene>
此时，刚刚添加的盒子没有在屏幕中显示，我们可以通过设置位置position让之显现。
position
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!-- 添加一个盒子 position属性设置位置，三个数字分别对应x,y,z三个方向 --> <a-box position="0 0 -5"></a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene>
此时，屏幕中显示的盒子是白色的，我们可以通过设置color属性赋予盒子颜色。
color
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!-- 添加一个盒子 position属性设置位置，三个数字分别对应x,y,z三个方向 color属性赋予颜色 --> <a-box position="0 0 -5" color="red"></a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene>
也可以利用src属性设置盒子的纹理，可以使用图片、视频或canvas纹理。这时，记得把color属性去掉哟，以避免出现混合效果。
src
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!-- 添加一个盒子 position属性 设置位置，三个数字分别对应x,y,z三个方向 color属性 赋予颜色 src属性 设置纹理、贴图（记得把color属性去掉） --> <a-box position="0 0 -5" src="https://i.imgur.com/mYmmbrp.jpg"></a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene>
如果这个纹理会在其他形状中用到，我们最好采用素材复用方式，在a-assets中定义资源，然后再调用。
a-assets
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!--定义资源--> <a-assets> <img id="imgTexture" src="https://i.imgur.com/mYmmbrp.jpg" alt="" /> </a-assets> <!-- 添加一个盒子 position属性 设置位置，三个数字分别对应x,y,z三个方向 color属性 赋予颜色 src属性 设置纹理、贴图（记得把color属性去掉） --> <a-box position="0 0 -5" src="#imgTexture"></a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene>
当然，我们也可以使用其他资源做纹理,例如视频或canvas等，如下代码所示。 这里需要注意的是，如果我们在video标签中使用了自动播放属性，视频加载会阻塞网页加载。
video
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!--定义资源--> <a-assets> <img id="imgTexture" src="//i.imgur.com/mYmmbrp.jpg" alt="" /> <video id="videoTexture" src="//thenewcode.com/assets/videos/polina.mp4" loop="loop"> </a-assets> <!-- 添加一个盒子 position属性 设置位置，三个数字分别对应x,y,z三个方向 color属性 赋予颜色 src属性 设置纹理、贴图（记得把color属性去掉） --> <a-box position="0 0 -10" src="#videoTexture" scale="4 4 1"></a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene> <script type="text/javascript"> var videoEl = document.querySelector('#videoTexture'); videoEl.play(); </script>
也可以使用canvas绘制纹理，如下代码所示。 我们利用AFRAME.registerComponent (name, definition)的方式注册组件，在组件里进行canvas的绘图。
AFRAME.registerComponent (name, definition)
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!--定义资源--> <a-assets> <img id="imgTexture" src="//i.imgur.com/mYmmbrp.jpg" alt="" /> <video id="videoTexture" src="//thenewcode.com/assets/videos/polina.mp4" loop="loop"> <canvas id="canvasTexture"></canvas> </a-assets> <!-- 添加一个盒子 position属性 设置位置，三个数字分别对应x,y,z三个方向 color属性 赋予颜色 src属性 设置纹理、贴图（记得把color属性去掉） --> <a-box position="0 0 -10" src="#canvasTexture" scale="4 4 1" draw-canvas="canvasTexture"></a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene> <script type="text/javascript"> /* canvas纹理代码 */ AFRAME.registerComponent('draw-canvas', { schema: {default: ''}, init: function () { this.canvas = document.getElementById(this.data); this.ctx = this.canvas.getContext('2d'); // 绘图操作 this.ctx.fillStyle="#222266"; this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height); } }); </script>
利用a-animation标签添加动画，并利用它的诸多属性设置动画方式，下面代码设置循环播放动画。
a-animation
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!-- 添加一个盒子 position属性 设置位置，三个数字分别对应x,y,z三个方向 color属性 赋予颜色 src属性 设置纹理、贴图（记得把color属性去掉） rotate属性 设置旋转 --> <a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1"> <a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 360" repeat="indefinite"> </a-animation> </a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> </a-scene>
也可以设置事件交互，设置a-animation标签的begin方式为click实现单机开始动画。需要注意的是，需要添加个相机从而选中激活物体。
begin
click
<!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!-- 添加一个盒子 position属性 设置位置，三个数字分别对应x,y,z三个方向 color属性 赋予颜色 src属性 设置纹理、贴图（记得把color属性去掉） rotate属性 设置旋转 --> <a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1"> <!-- 设置动画 begin 设置动画开始方式 --> <a-animation attribute="rotation" dur="1000" fill="forwards" to="0 405 405" begin="click"> </a-animation> </a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> <!--添加相机，便于设置交互方式--> <a-camera> <a-cursor></a-cursor> </a-camera> </a-scene>
最后所有代码集成如下，大家也可以参考codepen上的案例。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>A-Frame创建场景</title> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <!-- a-scene是全局根对象，是存放所有实体的容器 --> <a-scene> <!-- 添加一个盒子 position属性 设置位置，三个数字分别对应x,y,z三个方向 color属性 赋予颜色 src属性 设置纹理、贴图（记得把color属性去掉） rotate属性 设置旋转 --> <a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1"> <!-- 设置动画 begin 设置动画开始方式 --> <a-animation attribute="rotation" dur="1000" fill="forwards" to="0 405 405" begin="click"> </a-animation> </a-box> <!--为了更好地显示实体，我们添加个蓝色的天空--> <a-sky color="#ddf"></a-sky> <!--添加相机，便于设置交互方式--> <a-camera> <a-cursor></a-cursor> </a-camera> </a-scene> </body> </html>
接下来，我们将研究利用JS的方式动态添加实体，敬请期待！
爱前端，乐分享。FedFun希望与您共同进步。 欢迎任何形式的转载，烦请注明装载，保留本段文字。 独立博客http://whqet.github.io 极客头条http://geek.csdn.net/user/publishlist/whqet CSDN博客http://blog.csdn.net/whqet/ 我的简书https://www.jianshu.com/u/c11d4318b3c7
The text was updated successfully, but these errors were encountered:
No branches or pull requests
A-Frame创建场景
在A-Frame中，场景是全局根对象，是存放所有实体的容器，场景通过元素来表示。
接下来，我们来通过一个案例来逐步了解下A-Frame的场景创建。
1.准备工作
准备工作可以分为两个部分：
为了更好地显示实体，我们同时添加了个
a-sky,并且给它一个颜色。如下面代码所示。2. 添加实体
接下来，我们来添加实体，利用
a-box标签来添加一个盒子，类似的标签还有球体<a-sphere>、平台<a-plane>、圆柱<a-cylinder>等。此时，刚刚添加的盒子没有在屏幕中显示，我们可以通过设置位置
position让之显现。此时，屏幕中显示的盒子是白色的，我们可以通过设置
color属性赋予盒子颜色。也可以利用
src属性设置盒子的纹理，可以使用图片、视频或canvas纹理。这时，记得把color属性去掉哟，以避免出现混合效果。3. 使用资源管理
如果这个纹理会在其他形状中用到，我们最好采用素材复用方式，在
a-assets中定义资源，然后再调用。当然，我们也可以使用其他资源做纹理,例如视频或canvas等，如下代码所示。
这里需要注意的是，如果我们在
video标签中使用了自动播放属性，视频加载会阻塞网页加载。也可以使用canvas绘制纹理，如下代码所示。
我们利用
AFRAME.registerComponent (name, definition)的方式注册组件，在组件里进行canvas的绘图。4. 添加动画
利用
a-animation标签添加动画，并利用它的诸多属性设置动画方式，下面代码设置循环播放动画。也可以设置事件交互，设置
a-animation标签的begin方式为click实现单机开始动画。需要注意的是，需要添加个相机从而选中激活物体。最后所有代码集成如下，大家也可以参考codepen上的案例。
待续
接下来，我们将研究利用JS的方式动态添加实体，敬请期待！
声明
爱前端，乐分享。FedFun希望与您共同进步。
欢迎任何形式的转载，烦请注明装载，保留本段文字。
独立博客http://whqet.github.io
极客头条http://geek.csdn.net/user/publishlist/whqet
CSDN博客http://blog.csdn.net/whqet/
我的简书https://www.jianshu.com/u/c11d4318b3c7
The text was updated successfully, but these errors were encountered: