、制作方法 
1.復(fù)制代碼到Dreamweaver或HBuilder或vscode中
2.點(diǎn)擊運(yùn)行---運(yùn)行到瀏覽器---選擇你要打開的瀏覽器
3.打開后會(huì)出現(xiàn)這個(gè)界面,前四個(gè)是固定音樂,最后一個(gè)是自主選擇的音樂,你可以選擇你電腦上的歌曲,什么歌曲都行(第一次打開可能會(huì)有點(diǎn)慢,稍等片刻即可,選擇音樂的時(shí)候點(diǎn)一下沒反應(yīng)的話多點(diǎn)幾下即可,第一次打開這屬于正常現(xiàn)象)
 
 
4.特別提醒:打開的時(shí)候電腦一定要處于聯(lián)網(wǎng)狀態(tài)
 
三、源代碼
 
- 
- 
- 
- 
- 
- 
- 
- 
- 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
background-color: #161616; 
 
- 
- 
- 
- 
- 
- 
- 
border: 1px solid #c5a880; 
 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
background-color: #161616; 
 
- 
- 
- 
border: 1px solid #c5a880; 
 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
window.console = window.console || function (t) { }; 
 
- 
- 
- 
- 
- 
- 
if (document.location.search.match(/type=embed/gi)) { 
 
- 
window.parent.postMessage("resize", "*"); 
 
- 
- 
- 
- 
- 
- 
- 
- 
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script> 
 
- 
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script> 
 
- 
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script> 
 
- 
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script> 
 
- 
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script> 
 
- 
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script> 
 
- 
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script> 
 
- 
- 
- 
- 
<li class="title">請選擇音樂</li> 
 
- 
- 
<button class="btn" id="btnA" type="button"> 
 
- 
Snowflakes Falling Down by Simon Panrucker 
 
- 
- 
- 
<li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li> 
 
- 
<li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li> 
 
- 
<li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li> 
 
- 
<li class="separator">或者</li> 
 
- 
- 
<input type="file" id="upload" hidden /> 
 
- 
<label for="upload">Upload File</label> 
 
- 
- 
- 
- 
- 
<script id="rendered-js"> 
 
- 
const { PI, sin, cos } = Math; 
 
- 
- 
- 
const map = (value, sMin, sMax, dMin, dMax) => { 
 
- 
return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin); 
 
- 
- 
- 
const range = (n, m = 0) => 
 
- 
- 
- 
- 
- 
const rand = (max, min = 0) => min + Math.random() * (max - min); 
 
- 
const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min)); 
 
- 
const randChoise = arr => arr[randInt(arr.length)]; 
 
- 
const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)]; 
 
- 
- 
let scene, camera, renderer, analyser; 
 
- 
- 
- 
time: { type: "f", value: 0.0 }, 
 
- 
step: { type: "f", value: 0.0 } 
 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
const totalPoints = 4000; 
 
- 
- 
const listener = new THREE.AudioListener(); 
 
- 
- 
const audio = new THREE.Audio(listener); 
 
- 
- 
document.querySelector("input").addEventListener("change", uploadAudio, false); 
 
- 
- 
const buttons = document.querySelectorAll(".btn"); 
 
- 
buttons.forEach((button, index) => 
 
- 
button.addEventListener("click", () => loadAudio(index))); 
 
- 
- 
- 
- 
const overlay = document.getElementById("overlay"); 
 
- 
- 
- 
scene = new THREE.Scene(); 
 
- 
renderer = new THREE.WebGLRenderer({ antialias: true }); 
 
- 
renderer.setPixelRatio(window.devicePixelRatio); 
 
- 
renderer.setSize(window.innerWidth, window.innerHeight); 
 
- 
document.body.appendChild(renderer.domElement); 
 
- 
- 
camera = new THREE.PerspectiveCamera( 
 
- 
- 
window.innerWidth / window.innerHeight, 
 
- 
- 
- 
- 
camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008); 
 
- 
camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715); 
 
- 
- 
const format = renderer.capabilities.isWebGL2 ? 
 
- 
- 
- 
- 
- 
value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format) 
 
- 
- 
- 
- 
addPlane(scene, uniforms, 3000); 
 
- 
addSnow(scene, uniforms); 
 
- 
- 
- 
addTree(scene, uniforms, totalPoints, [20, 0, -20 * i]); 
 
- 
addTree(scene, uniforms, totalPoints, [-20, 0, -20 * i]); 
 
- 
- 
- 
const renderScene = new THREE.RenderPass(scene, camera); 
 
