<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - scene animation</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 { color: #000; font-family:Monospace; font-size:13px; text-align:center; background-color: #fff; margin: 0px; overflow: hidden; } #info { position: absolute; top: 0px; width: 100%; padding: 5px; } a { color: #0af; } </style> </head> <body> <div id="container"></div> <div id="info"> <a href="http://threejs.org" target="_blank">three.js</a> webgl - scene animation - <a href="https://clara.io/view/96106133-2e99-40cf-8abd-64defd153e61">Three Gears Scene</a> courtesy of David Sarno</div> <script src="../build/three.js"></script> <script src="js/Detector.js"></script> <script src="js/libs/stats.min.js"></script> <script> var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var FLOOR = -250; var container,stats; var camera, scene, sceneAnimationClip; var renderer; var mesh, helper; var mixer; var mouseX = 0, mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var clock = new THREE.Clock(); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); init(); animate(); function init() { container = document.getElementById( 'container' ); camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 ); camera.position.z = 150; scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 ); //scene.add( camera ); // GROUND var geometry = new THREE.PlaneBufferGeometry( 16000, 16000 ); var material = new THREE.MeshPhongMaterial( { emissive: 0x000000 } ); // var ground = new THREE.Mesh( geometry, material ); // ground.position.set( 0, FLOOR, 0 ); // ground.rotation.x = -Math.PI/2; // /*scene.add( ground );*/ // // ground.receiveShadow = true; // RENDERER renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setClearColor( scene.fog.color ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); renderer.domElement.style.position = "relative"; container.appendChild( renderer.domElement ); renderer.gammaInput = true; renderer.gammaOutput = true; renderer.shadowMap.enabled = true; // STATS stats = new Stats(); container.appendChild( stats.dom ); // var loader = new THREE.ObjectLoader(); loader.load( "models/json/scene-animation.json", function ( loadedScene ) { //这里的json应该是通过 //三维建模软件之类导出来的，包含模型和动画 sceneAnimationClip = loadedScene.animations[0]; scene = loadedScene; scene.add( camera ); scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 ); //感觉并没有什么用 mixer = new THREE.AnimationMixer( scene ); //动画场景？ mixer.clipAction( sceneAnimationClip ).play(); //播放动画？ } ); 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 ); } // function animate() { requestAnimationFrame( animate ); render(); stats.update(); } function render() { var delta = 0.75 * clock.getDelta(); //时间间隔 camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y = THREE.Math.clamp( camera.position.y + ( - mouseY - camera.position.y ) * .05, 0, 1000 ); camera.lookAt( scene.position ); if( mixer ) { // console.log( "updating mixer by " + delta ); mixer.update( delta ); } renderer.render( scene, camera ); } </script> </body> </html>