雾 Fog
- 线性雾：物体到相机的距离，计算出一个距离因子，根据该因子差值计算物体表面的颜色，从而实现远处的物体模糊的效果。可设置属性，颜色、距离，使物体看上去更加逼真、有层次感。
- 指数雾 FogExp2：在线性雾的基础上，增加了指数项
- 全局雾是设置到场景上，局部雾是设置到物体上
线性雾 Fog
- 雾的颜色和场景scene背景色相同，效果更好
- 雾的密度是从 Fog near 的位置开始计算的，而不是相机，可用来控制影响的区域范围
- 没有 enabled 开关，可将 near 和 far 设置很大的值来实现
- 环境光等光源会影响雾的渲染效果，可用来模拟白天和晚上
- 物体材质有一个fog属性，可控制是否受到雾的影响，默认是true。适用场景：房间内部，设置没有雾，因此物体设置为false。
- 结合动画可让雾“动起来”。
指数雾 FogExp2
- 没有 near、far 这两个属性
- density 调节雾的浓度
粒子系统
- 粒子：在3D空间中，极其小的点or球，通常用于互不相连的点的特效，如 烟花、雪花、沙子等
- 粒子系统：由大量粒子组成的集合，通常用于实现复杂的动态效果，如 烟雾、下雪、沙漏等
- 粒子系统，可通过控制每个粒子的大小、速度、颜色、位置等属性来实现非常精美的特效 创建粒子系统的方法：
- Sprite + SpriteMaterial （简单）Sprite物体特点，始终朝向相机；没有阴影，即设置
castShadow = true阴影也不会生效；含有半透明材质。 - Points + PointsMaterial (相对容易，性能较高)
- Points + PointsMaterial + Shader (实现复杂，性能最好)
- 版本问题：152及以后的版本，开启了全新的色彩空间管理，需要添加色彩空间的属性，之前是outputEncoding属性，该版本之后 添加
map.colorSpace = THREE.SRGBColorSpace，
简单粒子系统
// 创建立方体对象
createObjects () {
const map = new THREE.TextureLoader().load('/src/assets/textures/1.jpg')
map.colorSpace = THREE.SRGBColorSpace // 开启全新的色彩空间配置
for( let x = -10; x < 10; x++ ) {
for ( let y = -10; y < 10; y++ ) {
const material = new THREE.SpriteMaterial({
color: Math.random() * 0xffffff,
opacity: Math.random(),
rotation: Math.random() * Math.PI,
map
})
const sprite = new THREE.Sprite(material)
sprite.position.set(x * Math.random(), y * Math.random(), Math.random() * 10)
this.scene.add(sprite)
}
}
},
粒子 Points
// 创建立方体对象
createObjects () {
const material = new THREE.PointsMaterial({
color: 0xffffff * Math.random(),
size: 5,
sizeAttenuation: false, // 指定点的大小是否因相机的深度而衰减（仅限于透视相机），默认是true
})
const box = new THREE.Points(new THREE.BoxGeometry(6, 6, 6, 16, 32, 32), material)
const sphere = new THREE.Points(new THREE.SphereGeometry(4, 32, 32), material)
sphere.position.x = -4
box.position.x = 4
this.scene.add(box, sphere)
},
什么是shader?
- 顶点着色器
- 片元着色器（颜色）
glsl打包工具：npm i vite-plugin-glsl
