Merge pull request #11190 from jostschmithals/revisionSceneExample

Revision of scene animation example

examples/models/json/scene-animation.json

@@ -16,8 +16,6 @@
                 "visible": true,
                 "type": "Mesh",
                 "material": "541CFE3C-B1BD-37FD-8A82-3870870BB8A8",
-                "castShadow": true,
-                "receiveShadow": true,
                 "geometry": "CAEC0410-6CA0-3646-AF22-DE6D5D34C387"
             },{
                 "name": "cylinder002",
@@ -26,8 +24,6 @@
                 "visible": true,
                 "type": "Mesh",
                 "material": "3701AB15-0042-3531-BDFA-EB0FA575D7D5",
-                "castShadow": true,
-                "receiveShadow": true,
                 "geometry": "0AF705E6-E495-351F-944E-8E96CEB82A7B"
             },{
                 "name": "cylinder003",
@@ -36,28 +32,36 @@
                 "visible": true,
                 "type": "Mesh",
                 "material": "D95A0291-848F-32DE-B7CF-F93015785600",
-                "castShadow": true,
-                "receiveShadow": true,
                 "geometry": "84174F78-6B50-3C0D-A3D3-D1203D616F79"
             }]
+        },{
+            "name": "ambientlight",
+            "uuid": "217f2d71-80f0-44cd-9d97-43e5611050a3",
+            "type": "AmbientLight",
+            "color": 5592405
         },{
             "name": "pointlight",
             "uuid": "FCC1C4DA-037A-33FF-97AE-339CD1CB618C",
             "matrix": [-1,0,0,0,0,1,-0,0,0,-0,-1,0,-22.1326,52.6576,-28.8763,1],
-            "visible": true,
             "type": "PointLight",
             "color": 16777215,
-            "intensity": 1,
-            "distance": 0
+            "intensity": 1
         },{
             "name": "pointlight1",
             "uuid": "D9440A28-5F71-3A2A-94B3-954420962156",
             "matrix": [-1,0,0,0,0,1,-0,0,0,-0,-1,0,18.3723,34.5427,79.0829,1],
-            "visible": true,
             "type": "PointLight",
             "color": 16777215,
-            "intensity": 1,
-            "distance": 0
+            "intensity": 1
+        },{
+            "name": "camera",
+            "uuid": "e2b22508-5e7c-4609-8505-d781754ba105",
+            "matrix": [0.70711, 0, 0.70711, 0, 0, 1, 0, 0, -0.70711, 0, 0.70711, 0, -200, 0, 200, 1],
+            "type": "PerspectiveCamera",
+            "fov": 30,
+            "aspect": 1.77778,
+            "near": 1,
+            "far": 10000
         }]
     },
     "images": [],

examples/webgl_animation_scene.html

@@ -33,156 +33,124 @@
 		<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>
+		<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
+		<br><br>camera orbit/zoom/pan with left/middle/right mouse button</div>
 
 		<script src="../build/three.js"></script>
+		<script src="js/controls/OrbitControls.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 scene, camera, controls, stats;
+			var renderer, mixer;
 
 			var clock = new THREE.Clock();
+			var url = 'models/json/scene-animation.json';
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
 
-			init();
-			animate();
+			var container = document.getElementById( 'container' );
 
-			function init() {
 
-				container = document.getElementById( 'container' );
+			stats = new Stats();
+			container.appendChild( stats.dom );
 
-				camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
-				camera.position.z = 150;
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setClearColor( 0xffffff );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+			container.appendChild( renderer.domElement );
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );
+			// Load a scene with objects, lights and camera from a JSON file
 
-				//scene.add( camera );
+			new THREE.ObjectLoader().load( url, function ( loadedScene ) {
 
-				// GROUND
+				scene = loadedScene;
 
-				var geometry = new THREE.PlaneBufferGeometry( 16000, 16000 );
-				var material = new THREE.MeshPhongMaterial( { emissive: 0x000000 } );
+				// If the loaded file contains a perspective camera, use it with adjusted aspect ratio...
 
-				var ground = new THREE.Mesh( geometry, material );
-				ground.position.set( 0, FLOOR, 0 );
-				ground.rotation.x = -Math.PI/2;
-				/*scene.add( ground );*/
+				scene.traverse( function ( sceneChild ) {
 
-				ground.receiveShadow = true;
+					if ( sceneChild.type === 'PerspectiveCamera' ) {
 
+						camera = sceneChild;
+						camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+						camera.updateProjectionMatrix();
 
-				// 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 );
+				// ... else create a new camera and use it in the loaded scene
 
-				renderer.gammaInput = true;
-				renderer.gammaOutput = true;
+				if ( camera === undefined ) {
 
-				renderer.shadowMap.enabled = true;
+					camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+					camera.position.set( - 200, 0, 200 );
 
+				}
 
-				// STATS
+				controls = new THREE.OrbitControls( camera );
 
-				stats = new Stats();
-				container.appendChild( stats.dom );
+				// Ground plane and fog: examples for applying additional children and new property values to the loaded scene
 
-				//
+				var geometry = new THREE.PlaneBufferGeometry( 20000, 20000 );
+				var material = new THREE.MeshPhongMaterial( { shininess: 0.1 } );
+				var ground = new THREE.Mesh( geometry, material );
 
-				var loader = new THREE.ObjectLoader();
-				loader.load( "models/json/scene-animation.json", function ( loadedScene ) {
+				ground.position.set( 0, - 250, 0 );
+				ground.rotation.x = - Math.PI / 2;
 
-					sceneAnimationClip = loadedScene.animations[0];
-					scene = loadedScene;
-					scene.add( camera );
-					scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );
+				scene.add( ground );
 
-					mixer = new THREE.AnimationMixer( scene );
+				scene.fog = new THREE.Fog( 0xffffff, 1000, 10000 );
 
-					mixer.clipAction( sceneAnimationClip ).play();
+				// Initialization of the loaded animations
 
-				} );
+				var animationClip = scene.animations[ 0 ];
+				mixer = new THREE.AnimationMixer( scene );
+				mixer.clipAction( animationClip ).play();
 
-				window.addEventListener( 'resize', onWindowResize, false );
+				animate();
 
-			}
+			} );
 
-			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
+			window.onresize = function () {
 
 				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 );
-				}
+				mixer.update( delta );
+				stats.update();
 
 				renderer.render( scene, camera );
 
 			}
 
+
 		</script>
 
 	</body>