以创建一个立方体为例

安装

安装three:npm i three

使用

引用

引入three以及three中自带的相机控件OrbitControls用以操控相机:

初始化场景

scene：场景所有three事物均在其中。
camera：使用PerspectiveCamera透视相机，参数需注意调整否则会看不见物体与场景，参数依次为：fov视场，即可看到的角度范围，aspect长宽比，通常为窗口长宽比，near近面，基于相机位置开始渲染场景的位置一般较小默认0.1，far远面，基于相机位置结束渲染场景的位置，过大会影响渲染效率默认1000。
renderer：渲染器，用于生成canvas及设置其参数，需要将其appendChild至dom中指定元素。

天空盒子

创建天空盒子(一个包裹场景物体的立方体，可随鼠标拖动而变化角度)，其中六张立方体贴图对应的顺序是右、左、上、下、前、后，图片需是特别制作的全景图，否者场景世界会出现明显的拼接边角：

也可直接使用一张贴图作为场景的背景，但使用此法场景不会随着鼠标变换角度与缩放：

相机控件

创建相机控件，其中需将相机与渲染的canvas元素添加到控件OrbitControls中，可通过控件控制拖拽、缩放、阻尼、偏角、自转（此种自转方式区别于模型自转，模型自转是通过控制物体mesh的rotation实现自转,该文章使用的是模型自转）等:

光源

创建光源，可设置环境光、点光源，最终显示出的光影效果是通过各种光效一起计算后渲染出来的：

立方体

创建的mesh(可理解为创建的物体)都是要通过add添加到场景中的，而mesh中有geometry(几何体)与material(材质)，立方体的geometry可以利用three的BoxGeometry，而material可以使用MeshLambertMaterial材质，该材质对光照有反应，用于创建暗淡的不发光的物体，自身可设置颜色，自身颜色不受环境的影响。也可给材质设置纹理map(需导入图片作为纹理)：

持续渲染

对场景与相机进行持续渲染，其中requestAnimationFrame为请求动画帧，以60hz刷新(但在高刷新屏中会频繁触发)，用户切换标签时会暂停渲染，节省cpu开销。鼠标控件需要在渲染中调用update()更新：

完整代码

图片素材

天空盒子贴图

back.jpg：

bottom.jpg：

front.jpg：

left.jpg：

right.jpg：

top.jpg：

立方体贴图

cube.png：