three.js图片粒子化

// 引入Three.js库
import * as THREE from 'three';

// 创建场景、相机和渲染器
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 textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/your/image.jpg', (texture) => {
    const material = new THREE.PointsMaterial({ map: texture, size: 0.1 });

    // 创建粒子几何体
    const geometry = new THREE.BufferGeometry();
    const vertices = [];
    for (let i = 0; i < 1000; i++) {
        const x = (Math.random() - 0.5) * 10;
        const y = (Math.random() - 0.5) * 10;
        const z = (Math.random() - 0.5) * 10;
        vertices.push(x, y, z);
    }
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

    // 创建粒子系统
    const particles = new THREE.Points(geometry, material);
    scene.add(particles);

    // 设置相机位置
    camera.position.z = 5;

    // 动画循环
    function animate() {
        requestAnimationFrame(animate);
        particles.rotation.x += 0.001;
        particles.rotation.y += 0.001;
        renderer.render(scene, camera);
    }
    animate();
});