- 
- 
const bloomPass = new THREE.UnrealBloomPass( 
 
- 
new THREE.Vector2(window.innerWidth, window.innerHeight), 
 
- 
- 
- 
- 
- 
bloomPass.threshold = params.bloomThreshold; 
 
- 
bloomPass.strength = params.bloomStrength; 
 
- 
bloomPass.radius = params.bloomRadius; 
 
- 
- 
composer = new THREE.EffectComposer(renderer); 
 
- 
composer.addPass(renderScene); 
 
- 
composer.addPass(bloomPass); 
 
- 
- 
addListners(camera, renderer, composer); 
 
- 
- 
- 
- 
- 
analyser.getFrequencyData(); 
 
- 
uniforms.tAudioData.value.needsUpdate = true; 
 
- 
step = (step + 1) % 1000; 
 
- 
uniforms.time.value = time; 
 
- 
uniforms.step.value = step; 
 
- 
- 
requestAnimationFrame(animate); 
 
- 
- 
- 
- 
document.getElementById("overlay").innerHTML = 
 
- 
'<div class="text-loading">正在下載音樂,請稍等...</div>'; 
 
- 
- 
"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3", 
 
- 
"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3", 
 
- 
"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3", 
 
- 
"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"]; 
 
- 
- 
- 
- 
const loader = new THREE.AudioLoader(); 
 
- 
loader.load(file, function (buffer) { 
 
- 
- 
- 
analyser = new THREE.AudioAnalyser(audio, fftSize); 
 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
function uploadAudio(event) { 
 
- 
document.getElementById("overlay").innerHTML = 
 
- 
'<div class="text-loading">請稍等...</div>'; 
 
- 
const files = event.target.files; 
 
- 
const reader = new FileReader(); 
 
- 
- 
reader.onload = function (file) { 
 
- 
var arrayBuffer = file.target.result; 
 
- 
- 
listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) { 
 
- 
audio.setBuffer(audioBuffer); 
 
- 
- 
analyser = new THREE.AudioAnalyser(audio, fftSize); 
 
- 
- 
- 
- 
- 
reader.readAsArrayBuffer(files[0]); 
 
- 
- 
- 
function addTree(scene, uniforms, totalPoints, treePosition) { 
 
- 
- 
- 
- 
- 
 uniform sampler2D tAudioData; 
 
- 
 float norm(float value, float min, float max ){ 
 
- 
 return (value - min) / (max - min); 
 
- 
- 
 float lerp(float norm, float min, float max){ 
 
- 
 return (max - min) * norm + min; 
 
- 
- 
 float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){ 
 
- 
 return lerp(norm(value, sourceMin, sourceMax), destMin, destMax); 
 
- 
- 
- 
- 
- 
 vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 ); 
 
- 
 float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r; 
 
- 
 float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 ); 
 
- 
 float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0); 
 
- 
 opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0); 
 
- 
 gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z ); 
 
- 
 gl_Position = projectionMatrix * mvPosition; 
 
- 
- 
- 
- 
- 
- 
 uniform sampler2D pointTexture; 
 
- 
- 
 gl_FragColor = vec4( vColor, opacity ); 
 
- 
 gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );  
 
- 
- 
- 
const shaderMaterial = new THREE.ShaderMaterial({ 
 
- 
- 
- 
- 
value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) 
 
- 
- 
- 
- 
- 
- 
- 
blending: THREE.AdditiveBlending, 
 
- 
- 
- 
- 
- 
- 
- 
const geometry = new THREE.BufferGeometry(); 
 
- 
- 
- 
- 
- 
- 
- 
const color = new THREE.Color(); 
 
- 
- 
for (let i = 0; i < totalPoints; i++) { 
 
- 
- 
const y = map(t, 0, 1, -8, 10); 
 
- 
const ang = map(t, 0, 1, 0, 6 * TAU) + TAU / 2 * (i % 2); 
 
- 
const [z, x] = polar(ang, map(t, 0, 1, 5, 0)); 
 
- 
- 
const modifier = map(t, 0, 1, 1, 0); 
 
- 
positions.push(x + rand(-0.3 * modifier, 0.3 * modifier)); 
 
- 
positions.push(y + rand(-0.3 * modifier, 0.3 * modifier)); 
 
- 
positions.push(z + rand(-0.3 * modifier, 0.3 * modifier)); 
 
- 
- 
color.setHSL(map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5); 
 
- 
- 
colors.push(color.r, color.g, color.b); 
 
- 
- 
- 
const mIndex = map(i, 0, totalPoints, 1.0, 0.0); 
 
- 
- 
- 
- 
- 
- 
new THREE.Float32BufferAttribute(positions, 3).setUsage( 
 
- 
THREE.DynamicDrawUsage)); 
 
- 
- 
- 
geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3)); 
 
- 
geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1)); 
 
- 
geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1)); 
 
- 
geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1)); 
 
- 
- 
const tree = new THREE.Points(geometry, shaderMaterial); 
 
- 
- 
const [px, py, pz] = treePosition; 
 
