three+TweenMax实现棒棒糖鲜花飘落堆积文字动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three+TweenMax实现棒棒糖鲜花飘落堆积文字动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css?family=Corben:700");
html, body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #032C3F;
}

.title {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title h1 {
  font-size: 5vw;
  display: inline-block;
  color: #032C3F;
  width: auto;
  font-family: "Corben", cursive;
}
</style>
</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
  
    <script>
        "use strict";
console.clear();
TweenMax.lagSmoothing(0);
let colors = {
    background: '#032C3F'
};
let getRandomFromArray = function (arr) {
    return arr[Math.floor(Math.random() * arr.length)];
};
class Stage {
    constructor() {
        // container
        this.onResize = function () {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        };
        this.render = function () {
            this.renderer.render(this.scene, this.camera);
        };
        this.add = function (elem) {
            this.scene.add(elem);
        };
        this.remove = function (elem) {
            this.scene.remove(elem);
        };
        this.container = document.createElement('div');
        document.body.appendChild(this.container);
        // renderer
        this.renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: false
        });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setClearColor(colors.background, 1);
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.container.appendChild(this.renderer.domElement);
        // scene
        this.scene = new THREE.Scene();
        // camera
        let aspect = window.innerWidth / window.innerHeight;
        this.camera = new THREE.PerspectiveCamera(30, aspect, 1, 1500);
        this.camera.position.z = 100;
        this.camera.lookAt(new THREE.Vector3(0, 0, 0));
        //light
        this.light = new THREE.DirectionalLight(0xffffff, 0.8);
        //this.light.castShadow = true;
        this.light.position.set(8, 10, 10);
        this.scene.add(this.light);
        this.softLight = new THREE.AmbientLight(0xffffff, 0.4);
        this.scene.add(this.softLight);
        // group
        this.group = new THREE.Group();
        this.scene.add(this.group);
        window.addEventListener('resize', () => { this.onResize(); }, false);
    }
}
class Sprinkle {
    constructor() {
        this.colors = ['#E54B4B', '#712F79', '#FF9770'];
        this.group = new THREE.Group();
        let scale = 0.8;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.CylinderGeometry(0.2, 0.2, 2, 5);
        var material = new THREE.MeshToonMaterial({
            color: getRandomFromArray(this.colors)
        });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.y = -0.1;
        mesh.position.x = -0.1;
        mesh.position.z = -1;
        // mesh.castShadow = true;
        // mesh.receiveShadow = true;
        this.group.add(mesh);
    }
}
class Gumball {
    constructor() {
        this.colors = ['#DDDDDD', '#FF70A6', '#519872'];
        this.group = new THREE.Group();
        let scale = 1;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.TetrahedronGeometry(0.5, 1);
        var material = new THREE.MeshToonMaterial({
            color: getRandomFromArray(this.colors)
        });
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.y = Math.random() - 1;
        mesh.position.x = Math.random() - 1;
        mesh.position.z = Math.random() - 1;
        // this.mesh.castShadow = true;
        // this.mesh.receiveShadow = true;
        this.group.add(mesh);
    }
}
class ChocolateButton {
    constructor() {
        this.colors = ['#E9EB87', '#FF686B', '#C98BB9'];
        this.group = new THREE.Group();
        let scale = 0.5;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.CylinderGeometry(2, 1.5, 0.5, 10);
        var material = new THREE.MeshToonMaterial({
            color: '#594935'
        });
        var chocolate = new THREE.Mesh(geometry, material);
        this.group.add(chocolate);
    }
}
class Marshmallow {
    constructor() {
        this.group = new THREE.Group();
        let scale = 0.5;
        this.group.scale.set(scale, scale, scale);
        var geometry = new THREE.CylinderGeometry(1.5, 1.5, 3, 15);
        var material .........完整代码请登录后点击上方下载按钮下载查看