three实现三维圣诞节圣诞树彩灯礼物文字动画场景效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维圣诞节圣诞树彩灯礼物文字动画场景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    * {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
}
canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
}
:root {
  --outside-border-size: 1px;
  --outside-margin: 3px;
  --inside-border-size: 3px;
  --inside-margin: 3px;
}
#deco-border {
  border: var(--outside-border-size) solid #ffd700;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(
    100% - var(--outside-border-size) * 2 - var(--outside-margin) * 2
  );
  height: calc(
    100% - var(--outside-border-size) * 2 - var(--outside-margin) * 2
  );
  z-index: 1;
  margin: var(--outside-margin);
  pointer-events: none;
}
#deco-border:after {
  border: var(--inside-border-size) solid #ffd700;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - var(--inside-border-size) * 2 - var(--inside-margin) * 2);
  height: calc(100% - var(--inside-border-size) * 2 - var(--inside-margin) * 2);
  z-index: 1;
  margin: var(--inside-margin);
  content: "";
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<!-- using three.js -->
<div id="deco-border"></div>
<script type="x-shader/x-vertex" id="vertexshader">
  varying vec2 vUv;
	void main() {
		vUv = uv;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
  uniform sampler2D baseTexture;
	uniform sampler2D bloomTexture;
	varying vec2 vUv;
	void main() {
		gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
	}
</script>
<!-- partial -->
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.145.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MeshSurfaceSampler.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LuminosityHighPassShader.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CopyShader.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FontLoader.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TextGeometry.145.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CurveModifier.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/BufferGeometryUtils.js"></script>
<script  >
    
const e = "Happy Holidays!";

!function() {
    "use strict";
    function t(e, t, o) {
        let n, a = t.length, s = new THREE.InstancedMesh(m.geometry, m.material, a);
        j.set(0, 0, 0, 0);
        for (let r = 0; r < a; r++) V.set(t[r][0], t[r][1], t[r][2]), F = V, "ico" == o && (k.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI), 
        j.setFromEuler(k)), 1 != e && U.set(e, e, e), D.compose(F, j, U), n = "ball" == o ? new THREE.Color().setHSL(THREE.MathUtils.randFloat(.25, .4), 1, .18) : "ico" == o ? new THREE.Color().setHSL(Math.random(), 1, .8) : "light" == o ? new THREE.Color().setHSL(Math.random(), 1, .5) : new THREE.Color().setHSL(Math.random(), 1, .7), 
        s.setMatrixAt(r, D), s.setColorAt(r, n);
        if ("light" == o) {
            setInterval(function() {
                s.layers.toggle(v), l();
            }, 1e3);
        }
        d.add(s);
    }
    function o(e) {
        let t = this.attributes.position;
        if (null != this.index) return;
        let o = t.count / 3, n = [], a = new THREE.Triangle(), s = new THREE.Vector3(), r = new THREE.Vector3(), i = new THREE.Vector3();
        for (let E = 0; E < o; E++) {
            s.fromBufferAttribute(t, 3 * E + 0), r.fromBufferAttribute(t, 3 * E + 1), i.fromBufferAttribute(t, 3 * E + 2), 
            a.set(s, r, i);
            let o = new THREE.Vector3();
            a.getMidpoint(o);
            let l = s.distanceTo(r), h = Math.sqrt(3) / 2 * l * e, d = o.clone().normalize().setLength(h);
            o.add(d), n.push(o.clone(), s.clone(), r.clone(), o.clone(), r.clone(), i.clone(), o.clone(), i.clone(), s.clone());
        }
        let E = new THREE.BufferGeometry().setFromPoints(n);
        return E.computeVertexNormals(), E;
    }
    function n(e, t, o, n, a, s, r, i = !1) {
        u = i ? new THREE.CylinderGeometry(e / 2, e / 2, t, 20, 1) : new THREE.BoxGeometry(e, t, o), 
        (R = R.clone()).color.set(s);
        let E = new THREE.Mesh(u, R);
        return x = [], u = new THREE.BoxGeometry(e + a, t + a, n), x.push(u), i || (u = new THREE.BoxGeometry(e + a, n, o + a), 
        x.push(u)), u = new THREE.BoxGeometry(n, t + a, o + a), x.push(u), u = THREE.BufferGeometryUtils.mergeBufferGeometries(x), 
        (H = H.clone()).color.set(r), T = new THREE.Mesh(u, H), E.add(T), E;
    }
    function a(e, t, o, n) {
        x = [];
        let a = [], s = .5 * t, r = 2 * t;
        (u = new THREE.CylinderGeometry(s, s, t, 15, 1, !0, 0, 1.18 * Math.PI)).rotateX(Math.PI / 2), 
        u.translate(r, s, 0), a.push(u);
        let i = new THREE.Shape();
        i.moveTo(0, 0), i.lineTo(r, -t / 2), i.lineTo(r, t / 2), (u = new THREE.ShapeGeometry(i)).rotateX(Math.PI / 2), 
        u.rotateZ(Math.PI / 6.35), a.push(u), (i = new THREE.Shape()).moveTo(0, 0), i.lineTo(r, -t / 2), 
        i.lineTo(r, t / 2), (u = new THREE.ShapeGeometry(i)).rotateX(Math.PI / 2), a.push(u);
        let E = THREE.BufferGeometryUtils.mergeBufferGeometries(a);
        E.scale(1.3, 1.3, 1.3);
        let l = 2 * Math.PI / o;
        for (let e = 0; e < o; e++) x.push(E.clone().rotateY(l * e));
        return u = new THREE.SphereGeometry(.7 * t, 6, 3), x.push(u), (u = THREE.BufferGeometryUtils.mergeBufferGeometries(x)).translate(0, e / 2 + .01, 0), 
        (H = H.clone()).color.set(n), new THREE.Mesh(u, H);
    }
    function s() {
        const e = window.innerWidth, t = window.innerHeight;
        h.aspect = e / t, h.updateProjectionMatrix(), c.setSize(e, t), G.setSize(e, t), 
        B.setSize(e, t), l();
    }
    function r(e) {
        (e.isMesh || e.isInstancedMesh) && !1 === C.test(e.layers) && (L[e.uuid] = e.material, 
        e.material = A);
    }
    function i(e) {
        L[e.uuid] && (e.material = L[e.uuid], delete L[e.uuid]);
    }
    function E() {
        requestAnimationFrame(E), w.update(), I && I.moveAlongCurve(.002), l();
    }
    function l() {
        const e = 5e-4 * Date.now();
        b.getDelta();
        f.position.x = 17 * -Math.sin(1.4 * e), f.position.y = 3 * Math.cos(1 * e) + 1, 
        f.position.z = 17 * -Math.cos(1.4 * e), y.position.x = 17 * Math.sin(1.4 * e), y.position.y = 3 * Math.sin(1 * e) + 1, 
        y.position.z = 17 * Math.cos(1.4 * e), g.position.x = 17 * -Math.sin(1.2 * e), g.position.y = 3 * Math.cos(.6 * e) + 1, 
        g.position.z = 17 * Math.cos(1.2 * e), d.traverse(r), G.render(), d.traverse(i), 
        B.render();
    }
    let h, d, c, w, u, p, T, m, M, R, H, f, y, g, S = 1, P = "", x = [];
    const b = new THREE.Clock();
    let I, G, B;
    const v = 1, C = new THREE.Layers();
    C.set(v);
    const z = {
        exposure: 2,
        bloomStrength: 2,
        bloomThreshold: 0,
        bloomRadius: 0
    }, A = new THREE.MeshBasicMaterial({
        color: "black&.........完整代码请登录后点击上方下载按钮下载查看