前言
圣诞节不远了，这这里小编给友友们分享一个美丽的圣诞树 ，在漆黑的夜里 ，圣诞树闪着明亮的光 ，雪花飞舞，一个浪漫又美丽的夜晚。
圣诞树介绍
在欧美和其他信奉基督教的国家和地区，有一个比新年还重要的节日，那就是圣诞节。什么是圣诞节的标志？除了红衣白胡子的圣诞老公公，恐怕就是挂满星星、彩灯和礼物的圣诞树了。
虽说都叫圣诞树，可它们的形象差别还挺大的：有的像松树，有的像柏树，还有的干脆就是个抽象的圆锥体。正宗的「圣诞树」究竟长啥样？圣诞植物都有哪些？圣诞花环上的植物跟耶稣之间又有什么关系呢？
在我国，圣诞节虽然不是重要的节日，但基督教其实也深刻地影响了我们的生活，比如，今年之所以被定为公元 2014 年，是因为耶稣降生的那一年为公元元年。所以，我们有必要了解一下圣诞节的故事习俗。
下面就让我们说说那些和圣诞节有关的节庆植物吧。
圣诞树最先出现在哪里
圣诞树是在耶稣诞生 1500 多年后才出现在圣诞节场景中的，和耶稣本人并没有什么关系。传说，圣诞树最先出现在德国，大约在 16 世纪，德国人把长青的松柏枝拿到屋中摆设，用于烘托节日气氛，并称其为圣诞树。后来，德国人马丁·路德把蜡烛放在树林中的枞树枝上，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。在爱迪生发明电灯之后，枞树上的蜡烛逐渐变成了粉色的小灯泡，直至换成今天的 LED 小灯。整棵圣诞树也主要陈列于室内，树上的挂件变成铃铛、雪花、小礼物还有彩灯。
马丁·路德放置蜡烛的枞树，在植物分类学中对应的是松科冷杉属植物。安徒生童话中有一篇《枞树》，写的是枞树被打扮成圣诞树的故事。枞树就是冷杉属植物的另一个名称，它们是针叶常绿乔木，在我国东北、滇藏、新疆以及闽浙、台湾山区也有分布，如西藏冷杉、秦岭冷杉、百山祖冷杉，等等。
在欧洲、北美以及俄罗斯等地区，人们经常使用的圣诞树种类有银枞、香脂冷杉、南方香脂冷杉、大冷杉、紫果冷杉、高加索冷杉、壮丽冷杉，等等。
除了冷杉属树木，云杉属树木也是常用的圣诞树树种，其中包括挪威云杉、塞尔维亚云杉、科罗拉多云杉、白云杉。
冷杉属及云杉属树木之所以成为天然的圣诞树首选树种，皆因为它们的针形叶干燥以后不易脱落，颜色和气味也不错。不过，冷杉属和云杉属树木多分布于偏远深山区，不便采挖和运输，所以，多数情况下，圣诞树还是以松科的松树最为常见，如欧洲赤松、苏格兰松、石松、维吉尼亚松、美国五针松、白松、耶路撒冷松、日本黑松、火炬松等。
此外，也有用柏科植物当作圣诞树的，如利兰柏、穆雷柏、美国红刺柏等。
黄杉已从美国西南被引种到世界多地，雪松是世界着名的园林景观树种之一，它们也是被选用较多的圣诞树。诺福克岛松，即南洋杉，更是经常被栽植于室内的绿植，作为圣诞树就更方便了。世界上最漂亮的圣诞树莫过于红豆杉科植物了，红红的杯状假种皮本身就是最好的装饰，像东北红豆杉等，在我国的花木市场也都有销售。
介绍了这么多，我们发现，上述所有圣诞树都属于裸子植物，泛称针叶树。裸子植物，顾名思义，就是种子裸露，没有被果皮包被，这比被子植物，即有花植物（树木中的阔叶树）的种子由果皮包被，在结构上要原始。裸子植物现存种类数量远远少于被子植物。不过，针叶树的种类虽少，却占据了地球森林面积的大部分，整个北半球北部寒冷区域以及其他地区的高海拔区域，几乎都被针叶树森林统治。
至于人们为什么喜欢用常绿针叶树做成圣诞树，是因为它们象征着生命长存，即使在严冬，也依然翠绿（针状叶形以及针叶外面的蜡质帮助它们躲过冬季的寒冷和干旱的侵袭）。而且，裸子植物中的松、柏、杉等植物的分枝一般都是单轴分枝类型。单轴分枝的树木，从幼苗形成开始，由顶芽形成直立的主茎，腋芽形成向侧方生长的侧枝，位置越高的侧枝生长时间越短。正是由于单轴分枝的缘故，通常情况下，这些树木都会长成圆锥状的树型，对悬挂和装饰圣诞礼物非常有利。另外，圣诞树都是选用 10 多年生的小树，并不会选择成长了几十年或上百年的「参天大树」。
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Musical Christmas Lights</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> * { box-sizing: border-box; } body { margin: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #161616; color: #c5a880; font-family: sans-serif; } label { display: inline-block; background-color: #161616; padding: 16px; border-radius: 0.3rem; cursor: pointer; margin-top: 1rem; width: 300px; border-radius: 10px; border: 1px solid #c5a880; text-align: center; } ul { list-style-type: none; padding: 0; margin: 0; } .btn { background-color: #161616; border-radius: 10px; color: #c5a880; border: 1px solid #c5a880; padding: 16px; width: 300px; margin-bottom: 16px; line-height: 1.5; cursor: pointer; } .separator { font-weight: bold; text-align: center; width: 300px; margin: 16px 0px; color: #a07676; } .title { color: #a07676; font-weight: bold; font-size: 1.25rem; margin-bottom: 16px; } .text-loading { font-size: 2rem; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <script src="./three.js-master/build/three.min.js"></script> <script src="./three.js-master/examples/js/postprocessing/EffectComposer.js"></script> <script src="./three.js-master/examples/js/postprocessing/RenderPass.js"></script> <script src="./three.js-master/examples/js/postprocessing/ShaderPass.js"></script> <script src="./three.js-master/examples/js/shaders/CopyShader.js"></script> <script src="./three.js-master/examples/js/shaders/LuminosityHighPassShader.js"></script> <script src="./three.js-master/examples/js/postprocessing/UnrealBloomPass.js"></script> <div id="overlay"> <ul> <li> <input type="file" id="upload" hidden /> <label for="upload">选择音乐</label> </li> </ul> </div> <script id="rendered-js"> // const THREE = '' const { PI, sin, cos } = Math; const TAU = 2 * PI; const map = (value, sMin, sMax, dMin, dMax) => { return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin); }; const range = (n, m = 0) => Array(n). fill(m). map((i, j) => i + j); 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; let step = 0; const uniforms = { time: { type: "f", value: 0.0 }, step: { type: "f", value: 0.0 } }; const params = { exposure: 1, bloomStrength: 0.9, bloomThreshold: 0, bloomRadius: 0.5 }; let composer; const fftSize = 2048; 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))); function init() { const overlay = document.getElementById("overlay"); overlay.remove(); 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( 60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008); camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715); const format = renderer.capabilities.isWebGL2 ? THREE.RedFormat : THREE.LuminanceFormat; uniforms.tAudioData = { value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format) }; addPlane(scene, uniforms, 3000); addSnow(scene, uniforms); range(10).map(i => { 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), 1.5, 0.4, 0.85); 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); animate(); } function animate(time) { analyser.getFrequencyData(); uniforms.tAudioData.value.needsUpdate = true; step = (step + 1) % 1000; uniforms.time.value = time; uniforms.step.value = step; composer.render(); requestAnimationFrame(animate); } function loadAudio(i) { document.getElementById("overlay").innerHTML = '<div class="text-loading">正在下载音乐，请稍等...</div>'; const files = [ "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 file = files[i]; const loader = new THREE.AudioLoader(); loader.load(file, function(buffer) { audio.setBuffer(buffer); audio.play(); analyser = new THREE.AudioAnalyser(audio, fftSize); init(); }); } 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); audio.play(); analyser = new THREE.AudioAnalyser(audio, fftSize); init(); }); }; reader.readAsArrayBuffer(files[0]); } function addTree(scene, uniforms, totalPoints, treePosition) { const vertexShader = ` attribute float mIndex; varying vec3 vColor; varying float opacity; 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); } void main() { vColor = color; vec3 p = position; 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; } `; const fragmentShader = ` varying vec3 vColor; varying float opacity; uniform sampler2D pointTexture; void main() { gl_FragColor = vec4( vColor, opacity ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } `; const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { ...uniforms, pointTexture: { value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } }, vertexShader, fragmentShader, blending: THREE.AdditiveBlending, depthTest: false, transparent: true, vertexColors: true }); const geometry = new THREE.BufferGeometry(); const positions = []; const colors = []; const sizes = []; const phases = []; const mIndexs = []; const color = new THREE.Color(); for (let i = 0; i < totalPoints; i++) { const t = Math.random(); 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); phases.push(rand(1000)); sizes.push(1); const mIndex = map(i, 0, totalPoints, 1.0, 0.0); mIndexs.push(mIndex); } geometry.setAttribute( "position", 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; tree.position.x = px; tree.position.y = py; tree.position.z = pz; scene.add(tree); } function addSnow(scene, uniforms) { const vertexShader = ` attribute float size; attribute float phase; attribute float phaseSecondary; varying vec3 vColor; varying float opacity; uniform float time; uniform float step; 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); } void main() { float t = time* 0.0006; vColor = color; vec3 p = position; p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0); p.x += sin(t+phase); 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; } `; const fragmentShader = ` uniform sampler2D pointTexture; varying vec3 vColor; varying float opacity; void main() { gl_FragColor = vec4( vColor, opacity ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } `; function createSnowSet(sprite) { const totalPoints = 300; const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { ...uniforms, pointTexture: { value: new THREE.TextureLoader().load(sprite) } }, vertexShader, fragmentShader, blending: THREE.AdditiveBlending, depthTest: false, transparent: true, vertexColors: true }); const geometry = new THREE.BufferGeometry(); const positions = []; const colors = []; const sizes = []; const phases = []; 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)]; positions.push(x); positions.push(y); positions.push(z); color.set(randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"])); colors.push(color.r, color.g, color.b); phases.push(rand(1000)); phaseSecondaries.push(rand(1000)); sizes.push(rand(4, 2)); } geometry.setAttribute( "position", 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)); geometry.setAttribute( "phaseSecondary", new THREE.Float32BufferAttribute(phaseSecondaries, 1)); const mesh = new THREE.Points(geometry, shaderMaterial); scene.add(mesh); } const sprites = [ "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 => { createSnowSet(sprite); }); } function addPlane(scene, uniforms, totalPoints) { const vertexShader = ` attribute float size; attribute vec3 customColor; varying vec3 vColor; void main() { vColor = customColor; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_PointSize = size * ( 300.0 / -mvPosition.z ); gl_Position = projectionMatrix * mvPosition; } `; const fragmentShader = ` uniform vec3 color; uniform sampler2D pointTexture; varying vec3 vColor; void main() { gl_FragColor = vec4( vColor, 1.0 ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } `; const shaderMaterial = new THREE.ShaderMaterial({ uniforms: { ...uniforms, pointTexture: { value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } }, vertexShader, fragmentShader, blending: THREE.AdditiveBlending, depthTest: false, transparent: true, vertexColors: true }); const geometry = new THREE.BufferGeometry(); const positions = []; const colors = []; const sizes = []; const color = new THREE.Color(); for (let i = 0; i < totalPoints; i++) { const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)]; positions.push(x); positions.push(y); positions.push(z); color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"])); colors.push(color.r, color.g, color.b); sizes.push(1); } geometry.setAttribute( "position", new THREE.Float32BufferAttribute(positions, 3).setUsage( THREE.DynamicDrawUsage)); geometry.setAttribute( "customColor", new THREE.Float32BufferAttribute(colors, 3)); geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1)); const plane = new THREE.Points(geometry, shaderMaterial); plane.position.y = -8; scene.add(plane); } 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})`); }); window.addEventListener( "resize", () => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); composer.setSize(width, height); }, false); } </script> </body> </html>
