<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\" \/>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
<title>Cool Three.js Page with Stars, Interactions, and Audio<\/title>
<style>
body { margin: 0; overflow: hidden; background-color: black; }
canvas { display: block; }
#info {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-family: Arial, sans-serif;
font-size: 20px;
z-index: 1;
}
audio {
position: fixed;
top: 20px;
right: 20px;
z-index: 10;
width: 300px;
}
<\/style>
<\/head>
<body>
<div id=\"info\">\ud83d\ude80 Three.js Demo with Stars \u2728 + Click\/Audio FX<\/div>
<audio id=\"audio\" src=\"https:\/\/www.soundhelix.com\/examples\/mp3\/SoundHelix-Song-1.mp3\" controls autoplay loop><\/audio>
<!-- \u4f7f\u7528\u517c\u5bb9\u975e\u6a21\u5757\u7248\u672c\u7684three.js\u548cOrbitControls -->
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.140.0\/build\/three.min.js\"><\/script>
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.140.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth \/ window.innerHeight,
0.1,
2000
);
camera.position.z = 100;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
\/\/ \u6ce8\u610f\u8fd9\u91cc\u7528 THREE.OrbitControls\uff08\u65e7\u7248\u5199\u6cd5\uff09
const controls = new THREE.OrbitControls(camera, renderer.domElement);
\/\/ \u7740\u8272\u5668\u6750\u8d28\u4ee3\u7801\uff08glow\u6548\u679c\uff09
const vertexShader = `
varying vec3 vNormal;
void main() {
vNormal = normalize(normalMatrix * normal);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const fragmentShader = `
varying vec3 vNormal;
void main() {
float intensity = pow(0.6 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);
gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0) * intensity;
}
`;
const shaderMaterial = new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
blending: THREE.AdditiveBlending,
side: THREE.FrontSide, \/\/ \u6539\u4e3a FrontSide
transparent: true
});
const geometry = new THREE.IcosahedronGeometry(2, 1);
const glowGroup = new THREE.Group();
for (let i = 0; i < 200; i++) {
const mesh = new THREE.Mesh(geometry, shaderMaterial);
mesh.scale.multiplyScalar(1.5);
mesh.position.set(
(Math.random() - 0.5) * 400,
(Math.random() - 0.5) * 400,
(Math.random() - 0.5) * 400
);
glowGroup.add(mesh);
}
scene.add(glowGroup);
\/\/ \u661f\u7a7a\u80cc\u666f\u7c92\u5b50
const starGeometry = new THREE.BufferGeometry();
const starCount = 5000;
const starVertices = [];
for (let i = 0; i < starCount; i++) {
starVertices.push((Math.random() - 0.5) * 2000);
starVertices.push((Math.random() - 0.5) * 2000);
starVertices.push((Math.random() - 0.5) * 2000);
}
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.7 });
const starField = new THREE.Points(starGeometry, starMaterial);
scene.add(starField);
\/\/ \u706f\u5149
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1);
camera.add(pointLight);
scene.add(camera);
\/\/ \u9f20\u6807\u70b9\u51fb\u7206\u70b8\u6548\u679c
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
window.addEventListener('click', event => {
mouse.x = (event.clientX \/ window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY \/ window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(glowGroup.children);
if (intersects.length > 0) {
const mesh = intersects[0].object;
const explosion = new THREE.Vector3(
(Math.random() - 0.5) * 100,
(Math.random() - 0.5) * 100,
(Math.random() - 0.5) * 100
);
mesh.position.add(explosion);
}
});
\/\/ \u97f3\u9891\u5206\u6790\u5668
const audio = document.getElementById('audio');
const listener = new THREE.AudioListener();
camera.add(listener);
const sound = new THREE.Audio(listener);
const audioLoader = new THREE.AudioLoader();
audioLoader.load(audio.src, buffer => {
sound.setBuffer(buffer);
sound.setLoop(true);
sound.setVolume(0.5);
sound.play();
});
const analyser = new THREE.AudioAnalyser(sound, 32);
function animate() {
requestAnimationFrame(animate);
const data = analyser.getAverageFrequency();
glowGroup.children.forEach((mesh, i) => {
const scale = 1.5 + Math.sin(Date.now() * 0.001 + i) * 0.3 + data \/ 256;
mesh.scale.set(scale, scale, scale);
});
glowGroup.rotation.y += 0.002;
starField.rotation.y += 0.0005;
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth \/ window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
<\/script>
<\/body>
<\/html><\/code><\/pre>\n\n\n\n\u4e00\u3001\u6574\u4f53\u601d\u8def<\/h1>\n\n\n\n\n- \u4f7f\u7528\u975e\u6a21\u5757\u7248 Three.js\uff08r140\uff09\u4e0e\u8001\u5199\u6cd5\u7684
THREE.OrbitControls<\/code>\u3002<\/li>\n\n\n\n- \u573a\u666f\u91cc\u6709\u4e24\u7c7b\u7269\u4f53\uff1a\n
\n- 200 \u4e2a\u201c\u53d1\u5149\u201d\u5c0f\u591a\u9762\u4f53\uff08\u7528\u81ea\u5b9a\u4e49 Shader \u505a\u5230\u7c7b\u4f3c\u8f89\u5149\u7684\u89c6\u89c9\uff09<\/li>\n\n\n\n
- 5000 \u9897
Points<\/code> \u5f62\u5f0f\u7684\u661f\u7a7a\u7c92\u5b50<\/li>\n<\/ol>\n<\/li>\n\n\n\n- \u4ea4\u4e92\uff1a\u70b9\u51fb\u201c\u53d1\u5149\u4f53\u201d\u4f1a\u88ab\u968f\u673a\u201c\u70b8\u5f00\u201d\u79fb\u52a8\u4e00\u4e0b\u3002<\/li>\n\n\n\n
- \u97f3\u9891\uff1a\u52a0\u8f7d\u4e00\u6bb5 MP3\uff0c\u7528
AudioAnalyser<\/code> \u5f97\u5230\u9891\u7387\u5747\u503c\uff0c\u9a71\u52a8 200 \u4e2a\u53d1\u5149\u4f53\u6309\u97f3\u4e50\u8282\u594f\u4f38\u7f29\u3002<\/li>\n\n\n\n- \u52a8\u753b\uff1a\u7fa4\u7ec4\u53ca\u661f\u7a7a\u505a\u7f13\u6162\u81ea\u8f6c\uff0c\u5f62\u6210\u7a7a\u95f4\u6d41\u52a8\u611f\u3002<\/li>\n<\/ul>\n\n\n\n
\u4e8c\u3001HTML\/CSS & \u5e93\u52a0\u8f7d<\/h1>\n\n\n\n\nbody { overflow: hidden; background:black }<\/code> \u5168\u5c4f WebGL \u80cc\u666f\u3002<\/li>\n\n\n\n- \u53f3\u4e0a\u89d2\u662f
<audio><\/code> \u64ad\u653e\u5668\u3002<\/li>\n\n\n\n- \u901a\u8fc7 CDN \u5f15\u5165\uff1a
three@0.140.0\/build\/three.min.js three@0.140.0\/examples\/js\/controls\/OrbitControls.js<\/code> \u8fd9\u4e24\u8005\u5339\u914d\u201c\u65e7\u5f0f\u5168\u5c40 THREE\u201d\u5199\u6cd5\u3002 <\/li>\n<\/ul>\n\n\n\n\u4e09\u3001\u573a\u666f\u57fa\u7840<\/h1>\n\n\n\n\nscene \/ camera \/ renderer<\/code> \u6807\u51c6\u4e09\u4ef6\u5957\uff1a\n\n- \u900f\u89c6\u76f8\u673a FOV 75\uff0c
near=0.1 \/ far=2000<\/code>\uff0cZ=100\u3002<\/li>\n\n\n\n- \u6297\u952f\u9f7f\u6e32\u67d3\u5668\uff0c\u586b\u6ee1\u7a97\u53e3\u3002
-\uff08\u53ef\u4f18\u5316\uff09\u5efa\u8bae\uff1arenderer.setPixelRatio(window.devicePixelRatio)<\/code> \u8ba9\u9ad8 DPI \u66f4\u6e05\u6670\uff08\u6027\u80fd\u5145\u88d5\u65f6\uff09\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n- \u8f68\u9053\u63a7\u5236\u5668\uff1a
const controls = new THREE.OrbitControls(camera, renderer.domElement);<\/code> \u5141\u8bb8\u9f20\u6807\u65cb\u8f6c\/\u7f29\u653e\u89c2\u5bdf\u3002
\u60f3\u8981\u201c\u4e1d\u6ed1\u963b\u5c3c\u201d\uff0c\u53ef\uff1a controls.enableDamping = true; \/\/ \u5e76\u5728\u52a8\u753b\u5faa\u73af\u91cc\u52a0 controls.update();<\/code><\/li>\n<\/ul>\n\n\n\n\u56db\u3001\u81ea\u5b9a\u4e49 Shader\u201c\u53d1\u5149\u4f53\u201d<\/h1>\n\n\n\n\n- \u9876\u70b9\u7740\u8272\u5668\uff1a\u628a\u6cd5\u7ebf\u53d8\u6362\u5230\u89c6\u56fe\u7a7a\u95f4\uff0c\u4f20\u7ed9\u7247\u5143\uff1a
vNormal = normalize(normalMatrix * normal);<\/code><\/li>\n\n\n\n- \u7247\u5143\u7740\u8272\u5668\uff1a\u6839\u636e\u4e0e\u89c6\u7ebf\u65b9\u5411\uff08z \u8f74\uff09\u5939\u89d2\u8ba1\u7b97\u5f3a\u5ea6\uff1a
float intensity = pow(0.6 - dot(vNormal, vec3(0.0,0.0,1.0)), 2.0); gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0) * intensity;<\/code> \u89c6\u89c9\u6548\u679c\uff1a\u9762\u5411\u955c\u5934\u7684\u533a\u57df\u66f4\u4eae<\/strong>\uff0c\u5f62\u6210\u201c\u8fb9\u7f18\u8f89\u5149\/\u81ea\u53d1\u5149\u201d\u7684\u611f\u89c9\u3002<\/li>\n\n\n\n- \u6750\u8d28\u53c2\u6570\uff1a
blending: THREE.AdditiveBlending, side: THREE.FrontSide, transparent: true<\/code> \u4f7f\u7528\u52a0\u8272\u6df7\u5408\u4ee5\u53e0\u52a0\u9ad8\u4eae\u3002
\u6539\u8fdb\u5efa\u8bae<\/strong>\uff1a\u52a0\u8272+\u900f\u660e\u4e00\u822c\u914d depthWrite:false<\/code> \u907f\u514d\u900f\u660e\u6df1\u5ea6\u5199\u5165\u5e26\u6765\u7684\u6392\u5e8f\u4f2a\u5f71\uff1a depthWrite: false<\/code><\/li>\n\n\n\n- \u51e0\u4f55\u4f53\uff1a
IcosahedronGeometry(2, 1)<\/code>\uff08\u4e8c\u5341\u9762\u4f53\u7ec6\u5206\u4e00\u7ea7\uff09\u3002
\u6279\u91cf\u5b9e\u4f8b\uff1a\u521b\u5efa 200 \u4e2a\u7f51\u683c\uff0c\u968f\u673a\u5206\u5e03\u5728 [-200,200]\u00b3\uff08\u56e0\u4e58 400 \u518d\u51cf\u534a\uff09\u3002
\u6027\u80fd\u8bc4\u4f30<\/strong>\uff1a\u6bcf\u4e2a\u7ea6\u767e\u6765\u4e2a\u4e09\u89d2\u5f62\uff0c200 \u4e2a\u5171 ~\u51e0\u4e07\u4e09\u89d2\uff0cWebGL \u8f7b\u677e\u5e94\u4ed8\uff1b\u5171\u4eab\u540c\u4e00\u4e2a ShaderMaterial<\/code>\uff0c\u8282\u7701\u6750\u8d28\u5f00\u9500\u3002
\uff08\u66f4\u8fdb\u4e00\u6b65\uff09\u53ef\u7528 InstancedMesh<\/code> \u628a 200 \u6b21 draw call \u5408\u5e76\u4e3a 1 \u6b21\uff0c\u4f46\u8981\u6539\u4e3a\u5b9e\u4f8b\u5316\u65b9\u6848\u3002<\/li>\n<\/ul>\n\n\n\n\u4e94\u3001\u661f\u7a7a\u7c92\u5b50<\/h1>\n\n\n\n\n- \u7528
BufferGeometry<\/code> + Float32BufferAttribute<\/code> \u5b58 5000 \u4e2a\u968f\u673a\u9876\u70b9\u3002<\/li>\n\n\n\nPointsMaterial({ color: 0xffffff, size: 0.7 })<\/code> \u5f62\u6210\u661f\u70b9\u3002
\uff08\u53ef\u9009\uff09\u53ef\u4ee5\u52a0 sizeAttenuation:true<\/code>\uff08\u9ed8\u8ba4\u5c31\u662f true\uff09\uff0c\u57fa\u4e8e\u900f\u89c6\u7f29\u653e\u66f4\u81ea\u7136\uff1b\u6216\u6539\u7528\u5e26\u7eb9\u7406\u7684\u70b9\u7cbe\u7075\u5b9e\u73b0\u66f4\u201c\u661f\u661f\u201d\u7684\u611f\u89c9\u3002<\/li>\n<\/ul>\n\n\n\n\u516d\u3001\u706f\u5149<\/h1>\n\n\n\n\n- \u6709\u73af\u5883\u5149\u548c\u8ddf\u968f\u76f8\u673a\u7684\u70b9\u5149\uff0c\u4f46\u5f53\u524d\u4e24\u7c7b\u7269\u4f53\u90fd\u201c\u51e0\u4e4e\u4e0d\u5403\u5149\u201d<\/strong>\uff1a\n
\n- ShaderMaterial \u672a\u5f00\u542f
lights<\/code>\uff0c\u7740\u8272\u5b8c\u5168\u81ea\u5b9a\u4e49\uff0c\u4e0d\u53d7\u706f\u5149\u5f71\u54cd\uff1b<\/li>\n\n\n\nPointsMaterial<\/code> \u4e5f\u662f\u201c\u81ea\u53d1\u5149\u8272\u201d\uff0c\u4e0d\u53d7\u706f\u5149\u5f71\u54cd\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n- \u56e0\u6b64\u8fd9\u4e24\u76cf\u706f\u201c\u89c6\u89c9\u8d21\u732e\u22480\u201d\uff0c\u53ef\u7559\u4f5c\u4ee5\u540e\u52a0\u5176\u4ed6\u53d7\u5149\u7269\u4f53\u65f6\u4f7f\u7528\uff0c\u4e5f\u53ef\u4ee5\u5220\u6389\u51cf\u4e00\u70b9\u573a\u666f\u72b6\u6001\u5207\u6362\u3002<\/li>\n<\/ul>\n\n\n\n
\u4e03\u3001\u70b9\u51fb\u201c\u7206\u70b8\u201d\u4ea4\u4e92\uff08Raycaster\uff09<\/h1>\n\n\n\n\n- \u9f20\u6807\u70b9\u51fb \u2192 \u5f52\u4e00\u5316\u8bbe\u5907\u5750\u6807 \u2192
raycaster.setFromCamera()<\/code> \u2192 intersectObjects(glowGroup.children)<\/code>\u3002<\/li>\n\n\n\n- \u82e5\u547d\u4e2d\uff0c\u968f\u673a\u5411\u91cf\u628a\u8be5\u7f51\u683c\u4f4d\u7f6e\u6296\u8d70 50~100 \u5355\u4f4d\u3002
\uff08\u53ef\u9009\uff09\u53ef\u6539\u6210\u7ed9\u5b83\u4e00\u4e2a\u901f\u5ea6<\/strong>\uff0c\u5728 animate<\/code> \u4e2d\u9010\u5e27\u8870\u51cf\uff0c\u6548\u679c\u4f1a\u66f4\u201c\u7269\u7406\u201d\u3002<\/li>\n<\/ul>\n\n\n\n\u516b\u3001\u97f3\u9891\u4e0e\u53ef\u89c6\u5316<\/h1>\n\n\n\n\n- \u9875\u9762\u4e0a\u6709
<audio id=\"audio\" controls autoplay loop><\/code>\uff0c\u540c\u65f6 Three.js \u91cc\u53c8\uff1a\n\n- \u521b\u5efa
AudioListener<\/code> \u5e76\u6302\u76f8\u673a\uff1b<\/li>\n\n\n\n- \u7528
AudioLoader.load(audio.src, ...)<\/code> \u518d\u6b21\u4e0b\u8f7d\u540c\u4e00\u8def\u5f84\u97f3\u9891\uff0c\u585e\u8fdb THREE.Audio<\/code> \u5e76 play()<\/code>\uff1b<\/li>\n\n\n\n- \u7528
AudioAnalyser(sound, 32)<\/code> \u83b7\u53d6\u9891\u57df\u6570\u636e\u5747\u503c getAverageFrequency()<\/code>\uff0c\u9a71\u52a8\u7f29\u653e\u3002<\/li>\n<\/ol>\n<\/li>\n\n\n\n- \u6f5c\u5728\u95ee\u9898\u4e0e\u6539\u8fdb<\/strong>\uff1a\n
\n- \u91cd\u590d\u64ad\u653e\/\u91cd\u590d\u4e0b\u8f7d<\/strong>\uff1a\u9875\u9762
<audio><\/code> \u64ad\u653e\u4e00\u6b21\u3001AudioLoader<\/code> \u53c8\u64ad\u4e00\u6b21\uff0c\u97f3\u9891\u53ef\u80fd\u91cd\u53e0\u3002
\u279c \u9009\u4e00\u79cd\u5373\u53ef\u3002\u6700\u7b80\u65b9\u6848\uff1a\u590d\u7528 <audio><\/code> \u5143\u7d20\u4f5c\u97f3\u6e90<\/strong>\uff1a const sound = new THREE.Audio(listener); sound.setMediaElementSource(audioElement); \/\/ \u76f4\u63a5\u7528 <audio> \u7684\u6d41 const analyser = new THREE.AudioAnalyser(sound, 32);<\/code> \u8fd9\u6837\u4e0d\u518d\u91cd\u590d\u4e0b\u8f7d\uff0c\u64ad\u653e\u5668\u7684\u64ad\u653e\/\u6682\u505c\u4e5f\u76f4\u63a5\u5f71\u54cd\u53ef\u89c6\u5316\u3002<\/li>\n\n\n\n- \u81ea\u52a8\u64ad\u653e\u7b56\u7565<\/strong>\uff1a\u73b0\u4ee3\u6d4f\u89c8\u5668\u901a\u5e38\u7981\u6b62\u5e26\u58f0\u97f3\u7684\u81ea\u52a8\u64ad\u653e<\/strong>\u3002\n
\n- \u4f60\u867d\u7136\u5199\u4e86
autoplay<\/code> \u548c sound.play()<\/code>\uff0c\u4f46\u5f80\u5f80\u4f1a\u88ab\u62e6\u4e0b\uff0c\u9664\u975e\u7528\u6237\u5148\u6709\u624b\u52bf\uff08\u70b9\u51fb\u7b49\uff09\u3002<\/li>\n\n\n\n- \u517c\u5bb9\u505a\u6cd5\uff1a\u5728\u7b2c\u4e00\u6b21
pointerdown\/click<\/code> \u65f6\u6267\u884c\uff1a const ac = listener.context; if (ac.state === 'suspended') ac.resume(); audioElement.play().catch(()=>{ \/* \u663e\u793a\u63d0\u793a\u6216\u5ffd\u7565 *\/ });<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n- \u8de8\u57df (CORS)<\/strong>\uff1a\u82e5\u7528
AudioLoader<\/code> \u52a0\u8fdc\u7a0b MP3\uff0c\u9700\u8981\u670d\u52a1\u5668\u54cd\u5e94 Access-Control-Allow-Origin:*<\/code>\uff0c\u5426\u5219 WebAudio \u53ef\u80fd\u62ff\u4e0d\u5230\u9891\u8c31\u6570\u636e\u3002\n\n- \u590d\u7528
<audio crossorigin=\"anonymous\"><\/code> + setMediaElementSource<\/code> \u53ef\u4ee5\u66f4\u7a33\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n- FFT \u5206\u8fa8\u7387<\/strong>\uff1a
new THREE.AudioAnalyser(sound, 32)<\/code> \u9891\u6bb5\u8f83\u5c11\uff0c\u53d8\u5316\u8f83\u201c\u949d\u201d\u3002\n\n- \u60f3\u8981\u66f4\u4e30\u5bcc\u7684\u5f8b\u52a8\uff0c\u53ef\u7528 128\/256\uff0c\u518d\u7528
getFrequencyData()<\/code> \u505a\u66f4\u7ec6\u7c92\u5ea6\u7684\u9a71\u52a8\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n\n\n\n- \u52a8\u753b\u91cc\u7528\uff1a
const data = analyser.getAverageFrequency(); \/\/ 0~255 const scale = 1.5 + Math.sin(time + i) * 0.3 + data \/ 256;<\/code> \u53e0\u52a0\u4e86\u201c\u4e2a\u4f53\u76f8\u4f4d\u5dee\u7684\u6b63\u5f26\u6446\u52a8 + \u97f3\u91cf\u9879\u201d\uff0c\u65e2\u4fdd\u7559\u7fa4\u4f53\u547c\u5438\u611f\u53c8\u968f\u97f3\u4e50\u8d77\u4f0f\u3002<\/li>\n<\/ul>\n\n\n\n\u4e5d\u3001\u52a8\u753b\u5faa\u73af\u4e0e\u7a97\u53e3\u81ea\u9002\u5e94<\/h1>\n\n\n\n\nrequestAnimationFrame(animate)<\/code> \u9a71\u52a8\u6e32\u67d3\uff1b\u7fa4\u7ec4\u4e0e\u661f\u7a7a\u5404\u81ea\u7f13\u6162\u81ea\u8f6c\u3002<\/li>\n\n\n\n- \u76d1\u542c
resize<\/code> \u66f4\u65b0\u76f8\u673a\u6295\u5f71\u4e0e\u6e32\u67d3\u5c3a\u5bf8\uff0c\u5c5e\u4e8e\u6807\u51c6\u5199\u6cd5\u3002
\uff08\u53ef\u4f18\u5316\uff09\u628a const t = performance.now()*0.001;<\/code> \u653e\u5faa\u73af\u5f00\u5934\uff0c\u5c11\u505a\u4e00\u6b21 Date.now()<\/code>\uff1b
\u82e5\u542f\u7528 enableDamping<\/code>\uff0c\u8bb0\u5f97\u6bcf\u5e27 controls.update()<\/code>\u3002<\/li>\n<\/ul>\n\n\n\n\u5341\u3001\u6570\u503c\u4e0e\u89c6\u89c9\u5c0f\u5efa\u8bae<\/h1>\n\n\n\n\n- Shader \u91cc\u8fd9\u53e5\uff1a
float intensity = pow(0.6 - dot(vNormal, vec3(0,0,1)), 2.0);<\/code> \u5f53 dot(...) > 0.6<\/code> \u65f6\u5e95\u6570\u4e3a\u8d1f\uff0c\u6307\u6570\u662f 2.0\uff08\u6574\u6570\uff09\uff0c\u5728 GLSL \u91cc\u901a\u5e38\u4ecd\u80fd\u5f97\u5230\u6b63\u503c\uff0c\u4f46\u4e0d\u540c\u5e73\u53f0\u7cbe\u5ea6\u53ef\u80fd\u4e0d\u4e00\u81f4\u3002
\u66f4\u7a33<\/strong>\uff1a\u5939\u53d6\u5230\u975e\u8d1f\u533a\u95f4\uff1a float intensity = pow(max(0.0, 0.6 - dot(vNormal, vec3(0,0,1))), 2.0);<\/code><\/li>\n\n\n\n- \u900f\u660e\u52a0\u8272\u6750\u8d28\u5efa\u8bae\uff1a
const shaderMaterial = new THREE.ShaderMaterial({ vertexShader, fragmentShader, blending: THREE.AdditiveBlending, transparent: true, side: THREE.FrontSide, depthWrite: false \/\/ \u2605 \u63a8\u8350 });<\/code><\/li>\n\n\n\n- \u753b\u8d28\/\u6027\u80fd\u5f00\u5173\uff1a
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));<\/code> \u5728 4K \u5c4f\u4e0a\u80fd\u907f\u514d\u8fc7\u9ad8\u50cf\u7d20\u8d1f\u62c5\u3002<\/li>\n<\/ul>\n\n\n\n\u5341\u4e00\u3001\u4e00\u6b65\u5230\u4f4d\u7684\u97f3\u9891\u6539\u9020\u793a\u4f8b\uff08\u53ef\u76f4\u63a5\u66ff\u6362\u4f60\u539f\u6765\u7684\u97f3\u9891\u6bb5\uff09<\/h1>\n\n\n\n\n\u76ee\u7684\uff1a\u4e0d\u91cd\u590d\u4e0b\u8f7d\uff0c\u4e0d\u89e6\u53d1\u81ea\u52a8\u64ad\u653e\u62e6\u622a\u65f6\u7684\u9ed1\u5c4f\u201c\u65e0\u54cd\u5e94\u201d\uff0c\u5e76\u8ba9\u9891\u8c31\u4e0e\u64ad\u653e\u5668\u540c\u6b65\u3002<\/p>\n<\/blockquote>\n\n\n\n
<audio id=\"audio\" crossorigin=\"anonymous\"\n src=\"https:\/\/www.soundhelix.com\/examples\/mp3\/SoundHelix-Song-1.mp3\"\n controls loop><\/audio>\n<\/code><\/pre>\n\n\n\n\/\/ \u97f3\u9891\uff08\u66ff\u6362\u539f\u6709 AudioLoader \u90e8\u5206\uff09\nconst audioEl = document.getElementById('audio');\nconst listener = new THREE.AudioListener();\ncamera.add(listener);\n\nconst sound = new THREE.Audio(listener);\nsound.setMediaElementSource(audioEl); \/\/ \u76f4\u63a5\u590d\u7528 <audio> \u5143\u7d20\nconst analyser = new THREE.AudioAnalyser(sound, 128);\n\n\/\/ \u89e3\u51b3\u81ea\u52a8\u64ad\u653e\u9650\u5236\uff1a\u7528\u6237\u9996\u6b21\u70b9\u51fb\u9875\u9762\u65f6\u6062\u590d AudioContext \u5e76\u5c1d\u8bd5\u64ad\u653e\nlet audioInit = false;\nfunction initAudioOnce() {\n if (audioInit) return;\n audioInit = true;\n const ctx = listener.context;\n if (ctx.state === 'suspended') ctx.resume();\n audioEl.play().catch(() => {\/* \u53ef\u4ee5\u63d0\u793a\u201c\u8bf7\u70b9\u51fb\u64ad\u653e\u201d *\/});\n}\nwindow.addEventListener('pointerdown', initAudioOnce, { once: true });\n<\/code><\/pre>\n\n\n\n\u4f60\u53ef\u4ee5\u76f4\u63a5\u7528\u590d\u5236\u5f00\u5934\u7684\u4ee3\u7801\u5230\u8bb0\u4e8b\u672c\u5e76\u53e6\u5b58\u4e3a.html\u683c\u5f0f\u7136\u540e\u5728\u6d4f\u89c8\u5668\u91cc\u8dd1\uff0c\u5b9e\u73b0\u6548\u679c\uff1a<\/p>\n\n\n\n![](\"http:\/\/101.42.96.217:21080\/wp-content\/uploads\/2025\/08\/image-24-1024x669.png\")
![](\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%20669%22%3E%3C%2Fsvg%3E\")