Three.js简单流光效果图

在Three.js中创建一个简单的流光效果图，可以通过使用PointsMaterial和Point来实现。以下是一个简单的例子：

// 初始化Three.js场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建一个流光的材质
const glowMaterial = new THREE.SpriteMaterial({
    color: 0xffffff,
    transparent: true,
    blending: THREE.AdditiveBlending,
    depthWrite: false,
    map: new THREE.CanvasTexture(generateGlow()), // 使用一个发光的canvas作为纹理
    scaleByViewport: true,
});
 
// 创建流光的粒子
function createGlowingParticle(x, y, z) {
    const sprite = new THREE.Sprite(glowMaterial);
    sprite.position.set(x, y, z);
    scene.add(sprite);
}
 
// 生成发光的canvas函数
function generateGlow() {
    const canvas = document.createElement('canvas');
    const size = 32;
    canvas.width = size;
    canvas.height = size;
    const context = canvas.getContext('2d');
    const gradient = context.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
    gradient.addColorStop(0, 'rgba(255,255,255,1)');
    gradient.addColorStop(0.9, 'rgba(255,255,255,0)');
    context.fillStyle = gradient;
    context.fillRect(0, 0, size, size);
    return canvas;
}
 
// 创建一个立方体作为流光的参照物
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
camera.position.z = 5;
 
const animate = function () {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};
 
animate(); // 开始动画渲染

这段代码创建了一个简单的场景，包括一个参照的立方体和一个发光的粒子。通过调整generateGlow函数中的代码，可以自定义发光的样式和颜色。通过调整粒子的位置和速度，可以实现更复杂的流光效果。