html写的3d烟花带字幕,Three.js 3D烟花绽放动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var renderer, scene, camera, geometry, mouse, bubbles;

var gravity = .3;

var ww = window.innerWidth,

wh = window.innerHeight;

function init() {

renderer = new THREE.WebGLRenderer();

renderer.setSize(ww, wh);

renderer.setClearColor(0X521324);

renderer.shadowMapEnabled = true;

document.getElementById("stage").appendChild(renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50, ww / wh, 1, 10000);

camera.position.set(500, 700, 400);

controls = new THREE.OrbitControls(camera);

scene.add(camera);

bubbles = new THREE.Object3D();

scene.add(bubbles);

//Box on the ground

var geometry = new THREE.BoxGeometry(50, 50, 50);

var material = new THREE.MeshBasicMaterial({

color: 0X000000

});

var emitter = new THREE.Mesh(geometry, material);

scene.add(emitter);

//Ground

var geometry = new THREE.PlaneGeometry(900, 900, 900);

var material = new THREE.MeshLambertMaterial({

color: 0XFFDAE4,

side: THREE.DoubleSide

});

var plane = new THREE.Mesh(geometry, material);

plane.rotation.x = Math.PI / 2;

plane.position.y = -25.1;

plane.receiveShadow = true;

scene.add(plane);

var light = new THREE.AmbientLight(0x404040); // soft white light

scene.add(light);

var directionalLight = new THREE.DirectionalLight(0xFFFAC3, 1);

directionalLight.position.set(0, 1000, 0);

directionalLight.lookAt(new THREE.Vector3(0, 0, 0));

directionalLight.castShadow = true;

scene.add(directionalLight);

var light = new THREE.PointLight(0x5992C7, 1, 800);

light.position.set(0, 0, 0);

scene.add(light);

render();

}

var colours = [0XF5CC70, 0XF2676B, 0X325982, 0XBF4E6C, 0X5992C7];

function Bubble(position) {

var geometry = new THREE.SphereGeometry(12, 15, 15);

var material = new THREE.MeshLambertMaterial({

transparent: true,

color: colours[parseInt(Math.random() * 5)]

});

var bubble = new THREE.Mesh(geometry, material);

bubble.castShadow = true;

bubble.receiveShadow = true;

bubble.position.set(0, 0, 0);

bubble.velocity = Math.random() * 1 + 15;

bubble.offsetX = (Math.random() - .5) * 7;

bubble.offsetZ = (Math.random() - .5) * 7;

bubble.move = true;

//If baby explosion

if (position) {

bubble.position.set(position.x, position.y, position.z);

bubble.child = true;

bubble.scale.set(.6, .6, .6);

bubble.velocity = (Math.random() - .5) * 7 + 5;

} else {

bubble.child = false;

bubble.explosion = (Math.random() - .5) * 20;

}

return bubble;

};

function Explosion(bubble) {

var position = {

x: bubble.position.x,

y: bubble.position.y,

z: bubble.position.z

};

for (var i = 0; i < 10; i++) {

bubbles.add(new Bubble(position));

}

};

var counter = 0;

var render = function(a) {

requestAnimationFrame(render);

if (counter % 30 === 0) {

bubbles.add(new Bubble());

}

for (var i = 0, j = bubbles.children.length; i < j; i++) {

var bubble = bubbles.children[i];

if (bubble.move) {

bubble.position.x += bubble.offsetX;

bubble.position.z += bubble.offsetZ;

bubble.velocity -= gravity;

bubble.position.y += bubble.velocity;

}

if (!bubble.child && bubble.position.y < 0 || bubble.velocity < bubble.explosion) {

new Explosion(bubble);

bubbles.remove(bubble);

i--;

j--;

} else if (bubble.child && bubble.position.y < .1) {

bubble.move = false;

bubble.position.y = -15;

bubble.scale.x -= .006;

bubble.scale.y -= .006;

bubble.scale.z -= .006;

bubble.position.y -= .06;

if (bubble.scale.x < .05) {

bubbles.remove(bubble);

i--;

j--;

}

}

}

counter++;

renderer.render(scene, camera);

};

init();