![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250813011948-689be834a0753.png\")
<\/h2>\n<\/h2>\n\u524d\u8a00：\u521d\u5b66 JS \u65f6，\u4f60\u53ef\u80fd\u89c9\u5f97\u5b83\u5c31\u662f\u4e2a \u201c\u8868\u5355\u9a8c\u8bc1\u5de5\u5177\u4eba\u201d\u2014\u2014 \u6700\u591a\u5f39\u4e2a alert \u6846\u6846\u3002\u4f46\u4eca\u5929\u8fd9\u4e2a\u6848\u4f8b\u4f1a\u8ba9\u4f60\u77aa\u5927\u773c\u775b：\u8fd9\u73a9\u610f\u513f\u5c45\u7136\u80fd\u5728\u6d4f\u89c8\u5668\u91cc\u641e\u51fa \u201c\u8d5b\u535a\u670b\u514b\u70df\u82b1\u79c0\u201d？\u522b\u7728\u773c，\u54b1\u4eec\u8fd9\u5c31\u5f00\u6574！ \u60f3\u6284\u4f5c\u4e1a？\u76f4\u63a5\u62c9\u5230\u6700\u540e，\u5b8c\u6574\u4ee3\u7801\u7ed9\u4f60\u5907\u597d，\u590d\u5236\u7c98\u8d34\u5c31\u80fd\u770b\u6548\u679c！<\/p>\n
\u5148\u4e0a\u6548\u679c\u56fe\u63cf\u8ff0：\u60f3\u8c61\u4e00\u4e0b \u2014\u2014 \u6f06\u9ed1\u7684\u80cc\u666f\u91cc，\u6210\u5343\u4e0a\u4e07\u7684\u5f69\u8272\u7c92\u5b50\u50cf\u88ab\u6309\u4e0b\u64ad\u653e\u952e\u7684\u5f39\u5e55，\u6709\u7684\u76f4\u7ebf\u72c2\u98d9，\u6709\u7684\u87ba\u65cb\u7ed5\u5708，\u8fd1\u5904\u7684\u7c92\u5b50\u4eae\u5f97\u6643\u773c，\u8fdc\u5904\u7684\u62d6\u7740\u6de1\u6de1\u7684\u9713\u8679\u5c3e\u5df4，\u9f20\u6807\u4e00\u62d6\u8fd8\u80fd 360\u00b0 \u8f6c\u7740\u770b\u3002\u5c31\u50cf\u628a\u79d1\u5e7b\u7535\u5f71\u91cc\u7684\u98de\u8239\u5c3e\u6c14\u642c\u8fdb\u4e86\u6d4f\u89c8\u5668，\u5173\u952e\u662f：\u8fd9\u5c45\u7136\u662f JS \u5199\u7684！<\/p>\n
\u5728\u5f00\u59cb\u4e4b\u524d，\u5148\u5f97\u77e5\u9053\u54b1\u4eec\u8981 \u201c\u53ec\u5524\u201d \u8fd9\u4e9b\u7c92\u5b50\u9700\u8981\u5565 \u201c\u5492\u8bed\u201d：<\/p>\n
1. \u53ec\u5524 \u201c\u5de5\u5177\u4eba\u201d \u5e93<\/p>\n
2. \u642d\u4e2a \u201c\u821e\u53f0\u201d（\u573a\u666f\u548c\u76f8\u673a）<\/p>\n
3. \u8bf7 \u201c\u6444\u5f71\u5e08\u201d（\u6e32\u67d3\u5668）<\/p>\n
4. \u8ba9\u821e\u53f0 \u201c\u4f38\u7f29\u81ea\u5982\u201d（\u7a97\u53e3\u9002\u914d）<\/p>\n
5. \u7ed9\u89c2\u4f17 \u201c\u64cd\u63a7\u6743\u201d（\u63a7\u5236\u5668）<\/p>\n
6. \u7ed9\u7c92\u5b50 \u201c\u7f16\u5e8f\u53f7\u201d（\u5168\u5c40\u53d8\u91cf）<\/p>\n
7. \u751f\u6210\u7b2c\u4e00\u6279 \u201c\u6f14\u5458\u201d（\u7c92\u5b50\u6570\u7ec4）<\/p>\n
8. \u52a0\u66f4\u591a \u201c\u7fa4\u6f14\u201d（\u8865\u5145\u7c92\u5b50）<\/p>\n
9. \u7ed9\u7c92\u5b50 \u201c\u7a7f\u8863\u670d\u201d（\u51e0\u4f55\u4f53\u548c\u6750\u8d28）<\/p>\n
10. \u8ba9\u6f14\u5458 \u201c\u4e0a\u53f0\u201d（\u70b9\u4e91\u8fdb\u573a\u666f）<\/p>\n
11. \u5f00\u59cb \u201c\u8868\u6f14\u201d（\u6e32\u67d3\u5faa\u73af）<\/p>\n
\u8981\u641e\u4e8b\u60c5，\u5148\u628a\u5bb6\u4f19\u4e8b\u513f\u5907\u9f50：<\/p>\n
import * as THREE from "https:\/\/cdn.skypack.dev\/three@0.136.0"; \/\/ 3D\u5305\u5de5\u5934
\nimport { OrbitControls } from "https:\/\/cdn.skypack.dev\/three@0.136.0\/examples\/jsm\/controls\/OrbitControls"; \/\/ \u89c2\u4f17\u64cd\u63a7\u5668
\nconsole.clear(); \/\/ \u6e05\u6389\u63a7\u5236\u53f0\u7684\u5783\u573e，\u514d\u5f97\u5f71\u54cd\u88c5X <\/p>\n
\u5410\u69fd：\u5c31\u50cf\u505a\u996d\u524d\u5148\u628a\u9505\u7897\u74e2\u76c6\u6446\u51fa\u6765，\u8fd9\u91cc\u5148\u628a Three.js \u548c\u63a7\u5236\u5668 \u201c\u8bf7\u201d \u8fdb\u6765，\u987a\u4fbf\u628a\u63a7\u5236\u53f0\u64e6\u5e72\u51c0 \u2014\u2014 \u4e4b\u524d\u8c03\u8bd5\u7684console.log\u5c31\u50cf\u53a8\u623f\u5783\u573e，\u5f97\u6e05\u6389\u3002<\/p>\n
\u6ca1\u6709\u821e\u53f0，\u7c92\u5b50\u4eec\u5728\u54ea\u513f\u8868\u6f14？<\/p>\n
let scene = new THREE.Scene(); \/\/ \u5efa\u4e2a\u821e\u53f0
\nscene.background = new THREE.Color(0x000000); \/\/ \u821e\u53f0\u80cc\u666f：\u7eaf\u9ed1，\u50cf\u7535\u5f71\u9662\u5173\u706f
\nlet camera = new THREE.PerspectiveCamera(75, innerWidth \/ innerHeight, 0.1, 1000); \/\/ \u67b6\u4e2a\u76f8\u673a
\ncamera.position.set(0, 5, 30); \/\/ \u76f8\u673a\u4f4d\u7f6e：\u7ad9\u5728\u540e\u6392\u770b\u821e\u53f0，\u4e0d\u8fdc\u4e0d\u8fd1 <\/p>\n
\u5410\u69fd：\u80cc\u666f\u8bbe\u6210\u7eaf\u9ed1，\u624d\u80fd\u51f8\u663e\u7c92\u5b50\u7684\u9713\u8679\u8272，\u5c31\u50cf\u9ed1\u591c\u91cc\u7684\u8424\u706b\u866b\u624d\u663e\u773c\u3002\u76f8\u673a\u4f4d\u7f6e\u5f88\u5173\u952e，\u592a\u8fd1\u4e86\u53ea\u80fd\u770b\u89c1\u51e0\u4e2a\u7c92\u5b50\u7684 \u201c\u5927\u8138\u201d，\u592a\u8fdc\u4e86\u5c31\u6210\u829d\u9ebb\u4e86\u3002<\/p>\n
\u821e\u53f0\u642d\u597d\u4e86，\u5f97\u6709\u4eba\u628a\u753b\u9762\u62cd\u51fa\u6765\u7ed9\u89c2\u4f17\u770b：<\/p>\n
let renderer = new THREE.WebGLRenderer({ antialias: true }); \/\/ \u6444\u5f71\u5e08，\u5e26\u6297\u952f\u9f7f（\u753b\u9762\u66f4\u7ec6\u817b）
\nrenderer.setSize(innerWidth, innerHeight); \/\/ \u7167\u7247\u5c3a\u5bf8：\u548c\u7a97\u53e3\u4e00\u6837\u5927
\ndocument.body.appendChild(renderer.domElement); \/\/ \u628a\u7167\u7247\u8d34\u5230\u7f51\u9875\u4e0a <\/p>\n
\u5410\u69fd：antialias: true\u5c31\u50cf\u7ed9\u6444\u5f71\u5e08\u52a0\u4e86 \u201c\u7f8e\u989c\u6ee4\u955c\u201d，\u7c92\u5b50\u8fb9\u7f18\u4e0d\u4f1a\u6bdb\u6bdb\u7cd9\u7cd9\u3002\u6700\u540e\u4e00\u6b65\u662f\u628a\u6e32\u67d3\u7ed3\u679c \u201c\u9489\u201d \u5728\u7f51\u9875\u4e0a \u2014\u2014 \u4e0d\u7136\u89c2\u4f17\u770b\u5565？<\/p>\n
\u89c2\u4f17\u53ef\u80fd\u4f1a\u653e\u5927\u7a97\u53e3，\u821e\u53f0\u5f97\u8ddf\u7740\u53d8：<\/p>\n
window.addEventListener("resize", () => {
\n camera.aspect = innerWidth \/ innerHeight; \/\/ \u76f8\u673a\u955c\u5934\u6bd4\u4f8b\u8ddf\u7740\u7a97\u53e3\u53d8
\n camera.updateProjectionMatrix(); \/\/ \u76f8\u673a\u201c\u91cd\u8c03\u7126\u8ddd\u201d
\n renderer.setSize(innerWidth, innerHeight); \/\/ \u6444\u5f71\u5e08\u6362\u4e2a\u5c3a\u5bf8\u62cd
\n}); <\/p>\n
\u5410\u69fd：\u5c31\u50cf\u7535\u5f71\u9662\u7684\u5e55\u5e03，\u89c2\u4f17\u628a\u5385\u62c9\u5927\u4e86，\u5e55\u5e03\u4e5f\u5f97\u8ddf\u7740\u6491\u5927，\u4e0d\u7136\u753b\u9762\u4f1a\u53d8\u5f62\u3002\u8fd9\u91cc\u7684resize\u4e8b\u4ef6\u5c31\u662f \u201c\u5e55\u5e03\u8c03\u8282\u5668\u201d\u3002<\/p>\n
\u603b\u4e0d\u80fd\u53ea\u770b\u56fa\u5b9a\u89d2\u5ea6\u5427？\u5f97\u8ba9\u89c2\u4f17\u81ea\u5df1\u8f6c\u7740\u770b：<\/p>\n
let controls = new OrbitControls(camera, renderer.domElement); \/\/ \u7ed9\u4e2a\u9065\u63a7\u5668
\ncontrols.enableDamping = true; \/\/ \u62d6\u52a8\u540e\u6162\u6162\u505c\u4e0b，\u50cf\u5e26\u5239\u8f66\u7684\u8f6e\u6905
\ncontrols.enableZoom = true; \/\/ \u5141\u8bb8\u7f29\u653e，\u60f3\u770b\u7ec6\u8282\u5c31\u51d1\u8fd1\u70b9 <\/p>\n
\u5410\u69fd：enableDamping\u662f\u4e2a\u597d\u4e1c\u897f，\u4e0d\u7136\u62d6\u52a8\u9f20\u6807\u4e00\u677e\u624b，\u753b\u9762 \u201c\u55d6\u201d \u5730\u98de\u51fa\u53bb，\u5bb9\u6613\u6655 3D\u3002\u5c31\u50cf\u73a9\u8fc7\u5c71\u8f66\u52a0\u4e86\u7f13\u505c，\u53cb\u597d！<\/p>\n
\u8fd9\u4e48\u591a\u7c92\u5b50，\u5f97\u6709 \u201c\u70b9\u540d\u518c\u201d \u548c \u201c\u65f6\u95f4\u8868\u201d：<\/p>\n
let globalData = { time: { value: 0 } }; \/\/ \u5168\u5c40\u8ba1\u65f6\u5668，\u7ed9\u7c92\u5b50\u770b\u65f6\u95f4\u7528
\nlet speeds = []; \/\/ \u6bcf\u4e2a\u7c92\u5b50\u7684\u201c\u901f\u5ea6\u8868\u201d
\nlet directions = []; \/\/ \u6bcf\u4e2a\u7c92\u5b50\u7684\u201c\u8fd0\u52a8\u65b9\u5411\u201d <\/p>\n
\/\/ \u7ed9\u7c92\u5b50\u968f\u673a\u5206\u914d\u65b9\u5411\u548c\u901f\u5ea6
\nlet setDirection = () => {
\n directions.push(
\n Math.random() * 2 – 1, \/\/ X\u65b9\u5411：\u5de6(-1)\u5230\u53f3(1)
\n Math.random() * 2 – 1, \/\/ Y\u65b9\u5411：\u4e0b(-1)\u5230\u4e0a(1)
\n Math.random() * 2 – 1, \/\/ Z\u65b9\u5411：\u524d(-1)\u5230\u540e(1)
\n Math.random() * 3 + 1 \/\/ \u901f\u5ea6：1\u52304\u4e4b\u95f4
\n );
\n}; <\/p>\n
\u5410\u69fd：\u5c31\u50cf\u7ed9\u6bcf\u4e2a\u5b66\u751f\u53d1 \u201c\u8fd0\u52a8\u624b\u73af\u201d，\u8bb0\u5f55\u4ed6\u4eec\u8dd1\u591a\u5feb\u3001\u5f80\u54ea\u8dd1\u3002Math.random() * 2 – 1\u8fd9\u62db\u5f88\u5999，\u76f4\u63a5\u628a\u968f\u673a\u6570\u4ece 0-1 \u53d8\u6210 – 1 \u5230 1，\u7701\u5f97\u518d\u7b97\u4e00\u904d\u3002<\/p>\n
\u5148\u6765 5 \u4e07\u4e2a\u7c92\u5b50\u6491\u573a\u9762：<\/p>\n
let particles = new Array(50000).fill().map(() => {
\n speeds.push(Math.random() * 0.8 + 0.2); \/\/ \u5927\u5c0f：0.2\u52301
\n setDirection(); \/\/ \u5206\u914d\u65b9\u5411
\n \/\/ \u968f\u673a\u4f4d\u7f6e：\u5728\u4e00\u4e2a\u7403\u91cc\u5206\u5e03
\n return new THREE.Vector3(
\n (Math.random() * 2 – 1) * 20, \/\/ X\u8303\u56f4：-20\u523020
\n (Math.random() * 2 – 1) * 20, \/\/ Y\u8303\u56f4：-20\u523020
\n (Math.random() * 2 – 1) * 20 \/\/ Z\u8303\u56f4：-20\u523020
\n );
\n}); <\/p>\n
\u5410\u69fd：5 \u4e07\u4e2a\u7c92\u5b50\u542c\u8d77\u6765\u591a，\u4f46 Three.js \u625b\u5f97\u4f4f \u2014\u2014 \u5c31\u50cf\u6f14\u5531\u4f1a 5 \u4e07\u4eba，\u53ea\u8981\u573a\u5730\u591f\u5927（\u6d4f\u89c8\u5668\u6027\u80fd\u591f），\u5c31\u4e0d\u4f1a\u6324\u7206\u3002Vector3\u662f\u7ed9\u6bcf\u4e2a\u7c92\u5b50 \u201c\u753b\u5750\u6807\u201d，\u8ba9\u5b83\u4eec\u522b\u624e\u5806\u3002<\/p>\n
\u518d\u6765 10 \u4e07\u4e2a\u7c92\u5b50，\u8ba9\u573a\u9762\u66f4\u70b8：<\/p>\n
for (let i = 0; i < 100000; i++) {
\n let radius = Math.random() * 50 + 30; \/\/ \u8ddd\u79bb\u4e2d\u5fc330\u523080\u7684\u73af
\n let angle = Math.random() * Math.PI * 2; \/\/ \u7ed5\u5708\u89d2\u5ea6
\n \/\/ \u73af\u5f62\u5206\u5e03：\u50cf\u571f\u661f\u73af\u4e00\u6837
\n particles.push(new THREE.Vector3(
\n Math.cos(angle) * radius, \/\/ X\u5750\u6807
\n (Math.random() * 2 – 1) * 10, \/\/ Y\u5750\u6807：\u4e0a\u4e0b\u6d6e\u52a8
\n Math.sin(angle) * radius \/\/ Z\u5750\u6807
\n ));
\n speeds.push(Math.random() * 0.8 + 0.2);
\n setDirection();
\n} <\/p>\n
\u5410\u69fd：\u8fd9\u6279\u7c92\u5b50\u662f \u201c\u5916\u56f4\u89c2\u4f17\u201d，\u7ad9\u5728\u8fdc\u5904\u5f53\u80cc\u666f\u3002\u7528\u6781\u5750\u6807\u7b97\u4f4d\u7f6e（cos\u548csin），\u6bd4\u76f4\u63a5\u7528 XYZ \u7b80\u5355 \u2014\u2014 \u5c31\u50cf\u7b97\u5706\u5f62\u5e7f\u573a\u4e0a\u7684\u5ea7\u4f4d，\u7528\u89d2\u5ea6\u6bd4\u7528\u6a2a\u7eb5\u5750\u6807\u65b9\u4fbf\u3002<\/p>\n
\u7c92\u5b50\u5149\u6709\u4f4d\u7f6e\u8fd8\u4e0d\u884c，\u5f97\u6709\u989c\u8272\u548c\u9020\u578b：<\/p>\n
\/\/ \u628a\u7c92\u5b50\u5750\u6807\u88c5\u8fdb\u201c\u51e0\u4f55\u4f53\u201d（\u76f8\u5f53\u4e8e\u7ed9\u6f14\u5458\u5b9a\u7ad9\u4f4d）
\nlet geometry = new THREE.BufferGeometry().setFromPoints(particles);
\n\/\/ \u7ed9\u6bcf\u4e2a\u7c92\u5b50\u8d34\u201c\u5927\u5c0f\u6807\u7b7e\u201d\u548c\u201c\u65b9\u5411\u6807\u7b7e\u201d
\ngeometry.setAttribute("speed", new THREE.Float32BufferAttribute(speeds, 1));
\ngeometry.setAttribute("dir", new THREE.Float32BufferAttribute(directions, 4)); <\/p>\n
\/\/ \u7ed9\u7c92\u5b50\u505a\u201c\u8863\u670d\u201d（\u6750\u8d28）
\nlet material = new THREE.PointsMaterial({
\n size: 0.3, \/\/ \u57fa\u7840\u5927\u5c0f
\n transparent: true, \/\/ \u5141\u8bb8\u900f\u660e（\u624d\u6709\u6e10\u53d8\u6548\u679c）
\n blending: THREE.AdditiveBlending, \/\/ \u53e0\u52a0\u53d1\u5149（\u50cf\u9713\u8679\u706f）
\n onBeforeCompile: (shader) => { \/\/ \u81ea\u5b9a\u4e49\u201c\u9020\u578b\u5e08\u201d（\u7740\u8272\u5668）
\n shader.uniforms.time = globalData.time; \/\/ \u7ed9\u9020\u578b\u5e08\u770b\u65f6\u95f4
\n \/\/ \u9876\u70b9\u7740\u8272\u5668：\u63a7\u5236\u7c92\u5b50\u8fd0\u52a8\u548c\u5927\u5c0f
\n shader.vertexShader = `
\n uniform float time;
\n attribute float speed;
\n attribute vec4 dir;
\n varying vec3 vColor;
\n ${shader.vertexShader}
\n `.replace(`gl_PointSize = size;`, `gl_PointSize = size * speed;`) \/\/ \u5927\u5c0f\u4e58\u901f\u5ea6（\u5feb\u7684\u7c92\u5b50\u66f4\u5927）
\n .replace(`#include <begin_vertex>`, `
\n #include <begin_vertex>
\n \/\/ \u6309\u65b9\u5411\u79fb\u52a8：\u65f6\u95f4\u8d8a\u4e45，\u8d70\u5f97\u8d8a\u8fdc
\n transformed += vec3(dir.x, dir.y, dir.z) * dir.w * time;
\n `)
\n .replace(`#include <color_vertex>`, `
\n #include <color_vertex>
\n \/\/ \u989c\u8272\u6e10\u53d8：\u4ece\u7ea2\u5230\u7d2b
\n float hue = mod(time * 0.1 + gl_Position.x * 0.01, 1.0);
\n vColor = hsl2rgb(hue, 0.8, 0.5); \/\/ HSL\u8f6cRGB（\u65b9\u4fbf\u8c03\u989c\u8272）
\n `); <\/p>\n
\/\/ \u7247\u5143\u7740\u8272\u5668：\u63a7\u5236\u7c92\u5b50\u8fb9\u7f18\u6e10\u53d8
\n shader.fragmentShader = `
\n varying vec3 vColor;
\n ${shader.fragmentShader}
\n `.replace(`vec4 diffuseColor = vec4( diffuse, opacity );`, `
\n \/\/ \u4e2d\u5fc3\u4eae，\u8fb9\u7f18\u6697（\u50cf\u5149\u6591）
\n float distance = length(gl_PointCoord – 0.5);
\n vec4 diffuseColor = vec4(vColor, smoothstep(0.5, 0.1, distance));
\n `); <\/p>\n
\/\/ \u52a0\u4e2aHSL\u8f6cRGB\u7684\u5de5\u5177\u51fd\u6570（\u7740\u8272\u5668\u91cc\u6ca1\u6709\u81ea\u5e26）
\n shader.fragmentShader = `
\n vec3 hsl2rgb(float h, float s, float l) {
\n vec3 rgb = clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) – 3.0) – 1.0, 0.0, 1.0);
\n return l + s * (rgb – 0.5) * (1.0 – abs(2.0 * l – 1.0));
\n }
\n ${shader.fragmentShader}
\n `;
\n }
\n}); <\/p>\n
\u5410\u69fd：\u8fd9\u90e8\u5206\u662f \u201c\u6838\u5fc3\u9b54\u6cd5\u201d！\u7740\u8272\u5668\u5c31\u50cf\u7ed9\u7c92\u5b50 \u201c\u5b9a\u5236\u52a8\u4f5c\u548c\u5986\u5bb9\u201d\u2014\u2014 \u8ba9\u5feb\u7684\u7c92\u5b50\u66f4\u5927，\u989c\u8272\u968f\u65f6\u95f4\u53d8\u8272，\u8fb9\u7f18\u6a21\u7cca\u50cf\u5149\u6591\u3002hsl2rgb\u662f\u4e2a\u5c0f\u6280\u5de7，\u7528 HSL \u8c03\u989c\u8272\u6bd4 RGB \u65b9\u4fbf\u591a\u4e86，\u968f\u4fbf\u6539\u4e2a hue \u503c\u5c31\u80fd\u6362\u6574\u5957\u8272\u7cfb\u3002<\/p>\n
\u628a\u7a7f\u597d\u8863\u670d\u7684\u7c92\u5b50\u4eec\u8bf7\u4e0a\u821e\u53f0：<\/p>\n
let particleSystem = new THREE.Points(geometry, material); \/\/ \u7ec4\u5408\u6210\u201c\u7c92\u5b50\u7fa4\u201d
\nscene.add(particleSystem); \/\/ \u4e0a\u53f0！ <\/p>\n
\u5410\u69fd：Points\u5c31\u50cf \u201c\u7fa4\u6f14\u603b\u7ba1\u201d，\u628a\u6240\u6709\u7c92\u5b50\u6253\u5305\u6210\u4e00\u4e2a\u5bf9\u8c61，\u65b9\u4fbf\u7edf\u4e00\u63a7\u5236\u3002\u52a0\u8fdb\u573a\u666f\u540e，\u5b83\u4eec\u5c31\u7b97\u6b63\u5f0f \u201c\u767b\u573a\u201d \u4e86\u3002<\/p>\n
\u8ba9\u7c92\u5b50\u4eec\u52a8\u8d77\u6765，\u6c38\u4e0d\u505c\u6b47：<\/p>\n
let clock = new THREE.Clock(); \/\/ \u8ba1\u65f6\u5668
\nrenderer.setAnimationLoop(() => {
\n controls.update(); \/\/ \u5237\u65b0\u63a7\u5236\u5668（\u963b\u5c3c\u6548\u679c\u9700\u8981）
\n globalData.time.value = clock.getElapsedTime(); \/\/ \u66f4\u65b0\u5168\u5c40\u65f6\u95f4
\n particleSystem.rotation.y = clock.getElapsedTime() * 0.05; \/\/ \u6574\u4f53\u6162\u6162\u65cb\u8f6c
\n renderer.render(scene, camera); \/\/ \u6bcf\u5e27\u62cd\u4e00\u5f20\u7167\u7247
\n}); <\/p>\n
\u5410\u69fd：setAnimationLoop\u662f \u201c\u5bfc\u6f14\u558a Action\u201d，\u8ba9\u6d4f\u89c8\u5668\u6bcf\u5e27\u90fd\u5237\u65b0\u753b\u9762\u3002\u6574\u4f53\u65cb\u8f6c\u662f\u4e2a\u5c0f\u5fc3\u673a，\u5c31\u7b97\u89c2\u4f17\u4e0d\u52a8\u9f20\u6807，\u4e5f\u80fd\u770b\u5230\u4e0d\u540c\u89d2\u5ea6\u7684\u6548\u679c\u3002<\/p>\n
<!DOCTYPE html>
\n<html lang="en">
\n<head>
\n <meta charset="UTF-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1.0">
\n <title>\u9713\u8679\u5f39\u5e55\u96e8<\/title>
\n <style> body { margin: 0; overflow: hidden; } <\/style>
\n<\/head>
\n<body>
\n <script type="module">
\n import * as THREE from "https:\/\/cdn.skypack.dev\/three@0.136.0";
\n import { OrbitControls } from "https:\/\/cdn.skypack.dev\/three@0.136.0\/examples\/jsm\/controls\/OrbitControls";
\n console.clear(); <\/p>\n
\/\/ 1. \u821e\u53f0\u548c\u76f8\u673a
\n let scene = new THREE.Scene();
\n scene.background = new THREE.Color(0x000000);
\n let camera = new THREE.PerspectiveCamera(75, innerWidth \/ innerHeight, 0.1, 1000);
\n camera.position.set(0, 5, 30); <\/p>\n
\/\/ 2. \u6e32\u67d3\u5668
\n let renderer = new THREE.WebGLRenderer({ antialias: true });
\n renderer.setSize(innerWidth, innerHeight);
\n document.body.appendChild(renderer.domElement); <\/p>\n
\/\/ 3. \u7a97\u53e3\u9002\u914d
\n window.addEventListener("resize", () => {
\n camera.aspect = innerWidth \/ innerHeight;
\n camera.updateProjectionMatrix();
\n renderer.setSize(innerWidth, innerHeight);
\n }); <\/p>\n
\/\/ 4. \u63a7\u5236\u5668
\n let controls = new OrbitControls(camera, renderer.domElement);
\n controls.enableDamping = true; <\/p>\n
\/\/ 5. \u7c92\u5b50\u6570\u636e
\n let globalData = { time: { value: 0 } };
\n let speeds = [];
\n let directions = [];
\n let setDirection = () => {
\n directions.push(
\n Math.random() * 2 – 1,
\n Math.random() * 2 – 1,
\n Math.random() * 2 – 1,
\n Math.random() * 3 + 1
\n );
\n }; <\/p>\n
\/\/ 6. \u751f\u6210\u7c92\u5b50
\n let particles = new Array(50000).fill().map(() => {
\n speeds.push(Math.random() * 0.8 + 0.2);
\n setDirection();
\n return new THREE.Vector3(
\n (Math.random() * 2 – 1) * 20,
\n (Math.random() * 2 – 1) * 20,
\n (Math.random() * 2 – 1) * 20
\n );
\n }); <\/p>\n
\/\/ 7. \u8865\u5145\u7c92\u5b50
\n for (let i = 0; i < 100000; i++) {
\n let radius = Math.random() * 50 + 30;
\n let angle = Math.random() * Math.PI * 2;
\n particles.push(new THREE.Vector3(
\n Math.cos(angle) * radius,
\n (Math.random() * 2 – 1) * 10,
\n Math.sin(angle) * radius
\n ));
\n speeds.push(Math.random() * 0.8 + 0.2);
\n setDirection();
\n } <\/p>\n
\/\/ 8. \u51e0\u4f55\u4f53\u548c\u6750\u8d28
\n let geometry = new THREE.BufferGeometry().setFromPoints(particles);
\n geometry.setAttribute("speed", new THREE.Float32BufferAttribute(speeds, 1));
\n geometry.setAttribute("dir", new THREE.Float32BufferAttribute(directions, 4)); <\/p>\n
\/\/ HSL\u8f6cRGB\u7684\u5de5\u5177\u51fd\u6570，\u5c06\u5728\u7740\u8272\u5668\u4e2d\u4f7f\u7528
\n const hsl2rgbFunction = `
\n vec3 hsl2rgb(float h, float s, float l) {
\n vec3 rgb = clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) – 3.0) – 1.0, 0.0, 1.0);
\n return l + s * (rgb – 0.5) * (1.0 – abs(2.0 * l – 1.0));
\n }
\n `;<\/p>\n
let material = new THREE.PointsMaterial({
\n size: 0.3,
\n transparent: true,
\n blending: THREE.AdditiveBlending,
\n onBeforeCompile: (shader) => {
\n shader.uniforms.time = globalData.time;
\n \/\/ \u9876\u70b9\u7740\u8272\u5668：\u63a7\u5236\u7c92\u5b50\u8fd0\u52a8\u548c\u5927\u5c0f，\u73b0\u5728\u5305\u542bhsl2rgb\u51fd\u6570
\n shader.vertexShader = `
\n uniform float time;
\n attribute float speed;
\n attribute vec4 dir;
\n varying vec3 vColor;
\n ${hsl2rgbFunction} \/\/ \u5728\u8fd9\u91cc\u6dfb\u52a0HSL\u8f6cRGB\u51fd\u6570
\n ${shader.vertexShader}
\n `.replace(`gl_PointSize = size;`, `gl_PointSize = size * speed;`)
\n .replace(`#include <begin_vertex>`, `
\n #include <begin_vertex>
\n transformed += vec3(dir.x, dir.y, dir.z) * dir.w * time;
\n `)
\n .replace(`#include <color_vertex>`, `
\n #include <color_vertex>
\n float hue = mod(time * 0.1 + gl_Position.x * 0.01, 1.0);
\n vColor = hsl2rgb(hue, 0.8, 0.5);
\n `); <\/p>\n
\/\/ \u7247\u5143\u7740\u8272\u5668：\u63a7\u5236\u7c92\u5b50\u8fb9\u7f18\u6e10\u53d8
\n shader.fragmentShader = `
\n varying vec3 vColor;
\n ${hsl2rgbFunction} \/\/ \u5728\u8fd9\u91cc\u4e5f\u6dfb\u52a0HSL\u8f6cRGB\u51fd\u6570
\n ${shader.fragmentShader}
\n `.replace(`vec4 diffuseColor = vec4( diffuse, opacity );`, `
\n float distance = length(gl_PointCoord – 0.5);
\n vec4 diffuseColor = vec4(vColor, smoothstep(0.5, 0.1, distance));
\n `);
\n }
\n }); <\/p>\n
\/\/ 9. \u52a0\u5165\u573a\u666f\u5e76\u5faa\u73af
\n let particleSystem = new THREE.Points(geometry, material);
\n scene.add(particleSystem); <\/p>\n
let clock = new THREE.Clock();
\n renderer.setAnimationLoop(() => {
\n controls.update();
\n globalData.time.value = clock.getElapsedTime();
\n particleSystem.rotation.y = clock.getElapsedTime() * 0.05;
\n renderer.render(scene, camera);
\n });
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n
\u5176\u5b9e\u6838\u5fc3\u5c31\u662f：\u7528 Three.js \u642d 3D \u73af\u5883，\u7528\u7740\u8272\u5668\u7ed9\u7c92\u5b50 \u201c\u5b9a\u5236\u9020\u578b\u548c\u52a8\u4f5c\u201d，\u518d\u7528\u52a8\u753b\u5faa\u73af\u8ba9\u5b83\u4eec\u52a8\u8d77\u6765\u3002\u770b\u8d77\u6765\u590d\u6742，\u4f46\u62c6\u6210\u4e00\u6b65\u4e00\u6b65，\u5c31\u50cf\u642d\u79ef\u6728 \u2014\u2014 \u5148\u62fc\u5e95\u5ea7（\u573a\u666f\u76f8\u673a），\u518d\u88c5\u96f6\u4ef6（\u7c92\u5b50），\u6700\u540e\u62e7\u4e0a\u9a6c\u8fbe（\u6e32\u67d3\u5faa\u73af）\u3002<\/p>\n
\u8bd5\u8bd5\u6539\u6539\u4ee3\u7801\u91cc\u7684\u6570\u5b57：\u6bd4\u5982\u628a\u7c92\u5b50\u6570\u91cf\u6539\u6210 10 \u4e07，\u6216\u8005\u628a\u989c\u8272 HSL \u7684\u9971\u548c\u5ea6\u8c03\u4f4e，\u770b\u770b\u4f1a\u53d8\u6210\u5565\u6837\u3002\u6bd5\u7adf JS \u7684\u4e50\u8da3\u5c31\u5728\u4e8e：\u4f60\u6c38\u8fdc\u4e0d\u77e5\u9053\u6539\u4e2a\u6570\u5b57\u80fd\u73a9\u51fa\u4ec0\u4e48\u65b0\u82b1\u6837！<\/p>\n
\u6700\u540e\u8bf4\u4e00\u53e5：\u522b\u518d\u8bf4 JS \u53ea\u80fd\u505a\u8868\u5355\u4e86，\u5b83\u80fd\u5728\u6d4f\u89c8\u5668\u91cc\u7ed9\u4f60\u653e\u4e00\u6574\u665a\u7684\u9713\u8679\u70df\u82b1 \u2014\u2014 \u8fd9\u5c31\u662f\u524d\u7aef\u7684\u6d6a\u6f2b\u554a！<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb133\u6b21\u3002\u672c\u6587\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528JavaScript\u548cThree.js\u5e93\u5728\u6d4f\u89c8\u5668\u4e2d\u521b\u5efa\u70ab\u9177\u76843D\u7c92\u5b50\u6548\u679c\uff0c\u5b9e\u73b0"\u8d5b\u535a\u670b\u514b\u70df\u82b1\u79c0"\u7684\u89c6\u89c9\u6548\u679c\u3002\u4e3b\u8981\u5185\u5bb9\u5305\u62ec\uff1a1\uff09\u5f15\u5165Three.js\u5e93\u642d\u5efa3D\u73af\u5883\uff1b2\uff09\u521b\u5efa\u573a\u666f\u3001\u76f8\u673a\u548c\u6e32\u67d3\u5668\uff1b3\uff09\u751f\u621015\u4e07\u4e2a\u5f69\u8272\u7c92\u5b50\u5e76\u8bbe\u7f6e\u968f\u673a\u8fd0\u52a8\u65b9\u5411\uff1b4\uff09\u901a\u8fc7\u7740\u8272\u5668\u63a7\u5236\u7c92\u5b50\u5927\u5c0f\u3001\u989c\u8272\u548c\u8fd0\u52a8\u8f68\u8ff9\uff1b5\uff09\u6dfb\u52a0\u4ea4\u4e92\u529f\u80fd\u8ba9\u7528\u6237\u53ef\u65cb\u8f6c\u89c6\u89d2\u89c2\u770b\u3002\u6587\u7ae0\u8be6\u7ec6\u8bb2\u89e3\u4e86\u6bcf\u4e2a\u5b9e\u73b0\u6b65\u9aa4\uff0c\u5e76\u63d0\u4f9b\u4e86\u5b8c\u6574\u4ee3\u7801\u793a\u4f8b\u3002\u8fd9\u4e2a\u6848\u4f8b\u5c55\u793a\u4e86JavaScript\u57283D\u56fe\u5f62\u5904\u7406\u65b9\u9762\u7684\u5f3a\u5927\u80fd\u529b\uff0c\u7a81\u7834\u4e86\u4f20\u7edf\u8868\u5355\u9a8c\u8bc1\u7684\u5c40\u9650\uff0c\u4e3a\u524d\u7aef\u5f00\u53d1\u5e26\u6765\u66f4\u591a\u521b\u610f\u53ef\u80fd\u3002<\/p>\n","protected":false},"author":2,"featured_media":54638,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,87,190],"topic":[],"class_list":["post-54639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-javascript","tag-87","tag-190"],"yoast_head":"\n