- 
- 
- 
- 
- 
- 
- 
- 
- 
function addSnow(scene, uniforms) { 
 
- 
- 
- 
- 
 attribute float phaseSecondary; 
 
- 
- 
- 
- 
- 
 float norm(float value, float min, float max ){ 
 
- 
 return (value - min) / (max - min); 
 
- 
- 
 float lerp(float norm, float min, float max){ 
 
- 
 return (max - min) * norm + min; 
 
- 
- 
 float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){ 
 
- 
 return lerp(norm(value, sourceMin, sourceMax), destMin, destMax); 
 
- 
- 
- 
- 
- 
- 
 p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0); 
 
- 
- 
 p.z += sin(t+phaseSecondary); 
 
- 
 opacity = map(p.z, -150.0, 15.0, 0.0, 1.0); 
 
- 
 vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 ); 
 
- 
 gl_PointSize = size * ( 100.0 / -mvPosition.z ); 
 
- 
 gl_Position = projectionMatrix * mvPosition; 
 
- 
- 
- 
- 
- 
 uniform sampler2D pointTexture; 
 
- 
- 
- 
- 
 gl_FragColor = vec4( vColor, opacity ); 
 
- 
 gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );  
 
- 
- 
- 
function createSnowSet(sprite) { 
 
- 
- 
const shaderMaterial = new THREE.ShaderMaterial({ 
 
- 
- 
- 
- 
value: new THREE.TextureLoader().load(sprite) 
 
- 
- 
- 
- 
- 
- 
- 
blending: THREE.AdditiveBlending, 
 
- 
- 
- 
- 
- 
- 
- 
const geometry = new THREE.BufferGeometry(); 
 
- 
- 
- 
- 
- 
const phaseSecondaries = []; 
 
- 
- 
const color = new THREE.Color(); 
 
- 
- 
for (let i = 0; i < totalPoints; i++) { 
 
- 
const [x, y, z] = [rand(25, -25), 0, rand(15, -150)]; 
 
- 
- 
- 
- 
- 
color.set(randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"])); 
 
- 
- 
colors.push(color.r, color.g, color.b); 
 
- 
- 
phaseSecondaries.push(rand(1000)); 
 
- 
- 
- 
- 
- 
- 
new THREE.Float32BufferAttribute(positions, 3)); 
 
- 
- 
geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3)); 
 
- 
geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1)); 
 
- 
geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1)); 
 
- 
- 
- 
new THREE.Float32BufferAttribute(phaseSecondaries, 1)); 
 
- 
- 
- 
const mesh = new THREE.Points(geometry, shaderMaterial); 
 
- 
- 
- 
- 
- 
"https://assets.codepen.io/3685267/snowflake1.png", 
 
- 
"https://assets.codepen.io/3685267/snowflake2.png", 
 
- 
"https://assets.codepen.io/3685267/snowflake3.png", 
 
- 
"https://assets.codepen.io/3685267/snowflake4.png", 
 
- 
"https://assets.codepen.io/3685267/snowflake5.png"]; 
 
- 
- 
sprites.forEach(sprite => { 
 
- 
- 
- 
- 
- 
function addPlane(scene, uniforms, totalPoints) { 
 
- 
- 
- 
 attribute vec3 customColor; 
 
- 
- 
- 
- 
 vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); 
 
- 
 gl_PointSize = size * ( 300.0 / -mvPosition.z ); 
 
- 
 gl_Position = projectionMatrix * mvPosition; 
 
- 
- 
- 
- 
- 
 uniform sampler2D pointTexture; 
 
- 
- 
- 
 gl_FragColor = vec4( vColor, 1.0 ); 
 
- 
 gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); 
 
- 
- 
- 
const shaderMaterial = new THREE.ShaderMaterial({ 
 
- 
- 
- 
- 
value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) 
 
- 
- 
- 
- 
- 
- 
- 
blending: THREE.AdditiveBlending, 
 
- 
- 
- 
- 
- 
- 
- 
const geometry = new THREE.BufferGeometry(); 
 
- 
- 
- 
- 
- 
const color = new THREE.Color(); 
 
- 
- 
for (let i = 0; i < totalPoints; i++) { 
 
- 
const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)]; 
 
- 
- 
- 
- 
- 
color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"])); 
 
- 
- 
colors.push(color.r, color.g, color.b); 
 
- 
- 
- 
- 
- 
- 
new THREE.Float32BufferAttribute(positions, 3).setUsage( 
 
- 
THREE.DynamicDrawUsage)); 
 
- 
- 
- 
- 
- 
new THREE.Float32BufferAttribute(colors, 3)); 
 
- 
- 
geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1)); 
 
- 
- 
const plane = new THREE.Points(geometry, shaderMaterial); 
 
- 
- 
- 
- 
- 
- 
function addListners(camera, renderer, composer) { 
 
- 
document.addEventListener("keydown", e => { 
 
- 
const { x, y, z } = camera.position; 
 
- 
console.log(`camera.position.set(${x},${y},${z})`); 
 
- 
const { x: a, y: b, z: c } = camera.rotation; 
 
- 
console.log(`camera.rotation.set(${a},${b},${c})`); 
 
- 
- 
- 
- 
- 
- 
const width = window.innerWidth; 
 
- 
const height = window.innerHeight; 
 
- 
- 
camera.aspect = width / height; 
 
- 
camera.updateProjectionMatrix(); 
 
- 
- 
renderer.setSize(width, height); 
 
- 
composer.setSize(width, height); 
 
- 
- 
- 
- 
- 
- 
- 
- 
-