三要素
1.场 景(scene):放置物体的容器
2.摄像机(camera):类似人眼,可调位置,角度等信息,展示不同画面
3.渲染器(renderer):接收场景和摄像机,计算在浏览器上渲染的最终 2D 画面
import * as THREE from 'three';
let scene, camera, renderer // 场景,摄像机,渲染器
let controls // 轨道控制器 作用:调整轨道控制器属性,影响摄像机细节
let cube // 物体对象
function init() {
// 1 创建3D场景对象Scene
scene = new THREE.Scene();
// 1.1 实例化一个透视投影相机对象
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5
// 1.2 创建渲染器对象 antialias: true开启抗锯齿效果
renderer = new THREE.WebGLRenderer({ antialias: true });
// 1.3 定义threejs输出画布的尺寸(单位:像素px)
// const width = 800; //宽度
// const height = 500; //高度
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.append(renderer.domElement)
// 传入场景摄像机渲染画面,注意+后续这段代码挪到循环渲染函数中
renderer.render(scene, camera)
}
立方体(cube)绘制流程
1.几何图形
2.材质:网格基础材质-线面纯颜色描绘表面
3.网格物体(Mesh):将有材质的图形放置网格物体中
function createCube() {
// 2. 创建图形,宽高深为 1 单位(立方缓冲几何体)
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 2.1. 创建材质,颜色为绿色 0x00ff00 (网格基础材质-线面纯颜色描绘表面)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 2.2. 创建网格物体对象,传入图形和材质(网格物体对象)
cube = new THREE.Mesh(geometry, material);
// 2.3. 把物体加入到场景中
scene.add(cube);
}
轨道控制器:
// 3. 单独引入 OrbitControls 轨道控制器构造函数
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
function controlsCreate() {
// 3.1 创建轨道控制器
controls = new OrbitControls(camera, renderer.domElement)
}
详细控制
垂直旋转范围控制 水平旋转范围控制
function controlsCreate() {
// 3.1 创建轨道控制器
controls = new OrbitControls(camera, renderer.domElement)
// 5 添加阻尼效果
controls.enableDamping = true
// 5.2 开启自动旋转轨道控制器带动摄像机一起旋转
// controls.autoRotate = true
// 5.3垂直角度范围控制(0 上面,Math.PI 下面 上=>下 范围0-Math.PI)
// controls.maxPolarAngle = Math.PI
// controls.minPolarAngle = 0
// // 5.4水平角度范围控制(0 上面,Math.PI 下面 上=>下 范围0-Math.PI)
// controls.maxAzimuthAngle = 1.5 * Math.PI
// controls.minAzimuthAngle = 0.5 * Math.PI
// 5.5控制摄像机缩放比例
// controls.maxDistance = 10
// controls.minDistance = 2
}
渲染循环-更新场景渲染
function renderLoop() {
// 4. 在渲染循环中更新场景渲染
renderer.render(scene, camera)
// 4.1手动 JS 代码更新过摄像机信息,必须调用轨道控制器 update 方法
controls.update()
// 4.2 根据当前计算机浏览器刷新帧率(默认 60 次/秒),不断递归调用此函数渲染最新的画面状态
// 好处:当前页面切换到后台,暂停递归
requestAnimationFrame(renderLoop)
}
坐标轴
// 添加坐标轴辅助对象
function createHelper() {
// 5. 创建坐标轴对象,设置长度
const axesHelper = new THREE.AxesHelper(5)
// 5.1. 添加到场景中
scene.add(axesHelper)
}
适配场景大小
// 适配窗口函数
function renderResize() {
window.addEventListener('resize', () => {
// 调整渲染器画布大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 调整摄像机宽高比
camera.aspect = window.innerWidth / window.innerHeight
// 更新视椎体空间
camera.updateProjectionMatrix()
})
}
移动立方体
// 移动立方体
function moveCube() {
// 位移 position
cube.position.x = 5
// cube.position.set(5, 5, 0)
// 旋转 rotation 值为eular角对象 (弧度制)
// 在轴正方向来看物体,默认是绕着轴进行逆时针旋转
cube.rotation.x = Math.PI / 4
// // cube.rotation.set(Math.PI / 4, 0, 0)
// // 缩放 scale (Vector3 三维向量对象,中心原点不动,向 2 边拉伸/缩小)
cube.scale.z = 2
// cube.scale.set(1, 1, 2)
}
上述方法顺序调用
/**准备环境--S */
init() // 初始化
controlsCreate() // 创建轨道控制器
createHelper() // 添加坐标轴辅助
renderResize() // 适配窗口函数
/**准备环境--E */
/**准备内容--S */
createCube() // 创建立方体
moveCube() // 移动立方体
/**准备内容--E */
/**准备逻辑--S */
renderLoop() // 渲染循环
/**准备逻辑--E */
GUI工具的使用
// 6. 引入dat.gui工具库
import * as dat from 'dat.gui';
创建gui函数
function createGUI() {
// 创建gui工具对象
const gui = new dat.GUI();
// 添加具体控制器使用
//gui.add()添加图形用户界面工具
//参数1:关联D0M对象,JS对象,3D物体对象
//参数2:对象其中的某个属性,给这个属性关联用户界面工具(从而快速调整它的值)
//6.0(字符串->输入框)
gui.add(document, 'title')
//6.1控制立方体显示/隐藏(布尔->多选框)
gui.add(cube, 'visible')
//6.2轨道控制器回归初始角度(函数->按钮)
gui.add(controls, 'reset')
// 6.3控制立方体颜色(找属性方式:文档 -> 打印 -> 百度
// 效果:立方体默认颜色和文字 <=> 显示在工具标签上
const colorObj = {
'col': `#${cube.material.color.getHexString()}`
}
gui.addColor(colorObj, 'col').onChange(val => {
cube.material.color = new THREE.Color(val);
})
// 6.4创建gui分组
const folder = gui.addFolder('位移')
folder.add(cube.position, 'x', 0, 5, 0.1)
folder.add(cube.position, 'y', 0, 5, 0.1)
folder.add(cube.position, 'z', 0, 5, 0.1)
// 6.5 下拉菜单(关键:第三个参数为对象时->下拉菜单)
// 对象中属性名->下拉菜单选项名
// 初始值匹配后会影响下拉菜单默认选中哪一项
gui.add({ type: '1' }, 'type', { '方案1': '1', '方案2': '2' }).onChange(val => {
// val 方案对象的 '1','2'
switch (val) {
case '1':
cube.position.set(0, 0, 0)
break;
case '2':
cube.position.set(2, 2, 2)
break;
}
})
}
注意:在创建gui工具中需要使用到物体,所以要在创建完物体后调这个方法
案例-五颜六色立方体
修改创建立方体材质函数
function createCube() {
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 1. 定义颜色数组(x 正负,y 正负,z 正负)
const colorArr = ['red', 'green', 'blue', 'pink', 'orange', 'write']
// 2. 每个颜色字符串映射成材质对象
const materialArr = colorArr.map(colorStr => {
return new THREE.MeshBasicMaterial({
color: colorStr
})
})
// 3. 把材质数组传入 Mesh 构造新的物体
cube = new THREE.Mesh(geometry, materialArr)
// 把物体加入到场景中
scene.add(cube);
}
案例-多个立方体
修改创建立方体材质函数-思路:数据影响视图
数据包含:立方体的颜色(color),立方体的大小(whd) ,立方体的位置(xyz)
扩展:
Math.floor(); 向下取整 Math.floor(1.6);//1
Math.random(); 生成一个大于0.0,小于1的随机数,不包括1.0,即[0.0,1.0)
function createCube() {
// 1. 定义数据对象,描绘每个立方体的信息
const cubeIndolist = []
for (let i = 0; i < 5; i++) {
cubeIndolist.push({
color: `rgb(${Math.floor(Math.random() * (255 - 0 + 1) + 0)},${Math.floor(Math.random() * (255 - 0 + 1) + 0)},${Math.floor(Math.random() * (255 - 0 + 1) + 0)})`,
w: Math.floor(Math.random() * (3 - 1 + 1) + 1),
h: Math.floor(Math.random() * (3 - 1 + 1) + 1),
d: Math.floor(Math.random() * (3 - 1 + 1) + 1),
x: Math.floor(Math.random() * (5 - -5 + 1) + -5),
y: Math.floor(Math.random() * (5 - -5 + 1) + -5),
z: Math.floor(Math.random() * (5 - -5 + 1) + -5),
})
}
// 2. 针对每个数据对象,创建物体
cubeIndolist.map(cubeObj => {
const { color, w, h, d, x, y, z } = cubeObj
const geometry = new THREE.BoxGeometry(w, h, d);
const material = new THREE.MeshBasicMaterial({ color });
cube = new THREE.Mesh(geometry, material)
cube.position.set(x, y, z)
scene.add(cube);
})
}
性能监视器的使用
后续考虑3d场景的性能优化
1.单独引入 Stats 附加组件
2.创建性能监视器
3.设置监视器面板类型(0, 1, 2)
4.设置监视器位置并添加 DOM
// 1. 单独引入 stats 组件
import Stats from 'three/examples/jsm/libs/stats.module.js'
// 性能监视器
let stats
function renderLoop() {
renderer.render(scene, camera)
controls.update()
// 性能监视器数值不断更新
stats.update()
requestAnimationFrame(renderLoop)
}
function createStats() {
// 2. 创建性能监视器
stats = new Stats()
// 3. 设置监视器面板类型(0:fps-每秒传输帧数,1:ms-每帧刷新用时,2:mb-内存占用)
stats.setMode(0)
// 4. 设置监视器位置并添加 DOM
stats.domElement.style.position = 'fixed'
stats.domElement.style.left = '0'
stats.domElement.style.top = '0'
document.body.appendChild(stats.domElement)
}
/**准备内容--S */
createStats() //创建性能监视器
renderLoop() // 渲染循环
/**准备内容--E */
删除物体
如何废置对象(How to dispose of objects)
内存泄漏:比如有一些对象或者物体在浏览器的计算机内存当中,但是我们的变量可能不在指向它了,但是它依旧占用这个内存,就会越叠越多,意外的全局变量、遗忘的定时器、 使用不当的闭包、遗漏的 DOM 元素、网络回调等都会造成内存泄漏。
//在创建立方体函数中给每个立方体起个名字 cube.name = 'cu'
function removeCube() {
// 1. 给 window 双击绑定事件举例删除
window.addEventListener('dblclick', () => {
// 2. 调用 three.js 相关废置函数
const arr = scene.children.filter(obj => obj.name === 'cu')
const cube = arr[0]
if (cube) {
cube.geometry.dispose() // 移除图形数据
cube.material.dispose() // 移除材质数据
// 3. 再从场景中移除物体
scene.remove(cube)
}
})
}
three.js 物体分组管理
three.js物理分组详解它几乎和Object3D是相同的,其目的是使得组中对象在语法上的结构更加清晰。three.js物理分组详解
1.新建分组
2.分组中加入物体
3.把分组加入到场景中
// 1. 新建分组
let group = new THREE.Group()
function createCube() {
const cubeInfoArr = []
for (let i = 0; i < 2500; i++) {
cubeInfoArr.push({
color: `rgb(${Math.floor(Math.random() * (255 - 0 + 1) + 0)}, ${Math.floor(Math.random() * (255 - 0 + 1) + 0)}, ${Math.floor(Math.random() * (255 - 0 + 1) + 0)})`,
w: Math.floor(Math.random() * (3 - 1 + 1) + 1),
h: Math.floor(Math.random() * (3 - 1 + 1) + 1),
d: Math.floor(Math.random() * (3 - 1 + 1) + 1),
x: Math.floor(Math.random() * (5 - -5 + 1) + -5),
y: Math.floor(Math.random() * (5 - -5 + 1) + -5),
z: Math.floor(Math.random() * (5 - -5 + 1) + -5),
})
}
cubeInfoArr.map(cubeObj => {
const { color, w, h, d, x, y, z } = cubeObj
const geometry = new THREE.BoxGeometry(w, h, d)
const material = new THREE.MeshBasicMaterial({ color })
const cube = new THREE.Mesh(geometry, material)
cube.position.set(x, y, z)
cube.name = 'cu'
// 2. 分组中加入物体
group.add(cube)
})
// 3. 把分组加入到场景中
scene.add(group)
}
function removeCube() {
window.addEventListener('dblclick', () => {
group.children.map(obj => {
obj.geometry.dispose()
obj.material.dispose()
group.remove(obj)
})
// 把组对象移除掉
scene.remove(group)
})
}
多种缓冲几何体
function createGeometry() {
// 1. 创建几何图形
// 圆形平面:半径和三角形段数
const circleGeo = new THREE.CircleGeometry(1, 32)
// 平面
const planeGeo = new THREE.PlaneGeometry(1, 1)
// 球体 (半径,水平分三角形段数,垂直三角形段数)
const sphereGeo = new THREE.SphereGeometry( 1, 32, 16)
// 2. 创建网格材质 (side 设置哪一面渲染)
const material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide })
// 3. 创建网格对象
const circle = new THREE.Mesh(circleGeo, material)
const plane = new THREE.Mesh(planeGeo, material)
plane.position.set(-2, -2, -2)
const sphere = new THREE.Mesh(sphereGeo, material)
sphere.position.set(2, 2, 2)
scene.add(circle)
scene.add(plane)
scene.add(sphere)
}
创建点物体
注意:浏览three文档时,图形是图形,材质和物体要结合使用
function createSphere() {
// 1. 创建几何图形
const geometry = new THREE.SphereGeometry(1, 32, 16)
// 2. 创建点材质
const material = new THREE.PointsMaterial({ color: 0x6600ff, size: 0.05 })
// 3. 创建点物体
const points = new THREE.Points(geometry, material)
scene.add(points)
}
线物体和材质
把球状的点物体用线连接起来
function createLine() {
// 1. 创建几何图形
const geometry = new THREE.SphereGeometry(1, 32, 16)
// 2. 创建线材质
const material = new THREE.LineBasicMaterial({
color: 0x6600ff
})
// 3. 创建线物体
const line = new THREE.Line(geometry, material)
scene.add(line)
}
three.js线物体区别
查文档对比 three.js-line物体文档 docs
线(Line): 一条连续的线
环线(LineLoop): 一条从头链接到尾的闭合线
线段(LineSegments) :按顺序一对点链接一条线
全景图贴图
// 全景图贴图
function createMap() {
// 1. 创建球体几何图形
const geometry = new THREE.SphereGeometry(1, 32, 16)
// 2. 使用纹理加载器并创建网格材质对象
const texture = new THREE.TextureLoader().load('/src/image/earth.png');
// 立即使用纹理进行材质创建(map: 颜色贴图)
const material = new THREE.MeshBasicMaterial({ map: texture });
// 3. 创建网格物体
const sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)
}
立方体贴图
function createCubeMap() {
// 1. 创建立方缓冲几何体
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 2. 加载不同纹理图片并创建材质对象 6 个
const imgUrlArr = ['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg']
// 纹理加载器
const textureLoader = new THREE.TextureLoader()
// 设置当前纹理加载器公共的基础路径
textureLoader.setPath('image/park/')
// 遍历图片地址,映射成纹理材质对象
const materialArr = imgUrlArr.map(imgUrl => {
// 创建纹理图片对象
const texture = textureLoader.load(imgUrl)
// three.js 颜色通道为 rgb 颜色(为了防止图片太浅)
texture.colorSpace = THREE.SRGBColorSpace
return new THREE.MeshBasicMaterial({
map: texture
})
})
// 3. 创建网格物体并加入场景
const cube = new THREE.Mesh(geometry, materialArr)
scene.add(cube)
}
全景公园
做法:
1.调整摄像机位置到立方体贴图的盒子中间
2.调整立方体沿着 z 轴做﹣1 缩小(镜面翻转)
3,所有的图形默认都是单面渲染的,所以需要给材质加上双面渲染的配置
side: THREE.DoubleSide
// 1. 调整摄像机位置到盒子中间
// 不能给 0 的原因:轨道控制器内部会取出摄像机初始位置坐变化
camera.position.z = 0.1
const cube = new THREE.Mesh(geometry, materialArr)
// 2. 调整立方体沿着 z 轴做 -1 缩小(镜面翻转)
cube.scale.set(1, 1, -1)
scene.add(cube)
// 3. 设置双面
const materialArr = imgUrlArr.map(imgUrl => {
// 创建纹理图片对象
const texture = textureLoader.load(imgUrl)
// three.js 颜色通道为 rgb 颜色(为了防止图片太浅)
texture.colorSpace = THREE.SRGBColorSpace
return new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
})
})
//
视频纹理
1.创建平面网格物体
2.物体材质使用视频纹理
function createPlaneMap() {
// 1. 创建平面几何物体
// 2. 创建并设置视频纹理贴图
const geometry = new THREE.PlaneGeometry(1, 0.5)
// 视频纹理
// 准备视频标签
const video = document.createElement('video')
video.src = 'video/mouse_cat.mp4'
video.muted = true // 静音
video.addEventListener('loadedmetadata', () => { // 加载视频完成
video.play() // 开始播放视频
})
// 创建视频纹理对象
const texture = new THREE.VideoTexture(video)
// 把视频纹理->贴到材质上
const material = new THREE.MeshBasicMaterial({ map: texture })
// 创建物体
const plane = new THREE.Mesh(geometry, material)
scene.add(plane)
// 点击按钮->播放声音
const button = document.createElement('button')
button.innerHTML = '播放'
button.style.position = 'fixed'
button.style.left = '0'
button.style.bottom = '0'
document.body.appendChild(button)
button.addEventListener('click', () => {
video.muted = false // 关闭静音
})
}
CSS3D 渲染器
1.准备原生 DOM 标签和内容样式
2.引入 CSS3DObject 和 CSS3DRenderer 进行渲染
注意:3D 渲染器是覆盖在 WebGLRenderer 之上的一层
基于 CSS3DRenderer 会设置单独的一个 div 容器用于加载显示旋转位移缩放标签物体
基于 CSS3DObject 把获取/创建的 DOM,转成 three.js 的 3D 物体
// 目标:three.js 3D 渲染器,把原生 DOM 标签加入到 3D 场景中
// 1. 准备原生 DOM 标签
// 2. 引入 CSS3DObject, CSS3DRenderer 并把 DOM 转换成 3D 物体并加入到场景中
// 重要:CSS3DRenderer 是一个新的渲染器,需要在渲染循环调用并适配
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { CSS3DObject, CSS3DRenderer } from 'three/addons/renderers/CSS3DRenderer.js'
let scene, camera, renderer, labelRenderer // 标签渲染器
let controls
function init() {
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5
renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.append(renderer.domElement)
}
function controlsCreate() {
controls = new OrbitControls(camera, renderer.domElement)
}
function renderLoop() {
renderer.render(scene, camera)
// 也要让 DOM 渲染器不断更新不同角度的最新画面
labelRenderer.render(scene, camera)
requestAnimationFrame(renderLoop)
}
function createHelper() {
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
}
function domTo3D() {
// 1. 准备原生 DOM 标签
const tag = document.createElement('span')
tag.innerHTML = '我是文字'
tag.style.color = 'white'
// 2. 引入 CSS3DObject, CSS3DRenderer 并把 DOM 转换成 3D 物体并加入到场景中
// 原生标签的 px 的值会平移到 3d 空间中作为单位
const tag3d = new CSS3DObject(tag)
tag3d.scale.set(1 / 16, 1 / 16, 1 / 16)
scene.add(tag3d)
labelRenderer = new CSS3DRenderer()
labelRenderer.setSize(window.innerWidth, window.innerHeight)
labelRenderer.domElement.style.pointerEvents = 'none' // 在什么条件下让标签触发
鼠标交互事件(这里就是最上面的一层(3D渲的div)需要满足没有任何条件下的交互,此
时场景不让3D渲染的上层div跟鼠标有任何的交互,这里就类似于css所谓的禁止点击了,没有
任何交互就没有事件的产生,不让它阻拦鼠标穿透过去触摸canvas,因为轨道控制器监测的是
canvas的鼠标事件)
labelRenderer.domElement.style.position = 'fixed'
labelRenderer.domElement.style.left = '0'
labelRenderer.domElement.style.top = '0'
document.body.appendChild(labelRenderer.domElement)
// 重要:CSS3DRenderer 是一个新的渲染器,需要在渲染循环调用并适配
}
// 初始化
init()
// 轨道控制器
controlsCreate()
// 坐标轴
createHelper()
// DOM 转 3D
domTo3D()
// 渲染循环
renderLoop()
鼠标事件
目标:与 3D 物体进行鼠标交互
类型1:空间中的原生 DOM交互 - 支持原生事件(设置 pointerEvents = ‘all’)
类型2:three.js 物体交互 - 使用光射投影 Raycaster
核心:鼠标位置归一化为设备坐标,配合摄像机计算收集鼠标移过哪些物体
公式:
x 点坐标:(浏览器 x 轴坐标点 / 画布宽度) * 2 - 1
y 点坐标:- (浏览器 y 轴坐标点 / 画布高度) * 2 + 1
类型1交互:
function domTo3D() {
const tag = document.createElement('span')
tag.innerHTML = '立方体'
tag.style.color = 'white'
// 类型1:原生 DOM 使用原生的事件绑定(设置 pointerEvents='all')
tag.style.pointerEvents = 'all'
tag.addEventListener('click', e => {
alert('dom 被点击了')
e.stopPropagation()
})
const tag3d = new CSS3DObject(tag)
tag3d.scale.set(1 / 32, 1 / 32, 1 / 32)
tag3d.position.set(0, 1, 0)
scene.add(tag3d)
labelRenderer = new CSS3DRenderer()
labelRenderer.setSize(window.innerWidth, window.innerHeight)
labelRenderer.domElement.style.pointerEvents = 'none'
labelRenderer.domElement.style.position = 'fixed'
labelRenderer.domElement.style.left = '0'
labelRenderer.domElement.style.top = '0'
document.body.appendChild(labelRenderer.domElement)
}
类型2交互:
function bindClick() {
window.addEventListener('click', e => {
// 定义光线投射对象
const raycaster = new THREE.Raycaster()
// 定义二维向量对象(保存转换后的平面 x,y 坐标值)
const pointer = new THREE.Vector2()
// 把屏幕坐标 => WebGL设备坐标
// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
pointer.x = (e.clientX / window.innerWidth) * 2 - 1
pointer.y = - (e.clientY / window.innerHeight) * 2 + 1
// 更新摄像机和鼠标之间的连线(位置)
raycaster.setFromCamera(pointer, camera)
// 获取这条线穿过了哪些物体,收集成一个数组
const list = raycaster.intersectObjects(scene.children)
console.log(list)
})
}