Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: Merge keyframes_json and scene examples.

Don McCurdy 7 years ago
parent
9c4989a7fe
commit
e75f3120ed
3 changed files with 1 additions and 271 deletions
Unified View Show Diff Stats
  1. 1 2
      examples/files.js
  2. 0 112
      examples/webgl_animation_keyframes_json.html
  3. 0 157
      examples/webgl_animation_scene.html

+ 1 - 2
examples/files.js
View File 

@@ -1,8 +1,7 @@
 
 var files = {
 
 var files = {
 
 	"webgl": [
 
 	"webgl": [
 
 		"webgl_animation_cloth",
 
 		"webgl_animation_cloth",
 
-		"webgl_animation_keyframes_json",
 
-		"webgl_animation_scene",
 
+		"webgl_animation_keyframes",
 
 		"webgl_animation_skinning_blending",
 
 		"webgl_animation_skinning_blending",
 
 		"webgl_animation_skinning_morph",
 
 		"webgl_animation_skinning_morph",
 
 		"webgl_camera",
 
 		"webgl_camera",

+ 0 - 112
examples/webgl_animation_keyframes_json.html
View File 

@@ -1,112 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - animation - keyframes - json</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: #fff;
 
-				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: #2983ff;
 
-			}
 
-		</style>
 
-	</head>
 
-
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - keyframes - json
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/Detector.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var scene, camera, pointLight, stats;
 
-			var renderer, mixer, animationClip;
 
-
 
-			var clock = new THREE.Clock();
 
-			var container = document.getElementById( 'container' );
 
-
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
-
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			container.appendChild( renderer.domElement );
 
-
 
-			scene = new THREE.Scene();
 
-
 
-			var grid = new THREE.GridHelper( 20, 20, 0x888888, 0x888888 );
 
-			grid.position.set( 0, - 1.1, 0 );
 
-			scene.add( grid );
 
-
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 
-			camera.position.set( - 5.00, 3.43, 11.31 );
 
-			camera.lookAt( new THREE.Vector3( - 1.22, 2.18, 4.58 ) );
 
-
 
-			scene.add( new THREE.AmbientLight( 0x404040 ) );
 
-
 
-			pointLight = new THREE.PointLight( 0xffffff, 1 );
 
-			pointLight.position.copy( camera.position );
 
-			scene.add( pointLight );
 
-
 
-			new THREE.ObjectLoader().load( 'models/json/pump/pump.json', function ( model ) {
 
-
 
-				scene.add( model );
 
-
 
-				mixer = new THREE.AnimationMixer( model );
 
-				mixer.clipAction( model.animations[ 0 ] ).play();
 
-
 
-				animate();
 
-
 
-			} );
 
-
 
-
 
-			window.onresize = function () {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			};
 
-
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				mixer.update( clock.getDelta() );
 
-
 
-				stats.update();
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-
 
-		</script>
 
-
 
-	</body>
 
-
 
-</html>

+ 0 - 157
examples/webgl_animation_scene.html
View File 

@@ -1,157 +0,0 @@
 
-<!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" rel="noopener">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 scene, camera, controls, stats;
 
-			var renderer, mixer;
 
-
 
-			var clock = new THREE.Clock();
 
-			var url = 'models/json/scene-animation.json';
 
-
 
-			var SCREEN_WIDTH = window.innerWidth;
 
-			var SCREEN_HEIGHT = window.innerHeight;
 
-
 
-			var container = document.getElementById( 'container' );
 
-
 
-
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
-
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-			container.appendChild( renderer.domElement );
 
-
 
-
 
-			// Load a scene with objects, lights and camera from a JSON file
 
-
 
-			new THREE.ObjectLoader().load( url, function ( loadedScene ) {
 
-
 
-				scene = loadedScene;
 
-				scene.background = new THREE.Color( 0xffffff );
 
-
 
-				// If the loaded file contains a perspective camera, use it with adjusted aspect ratio...
 
-
 
-				scene.traverse( function ( sceneChild ) {
 
-
 
-					if ( sceneChild.type === 'PerspectiveCamera' ) {
 
-
 
-						camera = sceneChild;
 
-						camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
-						camera.updateProjectionMatrix();
 
-
 
-					}
 
-
 
-				} );
 
-
 
-				// ... else create a new camera and use it in the loaded scene
 
-
 
-				if ( camera === undefined ) {
 
-
 
-					camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
-					camera.position.set( - 200, 0, 200 );
 
-
 
-				}
 
-
 
-				controls = new THREE.OrbitControls( camera );
 
-
 
-				// 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 );
 
-
 
-				ground.position.set( 0, - 250, 0 );
 
-				ground.rotation.x = - Math.PI / 2;
 
-
 
-				scene.add( ground );
 
-
 
-				scene.fog = new THREE.Fog( 0xffffff, 1000, 10000 );
 
-
 
-				// Initialization of the loaded animations
 
-
 
-				var animationClip = scene.animations[ 0 ];
 
-				mixer = new THREE.AnimationMixer( scene );
 
-				mixer.clipAction( animationClip ).play();
 
-
 
-				animate();
 
-
 
-			} );
 
-
 
-
 
-			window.onresize = function () {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			};
 
-
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-				render();
 
-
 
-			}
 
-
 
-
 
-			function render() {
 
-
 
-				var delta = 0.75 * clock.getDelta();
 
-
 
-				mixer.update( delta );
 
-				stats.update();
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>