点击查看官方文档
下面是翻译的内容(稍作修改)
先了解一下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”场景,如下所示
<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版本开始,建议使用模块。模块的优点是可以轻松导入所需的其他模块。这使我们不必手动加载它们依赖的额外脚本。
<body>
<canvas id="c"></canvas>
</body>
< 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感觉更灵活。
我可以将画布放在任何地方,代码会找到它,就好像我有代码可以将画布插入到文档中,如果我的用例发生变化,我可能需要更改代码。
接下来,我们需要一台照相机。下面代码将创建一个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。three.js中的一个场景,可以看成是一种场景图形式的根。任何你想要让three.js绘制的东西,都需要添加到场景中。
const scene = new THREE.Scene();
接下来,我们创建一个包含盒子数据的BoxGeometry。
几乎任何我们想要在Three.js中显示的东西,都需要定义构成3D对象的顶点的几何图形。
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
然后我们创建一个基本材质并设置它的颜色。颜色可以使用标准的CSS样式6位十六进制颜色值来指定。
const material = new THREE.MeshBasicMaterial({
color: 0x44aa88
})
然后创建一个网格。在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
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,它会受到光线的影响。
它现在应该是比较清晰的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;
});
...
}
<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>
手机扫一扫
移动阅读更方便
你可能感兴趣的文章