html5 3d变形,HTML5/WebGL粒子组成的3D对象变形动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

class Scene {

constructor() {

this.scene,

this.camera,

this.renderer,

this.element,

this.container,

this.effect,

this.controls,

this.clock;

this.init();

}

init() {

this.scene = new THREE.Scene();

this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

this.camera.position.set(500, 300, 500);

this.camera.lookAt(0, 30, 0);

this.scene.add(this.camera);

this.renderer = new THREE.WebGLRenderer({

antialias: true,

alpha: true

});

// this.renderer.setClearColor( 0x202020 , 1 );

this.renderer.shadowMapEnabled = true;

this.renderer.shadowMapType = THREE.PCFSoftShadowMap;

this.element = this.renderer.domElement;

this.container = document.getElementById('webglviewer');

this.container.width = this.element.width = window.innerWidth;

this.container.height = this.element.height = window.innerHeight;

this.container.appendChild(this.element);

this.controls = new THREE.OrbitControls(this.camera, this.element);

// this.controls.target.set(

// this.camera.position.x + 0.15,

// this.camera.position.y,

// this.camera.position.z

// );

// this.controls.noPan = true;

// this.controls.noZoom = true;

// this.floor();

this.lights();

this.initShapes();

this.animate();

}

animate() {

this.raf = requestAnimationFrame(() => this.animate());

this.render();

}

lights() {

var Hlight = new THREE.AmbientLight(0x000000);

this.scene.add(Hlight);

}

initShapes() {

var model = new THREE.IcosahedronGeometry(100, 3);

var shape = new THREE.IcosahedronGeometry(1, 1);

var material = new THREE.MeshLambertMaterial({

color: 0xFFFFFF,

shading: THREE.FlatShading

});

for (var i = model.vertices.length - 1; i >= 0; i--) {

let mesh = new THREE.Mesh(shape, material);

mesh.position.x = 0;

mesh.position.y = 0;

mesh.position.z = 0;

var tl = new TimelineMax({

repeat: -1,

delay: ((model.vertices[i].x / 50) + model.vertices[i].y / 50) / 2

});

tl.to(mesh.position, 3, {

x: model.vertices[i].x,

y: model.vertices[i].y,

z: model.vertices[i].z,

ease: Power2.EaseInOut

});

tl.to(mesh.position, 2, {

x: model.vertices[i].x / 2,

y: model.vertices[i].y / 2,

z: model.vertices[i].z / 2,

ease: Power2.EaseInOut

});

this.scene.add(mesh);

}

}

resize() {

var width = this.container.offsetWidth;

var height = this.container.offsetHeight;

this.camera.aspect = width / height;

this.camera.updateProjectionMatrix();

this.renderer.setSize(width, height);

// this.effect.setSize(width, height);

}

render() {

this.resize();

// this.controls.update();

this.camera.updateProjectionMatrix();

this.renderer.render(this.scene, this.camera);

}

}

new Scene();