星空特效，截图不太完美

news2024/11/28 14:36:59

先上效果：
在这里插入图片描述
再上代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星空</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body{
            margin: 0;
        }
    </style>
</head>
<body>
</body>
<script>
    
    let camera
    let scene
    let renderer
    let material
    let mouseX = 0
    let mouseY = 0
    let windowHalfX = window.innerWidth / 2
    let windowHalfY = window.innerHeight / 2

    init()
    animate()

    function init () {
        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 5, 2000)
        camera.position.z = 500

        scene = new THREE.Scene()
        scene.fog = new THREE.FogExp2(0x0000ff, 0.001)

        const geometry = new THREE.BufferGeometry()
        const vertices = []
        const size = 2000

        for ( let i = 0; i < 20000; i ++ ) {
            const x = (Math.random() * size + Math.random() * size) / 2 - size / 2
            const y = (Math.random() * size + Math.random() * size) / 2 - size / 2
            const z = (Math.random() * size + Math.random() * size) / 2 - size / 2

            vertices.push(x, y, z)
        }

        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))

        material = new THREE.PointsMaterial({
            size: 2,
            color: 0xffffff,
        })

        const particles = new THREE.Points(geometry, material)
        scene.add(particles)

        renderer = new THREE.WebGLRenderer()
        renderer.setPixelRatio(window.devicePixelRatio)
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        document.body.style.touchAction = 'none'
        document.body.addEventListener('pointermove', onPointerMove)
        window.addEventListener('resize', onWindowResize)
    }

    function onWindowResize () {
        windowHalfX = window.innerWidth / 2
        windowHalfY = window.innerHeight / 2

        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()
        renderer.setSize(window.innerWidth, window.innerHeight)
    }

    function onPointerMove (event) {
        mouseX = event.clientX - windowHalfX
        mouseY = event.clientY - windowHalfY
    }

    function animate () {
        requestAnimationFrame(animate)
        render()
    }

    function render () {
        camera.position.x += (mouseX * 2 - camera.position.x) * 0.02
        camera.position.y += (-mouseY * 2 - camera.position.y) * 0.02
        camera.lookAt(scene.position)
        renderer.render(scene, camera)
        scene.rotation.x += 0.001
        scene.rotation.y += 0.002
    }

</script>
</html>