ThreeJS-3D教学一：基础场景创建

Three.js 是一个开源的 JS 3D 图形库，用于创建和展示高性能、交互式的 3D 图形场景。它建立在 WebGL 技术之上，并提供了丰富的功能和工具，使开发者可以轻松地构建令人惊叹的 3D 可视化效果。

Three.js 提供了一套完整的工具和 API，用于创建和管理 3D 场景、几何体、纹理、光照、材质和相机等方面。它具有强大的渲染引擎，可以处理复杂的渲染任务，如阴影、透明度、反射和折射等效果。该库还支持动画、骨骼动画、粒子系统和物理模拟，可以实现流畅的动态效果和交互行为。它提供了丰富的控制器和用户交互工具，如旋转、缩放、平移和点击等操作。

Three.js 还支持加载和导入各种文件格式，如 OBJ、STL、FBX 和 glTF 等，以便使用外部工具创建和编辑 3D 模型。它还可以与音频、视频和其他 Web 技术进行集成，实现更丰富的应用场景。

接下来我们依次介绍three的三大件，渲染器（Renderer），场景（Scene），照相机（Camera），这三个展开说每一个都能单开一篇，这里简单介绍下概念，我们主要从案例中学习具体知识，感兴趣的朋友可以看这个链接Three.js学习，介绍的比较详细

渲染器（Renderer）

当我们在官方文档搜索WebGL时会显示七个类渲染器
WebGLMultipleRenderTargets
WebGLRenderer
WebGL1Renderer
WebGLRenderTarget
WebGL3DRenderTarget
WebGLArrayRenderTarget
WebGLCubeRenderTarget
暂时我们只聚焦于WebGLRenderer，其实真正经常用到的也是它。

WebGL1Renderer
three在 r118（包含此版本）后，自动使用WebGL 2 渲染上下文，如果您没有时间升级代码，但仍想使用最新版本，可以使用WebGL1Render。此版本的渲染器将强制执行WebGL 1渲染上下文。

WebGLRenderer
下面是一个基础的WebGLRenderer应用

 var renderer;
 var width,height;
 function initThree() {
	 width = document.getElementById("box").clientWidth;
	 height = document.getElementById("box").clientHeight;
	  // 生成渲染器对象（属性antialias：抗锯齿效果为设置有效）
	 renderer = new THREE.WebGLRenderer({
	 	antialias: true
	 });
	 renderer.setSize(width,height);
	 document.getElementById("box").appendChild(renderer.domElement);
	 // 设置canvas背景色(clearColor)和背景色透明度（clearAlpha）
	 renderer.setClearColor(0xFFFFFF, 1.0);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

场景（Scene）

three.js添加的模型都添加到了场景中，其初始化很简单

 var scene;
 function initScene(){
   scene = new THREE.Scene();
   // 场景的背景色
   scene.background = new THREE.Color( 0xf0f0f0 );
 }
 // 添加一个物体 mesh是什么后面会说明
 scene.add(mesh);
1
2
3
4
5
6
7
8

照相机（Camera）

你可以把相机想象为我们的眼睛，它决定了场景中哪个角度的景色会显示出来 ，就是我们所看到的，人站在不同位置，抬头或者低头都能够看到不同的景色 ，默认的照相机与加载进来的模型都处于坐标原点，为了能够看到模型，需要将照相机位置偏移。
经常用到相机分为：
CubeCamera

此相机适配 WebGLCubeRenderTarget

正交相机-OrthographicCamera

在此投影模式下，无论对象与摄影机的距离如何，其在渲染图像中的大小都保持不变。这对于渲染2D场景和UI元素等非常有用。

透视相机-PerspectiveCamera

这种投影模式是为了模仿人眼的视觉方式而设计的。它是用于渲染三维场景的最常见的投影模式。

我所有案例three版本是 three-155
先看效果图

上代码

  
  
  








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

这是一个简单的3D场景，除了之前介绍的三大件，renderer，camera、scene，
stats.js
左上角是一个 Three.js 开发的辅助库，主要用于检测动画运行时的帧数。
stats.setMode(1); // 0: fps, 1: ms
设置为 0：检测的是画面每秒传输帧数（fps）
设置为 1：检测的是画面渲染的时间

OrbitControls.js
动态观察控件允许摄影机围绕目标动态观察。

GridHelper
是一个用于定义网格的对象。网格是二维的线阵列。这也是个辅助工具，帮我们看清3D场景

AxesHelper
一个轴对象，以一种简单的方式显示3个轴。X轴为红色，Y轴为绿色。Z轴为蓝色。这也是个辅助工具，可以清晰的让我们在3D场景中看清方向也就是 X、Y、Z轴在哪

CSS2DRenderer
图中的文案用到了CSS2DRenderer，当然对应的还有CSS3DRenderer，这两者的主要区别就是CSS2DRenderer会永远面向相机，且大小不会随意相机移动而变化。非常适合辅助AxesHelper指明X、Y、Z轴

light
当然还有一个非常重要的光源，这里用到了DirectionalLight 和 AmbientLight，其实还有一些比如：PointLight、SpotLight、RectAreaLight后面我们会介绍到

AmbientLight
该灯光在全局范围内平等地照亮场景中的所有对象。
该灯光不能用于投射阴影，因为它没有方向。

DirectionalLight
向特定方向发射的光。这种光的行为就像它是无限遥远的，并且从它产生的光线都是平行的。这方面的常见用例是模拟日光；太阳离得足够远，它的位置可以被认为是无限的，所有来自它的光线都是平行的。
此灯光可以投射阴影
具体用法参数大家可以官网查看下three官网

大家会发现现在3D场景中，除了一些辅助方法，就没别的了，其实这就是我经常用到的标准模版，有了它当我们需要测试或者学习某些效果时，这个就可以直接拿来用，然后我们往里添加需要的效果即可，后面案例中我会一一介绍。