【HTML——3d粒子特效（效果+代码）】，开发一个web站点

这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。

以下是创建3D粒子特效的HTML和JavaScript代码示例。这个特效使用了Three.js库来创建和动画处理3D场景中的粒子。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Particle Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 设置场景、相机和渲染器
        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 geometry = new THREE.Geometry();
        const material = new THREE.ParticleBasicMaterial({ color: 0xFFFFFF, size: 0.05 });
        for (let i = 0; i < 1000; i++) {
            const particle = new THREE.Vector3(
                Math.random() * 2 - 1,
                Math.random() * 2 - 1,
                Math.random() * 2 - 1
            );
            particle.multiplyScalar(Math.random() * 10 + 10);
            geometry.vertices.push(particle);
        }
        const system = new THREE.ParticleSystem(geometry, material);
        scene.add(system);
 
        // 创建灯光
        const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5);
        scene.add(ambientLight);
 
        // 设置相机位置并开始渲染循环
        camera.position.z = 5;
        function animate() {
            requestAnimationFrame(animate);
            system.rotation.y += 0.001;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

这段代码创建了一个简单的3D粒子系统，每个粒子随机生成位置和大小，并被统一赋予白色。系统中有一个环境光源，提供基本的照明。场景、相机和渲染器被设置好后，通过requestAnimationFrame循环进行渲染，并且通过改变系统的旋转来创建动态效果。

【HTML——3d粒子特效（效果+代码）】，开发一个web站点

评论已关闭

推荐阅读