Three.js新手入门实践案例解析

导读

该篇文章呢，主要用于记录一个简单的入门级Three.js小案例，主要涉及到场景、摄像机的种类及摄像机创建，几何体创建，几何体运动，材质贴图添加，窗口渲染 内容自适应这几个方面来开发下面这个小案例，当然也包括相关实现方法的参数的详解。帮助自己知识复习，如果能帮助大家入门Three.js这门浏览器端的WebGL神奇强大炫酷框架中去，那就更好了。

首选我们来看一下，Three.js的基本概念和简介：

• three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能

• 什么是threejs，很简单，你将它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript来写3D程序的意思。Javascript是运行在网页端的脚本语言，那么毫无疑问Three.js也是运行在浏览器上的。

代码开发阶段

1、 首先我们需要创建Scene场景，Scene 允许我们设置Three.js渲染的内容以及位置。我们可以在这个scene场景中放置物体对象，灯光和照相机等等 ：

// 1. 首先我们需要创建场景 实例化THREE下面的方法Scene
scene = new THREE.Scene();

2、 再接着，我们需要创建摄像机，目前THREEJS中里面的摄像机及有两种类别，分别是透视型3D摄像机，正交投影摄像机。如下图所示：

左侧的就是我们的透视摄像机，右侧的就是我们的正交投影摄像机；这里呢，我们采用第一种，模拟人眼视角的透视型摄像机，代码如下：

camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerWidth, 0.1, 1000)