粒子星空穿梭points版，HTML代码在线实时编辑、实时预览

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13

            
            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

编辑器加载中

main.js

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

            
            import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

let scene, camera, renderer, controls, stars, starGeo, clock = new THREE.Clock();

const starCount = 10000;
const positions = new Float32Array(starCount * 3);
const colors = new Float32Array(starCount * 3);

init();
animate();

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000010);

  camera = new THREE.PerspectiveCamera(
    75, window.innerWidth / window.innerHeight, 1, 1000
  );
  camera.position.z = 10;

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 辅助
  const helper = new THREE.AxesHelper(30);
  scene.add(helper);

  // 交互
  controls = new OrbitControls(camera, renderer.domElement);
  
  // 创建几何体
  starGeo = new THREE.BufferGeometry();

  for (let i = 0; i < starCount; i++) {
    // 三轴均匀分布，形成一个立方体壳（缩小可查看）
    const x = THREE.MathUtils.randFloatSpread(400); // spread ±200
    const y = THREE.MathUtils.randFloatSpread(400);
    const z = THREE.MathUtils.randFloatSpread(400);
    // set(array, offset)
    positions.set([x, y, z], i * 3);

    // 多层次星星颜色：90% 冷白，10% 暖色
    const starColor = new THREE.Color();
    if (Math.random() < 0.9) {
      // 冷色（偏蓝白、紫白）
      const h = 0.58 + Math.random() * 0.07;   // 色相偏蓝紫
      const s = 0.3 + Math.random() * 0.3;     // 饱和度较低
      const l = 0.85 + Math.random() * 0.15;   // 明亮
      starColor.setHSL(h, s, l);
    } else {
      // 暖色（微黄或红）
      const h = 0.05 + Math.random() * 0.05;   // 色相偏橙红
      const s = 0.5 + Math.random() * 0.4;
      const l = 0.75 + Math.random() * 0.15;
      starColor.setHSL(h, s, l);
    }
    colors.set([starColor.r, starColor.g, starColor.b], i * 3);
  }

  starGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  starGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3));

  // 材质
  const sprite = new THREE.TextureLoader().load('./assets/disc.png');
  const starMaterial = new THREE.PointsMaterial({
    // 纹理 * color 就是最终的展示颜色
    // 白色纹理rgb(1,1,1) * color 都是color本身
    map: sprite,
    transparent: true,
    opacity: 0.9,
    // 顶点着色：每个顶点有自己的颜色，同时需要attr中存在color分量
    vertexColors: true
  });

  // Points 对象
  stars = new THREE.Points(starGeo, starMaterial);
  scene.add(stars);

  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

// 动画更新
function animate() {
  requestAnimationFrame(animate);

  // 穿梭场景
  for(let i = 0; i < starCount; i++) {
    const zindex = i * 3 + 2;
    positions[zindex] += 1.2 + clock.getDelta();

    if (positions[zindex] > camera.position.z + 10) {
      positions[i * 3] = THREE.MathUtils.randFloatSpread(400);
      positions[i * 3 + 1] = THREE.MathUtils.randFloatSpread(400);
      positions[zindex] = -200;
    }
  }
  starGeo.attributes.position.needsUpdate = true;

  controls.update();
  renderer.render(scene, camera);
}

编辑器加载中

package.json

注意：新添加的依赖包首次加载可能会报错，稍后再次刷新即可

            
                1
2
3
4
5

            
            {
  "dependencies": {
    "three": "0.173.0"
  }
}

编辑器加载中