扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >用coding向你最爱的人说圣诞快乐
  • 762

0
分享到

用coding向你最爱的人说圣诞快乐

csshtmlcss3 2023-08-31 06:08:37 762人浏览 八月长安
摘要

文章目录 圣诞节的起源圣诞祝福语用 coding 说圣诞快乐Canvas 渲染 圣诞树特效唯美圣诞树CSS实现圣诞树简易的圣诞树线性树卡片圣诞树 🎄Ἰ

文章目录


🎄🎄🎄圣诞节即将到来，今天让我们用编码的方式向你最爱的人表达圣诞节快乐

圣诞节的起源

 圣诞节源自古罗马人迎接新年的农神节，与基督教本无关系。在基督教盛行罗马帝国后，教廷将这种民俗节日纳入基督教体系，同时以庆祝耶稣的降生。但在圣诞节这天不是耶稣的生辰，因为《圣经》未记载耶稣具体出生时间，同样没提到过有此种节日，是基督教吸收了古罗马神话的结果。

在这里插入图片描述

 圣诞节是西方传统节日，也是许多西方国家一年中最重要的节日。每年这一天，欢快的圣诞歌在大街小巷飘扬，商场里流光溢彩，琳琅满目，到处弥漫着温馨欢乐的气息。孩子们在甜美的梦乡中，盼望着圣诞老人从天而降，带来梦寐以求的礼物。

在这里插入图片描述

 平安夜和圣诞节现在很多人都在过，对于很多人而言，并不是在做一个所谓的洋节，而是在这一天让自己爱的人和爱我们的人开心，正如网络上流行的一句话：“ 世界上本没有圣诞老人，所有的惊喜和礼物都来自于爱你的人。 ”

圣诞祝福语

🎄 Merry Christmas

🎄今年圣诞老人🎅🏻也很忙喔

所以轮到我把圣诞惊喜给你咯！

🎄今天扎了个蝴蝶结，像不像你的圣诞礼物。

圣诞节没有领到礼物的到我这里领个37°的拥抱吧🎅🏻

🎄蟹蟹圣诞老公公，送礼全世界最棒的礼物给我，就是把你放进我心里。

麋鹿不会迷路，圣诞之礼，终将准时送达。🎅🏻

多少人，一夜之间，没穿圣诞装，却成了圣诞老人。🎅🏻

把我的小心思，偷偷塞进礼物盒，在圣诞节那一天，通通送给你

圣诞有我，要开心哦(• . •)

我想和你一起看夜景 一起吃热热的烤火鸡 一起许愿 看着那会发光的圣诞树 一起倒数

你快跳进圣诞老人的背包里 一觉醒来你就是我的礼物

想给每个善良的人一顶圣诞帽 愿这顶帽子成为他们的睡帽 从此每个安睡的日子都叫平安夜

希望圣诞树 和你一起到来🎄

圣诞快乐，喜乐长安。🎄

用 coding 说圣诞快乐

canvas 渲染 圣诞树特效

在这里插入图片描述

index.html

DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta Http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>ChristmasTreetitle>    <style>        html,        body {            margin: 0;            width: 100%;            height: 100%        }        body {            height: 100%;            display: flex;            justify-content: center;            align-items: center;            background-color: black;            position: relative;            overflow-x: hidden;            overflow-y: hidden;        }        .snow-container {            position: absolute;            width: 400px;            height: 550px;            color: white;        }        @media screen and (max-width: 450px) {            .snow-container {                width: 100%;            }        }        .snow-box {            position: relative;            width: 100%;            height: 100%;        }        .snow {            position: absolute;            animation: 5s snow linear infinite;        }        @keyframes snow {            0% {                left: 0;                top: 0            }            80% {                top: 90%            }            100% {                top: 90%            }        }        .snow2 {            left: 5%;            top: 2%;            position: absolute;            animation: 10s snow2 ease-in infinite;        }        @keyframes snow2 {            0% {                left: 5%;                top: 2%;            }            80% {                top: 90%            }            100% {                top: 90%            }        }        .snow3 {            left: 10%;            top: 8%;            position: absolute;            animation: 8s snow3 ease-out infinite;        }        @keyframes snow3 {            0% {                left: 5%;                top: 2%;            }            80% {                top: 90%            }            100% {                top: 90%            }        }        .snow4 {            left: 18%;            top: 18%;            position: absolute;            animation: 7s snow4 ease-out infinite;        }        @keyframes snow4 {            0% {                left: 18%;                top: 18%;            }            80% {                top: 90%            }            100% {                top: 90%            }        }        .snow5 {            left: 59%;            top: 1%;            position: absolute;            animation: 6s snow4 ease infinite;        }        @keyframes snow5 {            0% {                left: 75%;                top: 18%;            }            80% {                top: 90%            }            100% {                top: 90%            }        }        .snow6 {            left: 65%;            top: 5%;            position: absolute;            animation: 6s snow6 ease-in infinite;        }        @keyframes snow6 {            0% {                left: 75%;                top: 18%;            }            80% {                top: 90%            }            100% {                top: 90%            }        }        .snow7 {            left: 75%;            top: 18%;            position: absolute;            animation: 11s snow5 ease infinite;        }        @keyframes snow7 {            0% {                left: 75%;                top: 18%;            }            80% {                top: 90%            }            100% {                top: 90%            }        }        .snow8 {            left: 90%;            top: 40%;            position: absolute;            animation: 5s snow8 ease-out infinite;        }        @keyframes snow8 {            0% {                left: 90%;                top: 20%;            }            80% {                top: 90%            }            100% {                top: 90%            }        }        .snow9 {            left: 50%;            top: 10%;            position: absolute;            animation: 5s snow9 ease-out infinite;        }        @keyframes snow9 {            0% {                left: 85%;                top: 20%;            }            80% {                left: 50%;                top: 90%            }            100% {                top: 90%            }        }        .snow10 {            left: 100%;            top: 10%;            position: absolute;            animation: 7s snow10 ease infinite;        }        @keyframes snow10 {            0% {                left: 100%;                top: 10%;            }            80% {                left: 50%;                top: 90%            }            100% {                left: 50%;                top: 90%            }        }        .text {            font-size: 40px;            color: #f1ebe5;            text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;            font-weight: bold;            letter-spacing: 2px;            text-align: center;            position: absolute;            white-space: nowrap;            left: 50%;            transfORM: translate(-50%, -50%);        }    style>head><body>    <div class="snow-container">        <div class="snow-box">            <span class="snow">*span>            <span class="snow2">*span>            <span class="snow3">*span>            <span class="snow4">*span>            <span class="snow5">*span>            <span class="snow6">*span>            <span class="snow7">*span>            <span class="snow8">*span>            <span class="snow9">*span>            <span class="snow10">*span>        div>        <div class="text">鱼找水的🎄div>    div>    <canvas id="canvas" width="375" height="500">canvas>    <script src="./assets/index.js">    script>    <script>        new ChristmasTree().renderTree()    script>body>html>

index.js

class ChristmasTree {    constructor() {        this.side = 20        this.gap = 6 + this.side        this.init()        this.treeData = []    }    init() {        this.canvas = document.querySelector('#canvas')        this.ctx = this.canvas.getContext('2d')        const { width, height } = this.canvas        this.width = width        this.height = height        this.ctx.fillStyle = 'rgb(0, 0, 0)'        this.ctx.fillRect(0, 0, width, height)    }    createArc(x, y, color) {        this.ctx.beginPath()        this.ctx.fillStyle = color        this.ctx.arc(x, y, this.side / 2, 0, Math.PI * 2, false)        this.ctx.fill()    }    createRect(x, y, color) {        this.ctx.fillStyle = color        this.ctx.fillRect(x, y, this.side, this.side)    }    createPentastar(x, y, color) {        this.ctx.beginPath()        const R = this.gap / 2,            r = this.gap / 5        for (var i = 0; i < 5; i++) {            this.ctx.lineTo(                Math.cos(((18 + i * 72) / 180) * Math.PI) * R + x, -Math.sin(((18 + i * 72) / 180) * Math.PI) * R + y            )            this.ctx.lineTo(                Math.cos(((54 + i * 72) / 180) * Math.PI) * r + x, -Math.sin(((54 + i * 72) / 180) * Math.PI) * r + y            )        }        this.ctx.closePath()        this.ctx.lineWidth = '3'        this.ctx.fillStyle = color        this.ctx.fill()    }    buildTreeCrown(startnodeNum, rowsNum, startHeight) {        const arr = []        const midRect = this.width / 2 - this.side / 2        const midArc = this.width / 2        for (let i = 0; i < rowsNum; i++) {            for (let j = 0; j < startNodeNum; j++) {                if (rowsNum - i === 2 && startNodeNum - j <= 2) {                    arr.push({                        type: 'start',                        x: midArc + (j % 2 === 0 ? (-this.gap * j) / 2 : (+(j + 1) / 2) * this.gap),                        y: startHeight + this.gap * i + this.side / 2,                        color: rowsNum - i === 1 ? 'red' : 'yellow'                    })                } else if (rowsNum - i === 1 && startNodeNum - j <= 2) {                    arr.push({                        type: 'arc',                        x: midArc + (j % 2 === 0 ? (-this.gap * j) / 2 : (+(j + 1) / 2) * this.gap),                        y: startHeight + this.gap * i + this.side / 2,                        color: 'red'                    })                } else {                    arr.push({                        type: 'rect',                        x: midRect + (j % 2 === 0 ? (-this.gap * j) / 2 : (+(j + 1) / 2) * this.gap),                        y: startHeight + this.gap * i,                        color: i === rowsNum - 1 && startNodeNum - j >= 7 ? 'red' : 'green'                    })                }            }            if (i === rowsNum - 3) {                startNodeNum += 4            } else {                startNodeNum += 2            }        }        return arr    }    buildTreeStump(row, col, gapRow) {        const arr = []        const midRect = this.width / 2 - this.side / 2        for (let i = 0; i < row; i++) {            for (let j = 0; j < col; j++) {                arr.push({                    type: 'rect',                    x: midRect + (j % 2 === 0 ? (-this.gap * j) / 2 : (+(j + 1) / 2) * this.gap),                    y: (gapRow + i) * this.gap,                    color: 'rgb(67, 11, 0)'                })            }        }        return arr    }    setTreeData() {        const _this = this        let gapRow = 1        this.treeData = [{                type: 'start',                x: this.width / 2,                y: this.side / 2 + 2,                color: 'yellow'            },            ...setTreeCrownData(3),            ...this.buildTreeStump(5, 3, gapRow)        ]        function setTreeCrownData(crownNum) {            const arr = []            let indexNode = 1            let rowsNum = 4            for (let i = 0; i < crownNum; i++) {                arr.push(..._this.buildTreeCrown(indexNode, rowsNum, _this.gap * gapRow))                indexNode += 2                gapRow += rowsNum            }            return arr        }    }    renderTree() {        this.setTreeData()        for (const item of this.treeData) {            if (item.type === 'arc') {                const { x, y, color } = item                this.createArc(x, y, color)            } else if (item.type === 'rect') {                const { x, y, color } = item                this.createRect(x, y, color)            } else if (item.type === 'start') {                const { x, y, color } = item                this.createPentastar(x, y, color)            }        }    }}

唯美圣诞树

在线演示，加载比较慢

在这里插入图片描述

里边用到的音乐自己下载，修改变量const files为对应mp3的路径

DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Musical Christmas Lightstitle>  <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;    }    #tree-text {      position: absolute;      top: 18vh;      width: 100vw;      line-height: 5vh;      text-align: center;      color: #fab1a0;      font-size: x-large;      font-family: "Lucida Console", "Courier New", monospace;      opacity: 1;      font-weight: bold;      color: transparent;      background: linear-gradient(45deg, #fab1a0 35%, #ff7675, #e17055 60%);      background-size: cover;      -WEBkit-background-clip: text;      -ms-background-clip: text;      -moz-background-clip: text;      -o-background-clip: text;    }    @keyframes gradually-appear {      from {        opacity: 0;      }      to {        opacity: 1;      }    }    .show {      display: block;      animation-name: gradually-appear;      animation-duration: 8s;    }    .hide {      display: none;    }  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="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>  <div id="overlay">    <ul>      <li class="title">宝贝，选一首喜欢的歌吧li>      <li>        <button class="btn" id="btnA" type="button">          Snowflakes Falling Down by Simon Panrucker        button>      li>      <li><button class="btn" id="btnB" type="button">This Christmas by Dottbutton>li>      <li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banksbutton>li>      <li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smebybutton>li>      <li  style="display: none;" class="separator">或者li>      <li style="display: none;">        <input type="file" id="upload" hidden />        <label for="upload">Upload Filelabel>      li>    ul>  div>  <div id="tree-text" class="hide">    祝我最爱的girl圣诞节快乐    <br />    希望能与你度过以后的每一个圣诞节，I ❤️ you～  div>  <script id="rendered-js">    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();      document.getElementById("tree-text").className = "show";      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 =        '
正在下载音乐，请稍等...
';      // 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 files = ["./music/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",        "./music/Dott_-_01_-_This_Christmas.mp3",        "./music/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",        "./music/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 =        '
请稍等...
';      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>

CSS实现圣诞树

在这里插入图片描述

DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width= , initial-scale=1.0">    <title>圣诞树title>    




软考高级职称资格查询















热门wiki
















近期文章
















推荐阅读
















热门问答















热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作