three.js初步学习

Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。是一款运行在浏览器中的 3D 引擎，我们可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

下面，让我们来初步的学习three.js吧

1.把three.js嵌入到网页中

直接用<script>标签把文件引入，在样式层内定义画布样式。

为了验证Threejs确实启动，我们用Chrome浏览器打开上面的那个网页，浏览器里面什么都没有，这时按F12键，打开调试窗口，并在Console下输入 THREE.REVISION命令，得到版本号，就说明运行成功。

2.创建一个场景

我们要创建一个渲染元素的场景

3.设置摄像机

4.创建渲染器实例，设置渲染尺寸，加入到HTML中

5.创建模型

我们先创建一个立方体

然后，这个设置立方体的材料（材质），这里我们用到的是MeshNormalMaterial（法常量网孔材料）

6.添加到场景

7.调整一下摄像头的远近度

这样我们就能得到一个立方体：

接着要让它动起来，我们要渲染场景：

接下来，我们的立方体就可以动啦！

很好玩吧~

因为本人也不太懂，所以就简单地介绍一下啦~谢谢观看