<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - animation - morph targets</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { background:#000; color:#fff; padding:0; margin:0; font-weight: bold; overflow:hidden; } #info { position: absolute; top: 0px; width: 100%; color: #ffffff; padding: 5px; font-family: Monospace; font-size: 13px; text-align: center; z-index:100; } #ctrl { position: absolute; top: 0px; left: 0px; width: 200px; color: #ffffff; padding: 5px; font-family: Monospace; font-size: 13px; z-index:100; } a { color:red } </style> </head> <body> <div id="info"> <a href="http://threejs.org" target="_blank">three.js</a> - WebGL morph target example </div> <div id="ctrl"> Use controls to change morph target influences:<br/> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 0 ] = this.value/100;" /> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 1 ] = this.value/100;" /> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 2 ] = this.value/100;" /> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 3 ] = this.value/100;" /> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 4 ] = this.value/100;" /> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 5 ] = this.value/100;" /> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 6 ] = this.value/100;" /> <input type="range" value="0" min="0" max="100" onchange="mesh.morphTargetInfluences[ 7 ] = this.value/100;" /> </div> <script src="../build/three.min.js"></script> <script src="js/Detector.js"></script> <script src="js/libs/stats.min.js"></script> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var container, stats; var camera, scene, renderer; var geometry, objects; var mouseX = 0, mouseY = 0; var mesh; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; document.addEventListener( 'mousemove', onDocumentMouseMove, false ); init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 ); camera.position.z = 500; scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0x000000, 1, 15000 ); var light = new THREE.PointLight( 0xff2200 ); light.position.set( 100, 100, 100 ); scene.add( light ); var light = new THREE.AmbientLight( 0x111111 ); scene.add( light ); var geometry = new THREE.BoxGeometry( 100, 100, 100 ); var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true } ); // construct 8 blend shapes for ( var i = 0; i < geometry.vertices.length; i ++ ) { var vertices = []; for ( var v = 0; v < geometry.vertices.length; v ++ ) { vertices.push( geometry.vertices[ v ].clone() ); if ( v === i ) { vertices[ vertices.length - 1 ].x *= 2; vertices[ vertices.length - 1 ].y *= 2; vertices[ vertices.length - 1 ].z *= 2; } } geometry.morphTargets.push( { name: "target" + i, vertices: vertices } ); } mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); // renderer = new THREE.WebGLRenderer(); renderer.setClearColor( 0x222222 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.sortObjects = false; container.appendChild( renderer.domElement ); // window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove(event) { mouseX = ( event.clientX - windowHalfX ); mouseY = ( event.clientY - windowHalfY ) * 2; } function animate() { requestAnimationFrame( animate ); render(); } function render() { mesh.rotation.y += 0.01; //mesh.morphTargetInfluences[ 0 ] = Math.sin( mesh.rotation.y ) * 0.5 + 0.5; //camera.position.x += ( mouseX - camera.position.x ) * .005; camera.position.y += ( - mouseY - camera.position.y ) * .01; camera.lookAt( scene.position ); renderer.render( scene, camera ); } </script> </body> </html>