Răsfoiți Sursa

Examples: Update keyframes example.

Don McCurdy 7 ani în urmă
părinte
comite
08dd2729d2

+ 1 - 1
examples/files.js

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

BIN
examples/models/gltf/PrimaryIonDrive.glb


+ 192 - 0
examples/webgl_animation_keyframes.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - animation - keyframes</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<br />
+			<a href="https://sketchfab.com/models/d3f50a66fee74c6588dd9bc92f7fe7b3" target="_blank" rel="noopener">Primary Ion Drive</a> by
+			<a href="https://sketchfab.com/indierocktopus" target="_blank" rel="noopener">indierocktopus</a>, CC Attribution.<br/>
+			<a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Art Spotlight</a> blog post.
+		</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+
+		<script src="js/postprocessing/EffectComposer.js"></script>
+		<script src="js/postprocessing/RenderPass.js"></script>
+		<script src="js/postprocessing/ShaderPass.js"></script>
+		<script src="js/shaders/CopyShader.js"></script>
+		<script src="js/shaders/LuminosityHighPassShader.js"></script>
+		<script src="js/postprocessing/UnrealBloomPass.js"></script>
+
+		<script>
+
+			let scene, camera, controls, pointLight, stats;
+			let composer, renderer, mixer;
+
+			const params = {
+				projection: 'normal',
+				background: false,
+				exposure: 1,
+				bloomStrength: 1.5,
+				bloomThreshold: 0.2,
+				bloomRadius: 0
+			};
+
+			const clock = new THREE.Clock();
+			const 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 );
+			renderer.toneMapping = THREE.CineonToneMapping;
+			container.appendChild( renderer.domElement );
+
+			scene = new THREE.Scene();
+
+			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+			camera.position.set( - 2.5, 1.5, 6 );
+			camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
+
+			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls.maxPolarAngle = Math.PI * 0.5;
+			controls.minDistance = 0.2;
+			controls.maxDistance = 20;
+			controls.autoRotate = true;
+
+			scene.add( new THREE.AmbientLight( 0x404040 ) );
+
+			pointLight = new THREE.PointLight( 0xffffff, 1 );
+			pointLight.position.copy( camera.position );
+			scene.add( pointLight );
+
+			const renderScene = new THREE.RenderPass( scene, camera );
+
+			const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 ); //1.0, 9, 0.5, 512);
+			bloomPass.renderToScreen = true;
+			bloomPass.threshold = params.bloomThreshold;
+			bloomPass.strength = params.bloomStrength;
+			bloomPass.radius = params.bloomRadius;
+
+			composer = new THREE.EffectComposer( renderer );
+			composer.setSize( window.innerWidth, window.innerHeight );
+			composer.addPass( renderScene );
+			composer.addPass( bloomPass );
+
+			new THREE.GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
+
+				const model = gltf.scene;
+
+				scene.add( model );
+
+				// Mesh contains self-intersecting semi-transparent faces, which display
+				// z-fighting unless depthWrite is disabled.
+				const core = model.getObjectByName( 'geo1_HoloFillDark_0' );
+				core.material.depthWrite = false;
+
+				mixer = new THREE.AnimationMixer( model );
+				const clip = gltf.animations[ 0 ];
+				mixer.clipAction( clip.optimize() ).play();
+
+				animate();
+
+			} );
+
+			const gui = new dat.GUI();
+
+			gui.add( params, 'exposure', 0.1, 2 );
+
+			gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
+
+				bloomPass.threshold = Number( value );
+
+			} );
+
+			gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
+
+				bloomPass.strength = Number( value );
+
+			} );
+
+			gui.add( params, 'bloomRadius', 0.0, 1.0 ).onChange( function ( value ) {
+
+				bloomPass.radius = Number( value );
+
+			} );
+
+			gui.close();
+
+			window.onresize = function () {
+
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( width, height );
+				composer.setSize( width, height );
+
+			};
+
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				const delta = clock.getDelta();
+
+				mixer.update( delta );
+				controls.update( delta );
+
+				pointLight.position.copy( camera.position );
+
+				stats.update();
+
+				renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
+
+				composer.render();
+
+			}
+
+
+		</script>
+
+	</body>
+
+</html>

+ 0 - 112
examples/webgl_animation_keyframes_json.html

@@ -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>