Three.js无限星空特效_threejs starry sky background-CSDN博客

本文链接：https://blog.csdn.net/qq_44375977/article/details/112682583
效果

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #000000;
        margin: 0px;
        overflow: hidden;
        background-image: radial-gradient(
          ellipse farthest-corner at center top,
          #23233f 0%,
          #000000 60%
        );
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as THREE from "./node_modules/three/build/three.module.js";
      import { OrbitControls } from "./node_modules/three/examples/jsm/controls/OrbitControls.js";

      const { scene, camera, renderer } = initScene();

      let pointScene = null;
      const total = 4000;
      const height = 400;
      const width = 500;
      const depth = 1600;

      (function () {
        creartStarPoints();
        render();
      })();

      function creartStarPoints() {
        const geometry = new THREE.Geometry();
        for (let i = 0; i < total; i++) {
          const vertex = new THREE.Vector3();
          const x = Math.random() * width - width * 0.5;
          const y = Math.random() * height - height * 0.5;
          const z = -Math.random() * depth + 100;
          vertex.x = x;
          vertex.y = y;
          vertex.z = z;
          vertex.origin = new THREE.Vector3();
          vertex.origin.x = x;
          vertex.origin.y = y;
          vertex.origin.z = z;
          geometry.vertices.push(vertex);
        }

        const material = new THREE.PointsMaterial({
          size: 0.2,
          color: 0x00ffff,
          fog: true,
        });
        const points = new THREE.Points(geometry, material);
        pointScene = points;
        scene.add(points);
      }

      function render() {
        renderer.render(scene, camera);
        pointScene.geometry.vertices.forEach((item) => {
          item.z += 2;
          if (item.z > 100) item.z = -depth + 100;
        });
        pointScene.geometry.verticesNeedUpdate = true;
        requestAnimationFrame(render);
      }

      function initScene() {
        const scene = new THREE.Scene();
        scene.fog = new THREE.Fog(0x23233f, 1, 300000);

        const camera = new THREE.PerspectiveCamera(
          70,
          window.innerWidth / window.innerHeight,
          1,
          100000
        );
        camera.position.set(0, 10, 50);
        const renderer = new THREE.WebGLRenderer({
          antialias: true,
          alpha: true,
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        scene.add(new THREE.AxesHelper(100));
        window.onresize = () => {
          renderer.setSize(window.innerWidth, window.innerHeight);
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
        };
        return {
          scene,
          camera,
          renderer,
        };
      }
    </script>
  </body>
</html>