Web
🏢ThreeJS — 入门
00 分钟
2023-7-29
2023-8-2
type
status
date
slug
summary
tags
category
icon
password
Edited
Aug 2, 2023 01:39 AM
Created
Jul 30, 2023 02:02 PM

学习环境

我使用的方式是直接在HTML配置 type="importmap"配置路径
📌
如果你使用vue、react等框架
可以直接通过 npm i three 下载即可
 

三大件

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

Scene

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

Camera

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

透视投影相机PerspectiveCamera：视锥体

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。
PerspectiveCamera( fov, aspect, near, far )
notion image
参数
含义
默认值
fov
相机视锥体竖直方向视野角度
50
aspect
相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height
1
near
相机视锥体近裁截面相对相机距离
0.1
far
相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向
2000

正投影相机

正投影相机的长方体可视化空间和透视投影PerspectiveCamera视锥体相似，只是形状不同。
notion image
OrthographicCamera( left, right, top, bottom, near, far )
参数(属性)
含义
left
渲染空间的左边界
right
渲染空间的右边界
top
渲染空间的上边界
bottom
渲染空间的下边界
near
near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值0.1
far
far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。 默认值2000

相机位置

camera.position

相机观察目标

camera..lookAt()
notion image

.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 — 物体形状

用来表示三维物体的几何形状
notion image
使用：
 

Material — 物体外观

定义物体的外观效果，比如颜色
notion image
使用：

双面可见

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表面的影响。

受光照影响材质

notion image

反射规律

平行光照射到网格模型Mesh表面，光线和模型表面构成一个入射角度，入射角度不同，对光照的反射能力不同。
光线照射到漫反射网格材质MeshLambertMaterial对应Mesh表面，Mesh表面对光线反射程度与入射角大小有关。
notion image

光源简介

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

环境光

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

层级模型

Group层级模型(树结构)

Scene相当于根group
notion image
通过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

notion image
 

本地坐标和世界坐标

任何一个模型的本地坐标(局部坐标)就是模型的.position属性。
一个模型的世界坐标，说的是，模型自身.position和所有父对象.position累加的坐标。
  1. 改变子对象的.position，子对象在3D空间中的坐标会发生改变。
  1. 改变父对象的.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)。
notion image
 

自定义顶点UVgeometry.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

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

参考链接

  1. Three.js中文网 (webgl3d.cn)
 
上一篇
ThreeJS — BufferGeometry
下一篇
React Native 从0到1
评论
Loading...