ThreeJS — 入门 | Serendipity

type

status

date

slug

summary

学习环境

我使用的方式是直接在HTML配置 type="importmap"配置路径

📌

如果你使用vue、react等框架

可以直接通过 npm i three 下载即可

三大件

场景Scene、相机Camera、渲染器Renderer

Scene

虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界

Camera

Threejs提供了正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。
透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律。

透视投影相机`PerspectiveCamera`：视锥体

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。

PerspectiveCamera( fov, aspect, near, far )

参数	含义	默认值
fov	相机视锥体竖直方向视野角度	50
aspect	相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height	1
near	相机视锥体近裁截面相对相机距离	0.1
far	相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向	2000

正投影相机

正投影相机的长方体可视化空间和透视投影PerspectiveCamera视锥体相似，只是形状不同。

OrthographicCamera( left, right, top, bottom, near, far )

参数(属性)	含义
left	渲染空间的左边界
right	渲染空间的右边界
top	渲染空间的上边界
bottom	渲染空间的下边界
near	near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。默认值0.1
far	far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。默认值2000

相机位置

camera.position

相机观察目标

camera..lookAt()

.up相机上方向

.up是相机对象的上方向属性，当你改变.up属性时候，就好比你生活中拍照时候，扭转你的相机姿态角度进行拍照，这时候你的照片也会跟着相机姿态旋转。

.up属性默认值是new THREE.Vector3(0,1,0),意思是沿着y轴朝上。

Renderer

生活中如果有了景物和相机，那么如果想获得一张照片，就需要你拿着相机，按一下，咔，完成拍照。就需要一个新的对象，也就是WebGL渲染器WebGLRenderer

设置Canvas尺寸

renderer.setSize()

获取Canvas

renderer.domElement

渲染器渲染

renderer.render(scene, camera)

背景透明度

renderer.setClearAlpha(0.8)

背景透明

代码

物体

Geometry — 物体形状

用来表示三维物体的几何形状

使用：

Material — 物体外观

定义物体的外观效果，比如颜色

使用：

双面可见

Three.js的材质默认正面可见，反面不可见,对于矩形平面PlaneGeometry、圆形平面如果你想看到两面，可以设置side: THREE.DoubleSide。

设置透明度

Mesh — 物体

使用：

重点！！！材质或几何体共享

如果你的物体复用了相同的geometry或者material，那么这几个物体之间的material或者geometry是共享的

即当你修改material或geometry上的值时，共享该对象的物体也会有相应的变化

克隆.clone()和复制.copy()

克隆.clone()、复制.copy()是threejs很多对象都具有的方法，比如三维向量对象Vector3、网格模型Mesh、几何体、材质

clone()

克隆.clone()简单说就是复制一个和原对象一样的新对象

copy()

复制.copy()简单说就是把一个对象属性的属性值赋值给另一个对象

辅助

辅助观察坐标系

three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。

参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸

相机控件

平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。

OrbitControls

旋转：拖动鼠标左键

缩放：滚动鼠标中键

平移：拖动鼠标右键

📌

OrbitControls本质

OrbitControls本质上就是改变相机的参数，比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。

同步Camera的观察目标

通过OrbitControls平移，OrbitControls的.target属性会发生变化，.target属性对应的就是透视投影相机PerspectiveCamera的.lookAt观察目标。

注意相机控件OrbitControls会影响lookAt设置，注意手动设置OrbitControls的目标参数

禁用

动画渲染循环

动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。

设置了渲染循环,相机控件OrbitControls就不用再通过事件change执行renderer.render(scene, camera);，毕竟渲染循环一直在执行renderer.render(scene, camera);

渲染帧率

通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。

📌

性能测试

可视化改变三维场景

借助dat.gui.js可以快速创建控制三维场景的UI交互界面

`.add()`方法

.add(控制对象，对象具体属性，其他参数)

网格地面辅助观察

GridHelper

光源

实际生活中物体表面的明暗效果是会受到光照的影响，threejs中同样也要模拟光照Light对网格模型Mesh表面的影响。

受光照影响材质

反射规律

平行光照射到网格模型Mesh表面，光线和模型表面构成一个入射角度，入射角度不同，对光照的反射能力不同。

光线照射到漫反射网格材质MeshLambertMaterial对应Mesh表面，Mesh表面对光线反射程度与入射角大小有关。

光源简介

光源形式：

点光源辅助观察

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟点光源（可视化点光源）

环境光

没有特定方向，整体改变场景的光照明暗

层级模型

Group层级模型(树结构)

Scene相当于根group

通过THREE.Group类创建一个组对象group,然后通过add方法把网格模型mesh1、mesh2作为设置为组对象group的子对象，然后在通过执行scene.add(group)把组对象group作为场景对象的scene的子对象。也就是说场景对象是scene是group的父对象，group是mesh1、mesh2的父对象。这样就构成了一个三层的层级结构。

查看子对象`.children`

通过children查看被添加到group中的模型

模型命名

.name属性

遍历树结构

.traverse() Threejs层级模型就是一个树结构，可以通过递归遍历的算法去遍历Threejs一个模型对象包含的所有后代

查询节点

.getObjectByName() Threejs和前端DOM一样，可以通过一个方法查找树结构父元素的某个后代对象

Demo

本地坐标和世界坐标

任何一个模型的本地坐标(局部坐标)就是模型的.position属性。

一个模型的世界坐标，说的是，模型自身.position和所有父对象.position累加的坐标。

改变子对象的.position，子对象在3D空间中的坐标会发生改变。

改变父对象的.position，子对象在3D空间中的位置也会跟着变化，也就是说父对象.position和子对象.position叠加才是才是子对象的.position。

获取世界坐标

mesh.getWorldPosition(Vector3)读取一个模型的世界坐标，并把读取结果存储到参数Vector3中

模型的显示或隐藏

模型属性`.visible`

模型对象的父类Object3D封装了一个属性.visible，通过该属性可以隐藏或显示一个模型。

材质属性`.visible`

材质对象的父类Material封装了一个.visible属性，通过该属性可以控制是否隐藏该材质对应的模型对象。

纹理贴图

使用

通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

顶点UV坐标

顶点UV坐标的作用是从纹理贴图上提取像素映射到网格模型Mesh的几何体表面上

纹理贴图UV坐标范围

顶点UV坐标可以在0~1.0之间任意取值，纹理贴图左下角对应的UV坐标是(0,0)，右上角对应的坐标(1,1)。

自定义顶点UV`geometry.attributes.uv`

顶点UV坐标geometry.attributes.uv和顶点位置坐标geometry.attributes.position是一一对应的

获取纹理贴图四分之一

UV动画

纹理对象Texture的.offset的功能是偏移贴图在Mesh上位置，本质上相当于修改了UV顶点坐标。

纹理对象.wrapS或.wrapT与.offset组合使用

当你通过.offset设置了纹理映射偏移后，是否把.wrapS或.wrapT设置为重复映射模式THREE.RepeatWrapping，两种情况的渲染效果差异。

瓷砖

使用threejs纹理对象Texture的阵列功能+矩形平面几何体PlaneGeometry实现一个地面瓷砖效果

纹理对象`Texture`的阵列功能

综合Demo

基本内容差不多介绍完了，消化消化，下次深入讲其他内容 🎉🎉🎉

参考链接

Three.js中文网 (webgl3d.cn)