您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

全屏的微粒子3D动画特效

时间：08-26来源：作者：点击数：29

css

body {
    margin: 0;
    overflow: hidden;
}

#canvas {
    background:radial-gradient(circle farthest-corner at center top, #071021, #19324a);
}

需要引入：three.min.js

另外js代码

window.addEventListener("load", init);

function init() {
    let rot = 0; // 角度

    
    const renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("canvas"),
        alpha: true
    });

   
    const scene = new THREE.Scene();

    
    scene.fog = new THREE.Fog(0xaaaaaa, 50, 2000);

    
    const camera = new THREE.PerspectiveCamera(70, 1000);

   
    const geometry = new THREE.Geometry();

    for (let i = 0; i < 10000; i++) {
        const star = new THREE.Vector3();
        star.x = THREE.Math.randFloatSpread(2000);
        star.y = THREE.Math.randFloatSpread(2000);
        star.z = THREE.Math.randFloatSpread(2000);

        geometry.vertices.push(star)
    }

    
    const material = new THREE.PointsMaterial({
        color: 0xffffff
    });
    const starField = new THREE.Points(geometry, material);
    scene.add(starField);

  
    function render() {
        rot += 0.1;
        
        const radian = (rot * Math.PI) / 180;
        
        camera.position.x = 1000 * Math.sin(radian);
        camera.position.z = 1000 * Math.cos(radian);
        
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        
        renderer.render(scene, camera);

        requestAnimationFrame(render);
    }
    render();

    
    window.addEventListener("resize", onResize);

    function onResize() {
        
        const width = window.innerWidth;
        const height = window.innerHeight;
        
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);

        
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    }
    // 初始化
    onResize();
}

html代码

<canvas id="canvas"></canvas>

附上完整版html代码

因为js在后面版本移除了THREE.Geometry();方法，故我选择引入特定版本的js。

如果遇到其它错误自己感觉浏览器的提示自行修改即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
		html,body {
            width: 100%;
            height: 100%;
			margin: 0;
			overflow: hidden;
		}

		#canvas {
            width: 100%;
            height: 100%;
			background:radial-gradient(circle farthest-corner at center top, #071021, #19324a);
		}

    </style>
</head>
<body>
<canvas id="canvas"></canvas>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js" integrity="sha512-NNyaCC2BKAfte54rx4joMGzGxpCIGxiZkizFH82XB2GR37x+IZN9YwFItYlsS9g1jFuhM9d18sJv9/dDLztdVg==" crossorigin="anonymous"></script>
<script language="JavaScript">
    window.addEventListener("load", init);

    function init() {
        let rot = 0; // 角度

        const renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById("canvas"),
            alpha: true
        });


        console.log("==========")
        const scene = new THREE.Scene();


        scene.fog = new THREE.Fog(0xaaaaaa, 50, 2000);


        const camera = new THREE.PerspectiveCamera(70, 1000);


        const geometry = new THREE.Geometry();

        for (let i = 0; i < 10000; i++) {
            const star = new THREE.Vector3();
            star.x = THREE.Math.randFloatSpread(2000);
            star.y = THREE.Math.randFloatSpread(2000);
            star.z = THREE.Math.randFloatSpread(2000);

            geometry.vertices.push(star)
        }


        const material = new THREE.PointsMaterial({
            color: 0xffffff
        });
        const starField = new THREE.Points(geometry, material);
        scene.add(starField);


        function render() {
            rot += 0.1;

            const radian = (rot * Math.PI) / 180;

            camera.position.x = 1000 * Math.sin(radian);
            camera.position.z = 1000 * Math.cos(radian);

            camera.lookAt(new THREE.Vector3(0, 0, 0));


            renderer.render(scene, camera);

            requestAnimationFrame(render);
        }
        render();


        window.addEventListener("resize", onResize);

        function onResize() {

            const width = window.innerWidth;
            const height = window.innerHeight;

            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(width, height);


            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        }
        // 初始化
        onResize();
    }

</script>

</html>