threejs 基础概要
点击查看官方文档
下面是翻译的内容（稍作修改）
先了解一下Three.js应用程序的结构。Three.js应用程序需要创建一堆对象并将它们连接在一起。下图表示一个小three.js应用程序的图。
关于上图的注意事项
-
Renderer 渲染器，将一个场景和一个摄像机传递给渲染器，它就会将摄像机截锥内的3D场景部分作为2D图像呈现给画布。
-
有一个树状结构的场景图，其中包括各种物体，如Scene对象，多个 Mesh对象，Light对象，Group，Object3D，和Camera对象。一个Scene对象定义了场景图的根，并且包含诸如背景色和雾化度之类的属性。这些对象定义了分层的父/子树状结构，并表示对象出现在何处，以及如何定向。
-
注意，上图中的Camera相机，占场景图中的一半。这是为了表示在three.js中，与其他对象不同。摄像机不必在场景图中才能正常工作。与其他对象一样，Camera 作为其他对象的子对象，将相对于其父对象移动和定向。
-
Mesh 网格对象，表示用特定的材质绘制特定的几何图形。Material对象和Geometry对象都可以被多个网格对象使用。例如，要在不同的位置绘制2个蓝色立方体，我们可能需要2个网格对象来表示每个立方体的位置和方向。我们只需要一个Geometry来保存一个立方体的顶点数据，一个Material来指定蓝色。两个网格对象可以引用相同的Geometry对象和相同的Material对象
-
Geometry 几何对象，表示某些几何形状的顶点数据，例如球体，立方体，平面，狗，猫，人，树，建筑物等。Three.js提供了许多内置的几何图元。同时也可以创建自定义几何图形以及，或者从文件加载几何图形（如***.obj文件）。
-
Material 表面材质对象，标识绘制几何图形的表面属性，包括要使用的颜色及其光泽程度等。1个Material还可以引用一个或多个Texture对象，这些对象可以用于例如将图像包装到几何图形的表面上。
-
Texture 纹理对象，通常表示从图像文件加载，从画布生成或从另一个场景渲染的图像。
-
Light 灯光对象，代表不同类型的灯光。
下面制作一个最小的“Cube”场景，如下所示
首先加载three.js
<script type="module">
// 1.直接使用线上资源
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
// 2.直接使用本地 three.js
import *as THREE from "./three.js/build/three.js"
// 3.使用本地 three.module.js
// 本地启服务(http-server等), import 才能访问本地 three.module.js
import *as THREE from "./three.js/build/three.module.js"
</script>
script标签中 type="module" 很重要。这使我们能够使用import关键字来加载three.js。还有其他方法可以加载three.js，但是从r106版本开始，建议使用模块。模块的优点是可以轻松导入所需的其他模块。这使我们不必手动加载它们依赖的额外脚本。
创建canvas标签
<body>
<canvas id="c"></canvas>
</body>
创建render
< script type = "module" >
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({
canvas
});
...
}
main();
</script>
在查找画布之后，我们创建了一个WebGLRenderer。渲染器负责获取你提供的所有数据并将其呈现到画布上。过去有其他渲染器，比如CSSRenderer, CanvasRenderer，将来可能会有WebGL2Renderer或WebGPURenderer。目前使用WebGLRenderer使用WebGL渲染3D到画布。
注意这里有一些注意的细节。如果你没有传递一个画布到three.js，它会为你创建一个，但你必须把它添加到你的文档。在哪里添加它取决于你的用例，你必须改变你的代码，所以我们发现传递一个画布给three.js感觉更灵活。
我可以将画布放在任何地方，代码会找到它，就好像我有代码可以将画布插入到文档中，如果我的用例发生变化，我可能需要更改代码。
创建Camera
接下来，我们需要一台照相机。下面代码将创建一个PerspectiveCamera（透视相机）。
const fov = 75; // 视场角
const aspect = 2; // canvas 默认的宽高比例 默认 300/150 = 2
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
fov 是 field of view 的缩写，表示视场角。在这种情况下，垂直尺寸为75度。注意，Three.js中的大多数角度都以 弧度 表示，但由于某些原因，透视相机取 度。下图(网上截的图)中的ω，就表示视场角。
aspect 是画布的显示方面。我们将在另一篇文章中详细介绍 ，但默认情况下，画布尺寸为300x150像素，所以宽高比为300/150=2。
near 和 far 表示将要渲染在相机前面的空间范围。该范围之前或之后的任何内容都会被裁剪（不绘制）。
fov、aspect、near、far四个值，定义了一个“视锥”。视锥是3d形状的名称，它的形状像一个金字塔，顶端被切掉。换句话说，将“视锥”这个词视为另一种3D形状，例如球体，立方体，棱镜，视锥。
近平面和远平面的高度由视场确定。两个平面的宽度由视场和外观确定。
定义的视锥内部的所有内容都将被绘制。视锥外面的都不绘制。
相机默认是向下看-Z轴，向上看+Y轴。我们把立方体放在原点，所以我们需要把摄像机从原点往后移一点，这样才能看到任何东西。
camera.position.z = 2;
在上图中，我们可以看到我们的摄像机在z = 2处。它沿着-Z轴向下看。我们的截锥从摄像机前面0.1个单位开始，到摄像机前面5个单位。因为在这个图中，我们是向下看的，视野是受角度影响的。我们的画布的宽度是它的高度的两倍，所以整个视野将比我们指定的75度的垂直视野宽得多。
创建Scene
接下来创建一个scene。three.js中的一个场景，可以看成是一种场景图形式的根。任何你想要让three.js绘制的东西，都需要添加到场景中。
const scene = new THREE.Scene();
创建Geometry
接下来，我们创建一个包含盒子数据的BoxGeometry。
几乎任何我们想要在Three.js中显示的东西，都需要定义构成3D对象的顶点的几何图形。
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
创建表面Material
然后我们创建一个基本材质并设置它的颜色。颜色可以使用标准的CSS样式6位十六进制颜色值来指定。
const material = new THREE.MeshBasicMaterial({
color: 0x44aa88
})
创建网格Mesh
然后创建一个网格。在three.js中，网格代表了一个几何体(物体的形状)和一个材质(如何绘制物体，闪亮的还是平坦的，什么颜色，应用什么纹理)的组合等。以及该对象在场景中的位置、方向和比例。
const cube = new THREE.Mesh(geometry, material);
将网格添加到场景
scene.add(cube);
渲染场景
然后，我们可以通过调用渲染器的render函数，并将场景和摄像机传递给它，来渲染场景
renderer.render(scene, camera);
开启动画渲染
沿着-Z轴观察的而立方体本身是与轴对齐的，所以我们只能看到一个面。用动画让它旋转，就可以看清3D绘制的效果。
使用浏览器的window.requestAnimationFrame进行渲染。
function render(time) {
time *= 0.001; // 转化一下时间
cube.rotation.x = time; // 绕x轴旋转网格
cube.rotation.y = time; // 绕y轴旋转网格
renderer.render(scene, camera); // renderer渲染
requestAnimationFrame(render);
}
requestAnimationFrame(render);
虽然好了一点，但还是很难看到3d效果。添加一些照明会有帮助，所以让我们添加一盏灯。three.js中有许多种类的light
创建灯光light
const color = 0xFFFFFF; // 光的颜色
const intensity = 1; // 光照强度
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4); // 灯的位置
scene.add(light);
定向灯有一个位置和一个目标。两者都默认为0, 0, 0。在本例中，我们将灯光的位置设置为-1, 2, 4，这样它的位置好，就稍微在相机的左边、上面和后面一些。定向灯的目标坐标仍然是(0, 0, 0)，所以它会照向原点。
我们还需要换Materail。基本的Material不受光线的影响。让我们把它改成MeshPhongMaterial，它会受到光线的影响。
再创建几个网格Mesh
它现在应该是比较清晰的3D视图了。为了好玩，我们再加两个方块。我们让每个立方体使用相同的几何图形，但制作不同的材质，因此每个立方体可以是不同的颜色。
首先，将创建一个函数，用指定的颜色创建一个新的Material，然后加上指定的Geometry，创建一个Mesh，并将其添加到场景中，并设置其在x轴上的位置。
function makeInstance(geometry, color, x) {
const material = new THREE.MeshPhongMaterial({
color
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.position.x = x;
return cube;
}
然后我们将使用三种不同的颜色和X轴位置调用三次函数， 将生成的Mesh实例存在一个数组中。
const cubes = [
makeInstance(geometry, 0x44aa88, 0),
makeInstance(geometry, 0x8844aa, -2),
makeInstance(geometry, 0xaa8844, 2),
];
最后在渲染函数中，旋转三个立方体。给每个立方体设置了稍微不同的旋转角度。
function render(time) {
time *= 0.001;
cubes.forEach((cube, ndx) => {
const speed = 1 + ndx * .1;
const rot = time * speed;
cube.rotation.x = rot;
cube.rotation.y = rot;
});
...
}
完整的demo代码
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({
canvas
});
const scene = new THREE.Scene();
{
const fov = 75;
const aspect = 2;
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
}
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
}
scene.add(light);
{
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
}
function makeInstance(geometry, color, x) {
const material = new THREE.MeshPhongMaterial({
color
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.position.x = x;
return cube;
}
const cubes = [
makeInstance(geometry, 0x44aa88, 0),
makeInstance(geometry, 0x8844aa, -2),
makeInstance(geometry, 0xaa8844, 2),
];
function render(time) {
time *= 0.001;
cubes.forEach((cube, ndx) => {
const speed = 1 + ndx * .1;
const rot = time * speed;
cube.rotation.x = rot;
cube.rotation.y = rot;
});
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>