粒子特效

Points与点材质

Points是用于显示点的类：

const SphereGeometry=new THREE.SphereBufferGeometry(3,20,20)
// 点材质
const PointsMaterial=new THREE.PointsMaterial()
// 创建点
const points=new THREE.Points(SphereGeometry,PointsMaterial)

点材质属性

列举说明较难理解的属性，其他属性查阅官方文档

sizeAttenuation

指定点的大小是否因相机深度而衰减（仅限透视摄像头）默认为true

翻译为人话，无论相机远近点的大小都是一样的

depthWrite

渲染此材质是否对深度缓冲区有任何影响。默认为true

翻译为人话，如果材质发生了叠加，是否对后面的材质进行渲染，false为渲染

但是这样显示会很奇怪，看起来就像下面的材质设置了z-index，将前面的压在自己后面

blending

这时可以设置blending定义材质的混合模式为THREE.AdditiveBlending ,他们的效果将会相加

例子(一):顶点着色打造绚丽多彩的星空

import * as THREE from 'three'
import autoResize from "../../utils/autoResize";
//  创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
// 设置相机位置
camera.position.set(10, 10, 5)
// 将相机添加到场景中
scene.add(camera)
// 加载贴图
const texture=new THREE.TextureLoader().load('/textures/particles/5.png')
// 生成星星✨
const geometry = new THREE.BufferGeometry()
const positionArr = new Float32Array(5000*3)
// color
const colors=new Float32Array(5000*3)
for (let i = 0; i <5000*3; i++) {
    positionArr[i] = (Math.random()-0.5)  *30
    colors[i]=Math.random()
}

geometry.setAttribute(
    'position',
    new THREE.BufferAttribute(positionArr, 3)
)
geometry.setAttribute(
    'color',
    new THREE.BufferAttribute(colors, 3)
)
// 点材质
const PointsMaterial=new THREE.PointsMaterial()
PointsMaterial.size=.4
PointsMaterial.map=texture
// 开启定点着色 
PointsMaterial.vertexColors=true
PointsMaterial.alphaMap=texture
PointsMaterial.transparent=true
PointsMaterial.depthWrite=false
PointsMaterial.blending=THREE.AdditiveBlending

// 创建点
const points=new THREE.Points(geometry,PointsMaterial)

scene.add(points)



const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
// 创建轨道控制器
// const controls = new OrbitControls(camera, renderer.domElement)
// 阻尼效果
// controls.enableDamping = true
// 渲染函数
function render() {
    renderer.render(scene, camera)
    if(points.position.y===-4){
        points.position.y=4
    }else{
        points.position.y-=.5
    }
    //   渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render)
}

render()