使用threejs实现星空天空盒效果

代码如下

``` // 创建场景
        const scene = new THREE.Scene();

        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 5);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 创建天空盒
        const loader = new THREE.CubeTextureLoader();
        const texture = loader.load([
            'bak7/right.jpg',  // px
            'bak7/left.jpg',   // nx
            'bak7/top.jpg',    // py
            'bak7/down.jpg',   // ny
            'bak7/back.jpg',  // pz
            'bak7/front.jpg'    // nz
        ]);
        scene.background = texture;

        // 创建粒子系统
        const particlesGeometry = new THREE.BufferGeometry();
        const particlesCount = 5000;

        const posArray = new Float32Array(particlesCount * 3);
        for (let i = 0; i < particlesCount * 3; i++) {
            posArray[i] = (Math.random() - 0.5) * 20;
        }

        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));

        const particlesMaterial = new THREE.PointsMaterial({
            size: 0.02,
            color: 0xffffff,
            transparent: true,
            opacity: 0.8
        });

        const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particlesMesh);

        // 添加一个立方体作为参考
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加轨道控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true; // 添加阻尼效果
        controls.dampingFactor = 0.05; // 阻尼系数
        controls.minDistance = 2;      // 最小缩放距离
        controls.maxDistance = 10;     // 最大缩放距离
        controls.maxPolarAngle = Math.PI; // 限制垂直旋转角度

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update(); // 更新控制器
            renderer.render(scene, camera);
        }
        animate();

        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });