Merge pull request #6914 from sunag/dev

sea3d revision 2 + morph example

examples/index.html

@@ -266,6 +266,7 @@
 				"webgl_loader_sea3d",
 				"webgl_loader_sea3d_hierarchy",
 				"webgl_loader_sea3d_keyframe",
+				"webgl_loader_sea3d_morph",
 				"webgl_loader_sea3d_skinning",
 				"webgl_loader_sea3d_sound",
 				"webgl_loader_scene",

examples/webgl_loader_sea3d.html

@@ -33,7 +33,7 @@
 
 		<script src="../build/three.min.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 		<script src="js/postprocessing/RenderPass.js"></script>
@@ -101,13 +101,10 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 1000, - 300, 1000 );
 
-				controls = new THREE.TrackballControls( camera, document );
-				controls.noZoom = true;
-				controls.noPan = true;
-				controls.dynamicDampingFactor = 0.05;
+				controls = new THREE.OrbitControls( camera );
 				
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -164,28 +161,30 @@
 
 			//
 
+			var clock = new THREE.Clock();
+
 			function animate() {
 
+				var delta = clock.getDelta();
+				
 				requestAnimationFrame( animate );
 
-				controls.update();
+				// Update SEA3D Animations
+				THREE.SEA3D.AnimationHandler.update( delta );
+
+				// Update Three.JS Animations
+				THREE.AnimationHandler.update( delta );
 
-				render();
+				render( delta );
 
 				stats.update();
 
 			}
 
-			var clock = new THREE.Clock();
-
-			function render() {
-
-				var delta = clock.getDelta();
-
-				THREE.AnimationHandler.update( delta );
+			function render( dlt ) {
 
 				//renderer.render( scene, camera );
-				composer.render( delta );
+				composer.render( dlt );
 
 			}
 

examples/webgl_loader_sea3d_hierarchy.html

@@ -33,7 +33,7 @@
 
 		<script src="../build/three.min.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 		<script src="js/postprocessing/RenderPass.js"></script>
@@ -113,7 +113,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 1000, - 300, 1000 );
 
-				controls = new THREE.TrackballControls( camera, document );
+				controls = new THREE.OrbitControls( camera );
 				controls.noZoom = true;
 				controls.noPan = true;
 				controls.dynamicDampingFactor = 0.05;
@@ -169,31 +169,27 @@
 
 			//
 
+			var clock = new THREE.Clock();
+
 			function animate() {
 
+				var delta = clock.getDelta();
+				
 				requestAnimationFrame( animate );
 
-				controls.update();
+				// Update SEA3D Animations
+				THREE.SEA3D.AnimationHandler.update( delta );
 
-				render();
+				render( delta );
 
 				stats.update();
 
 			}
 
-			var clock = new THREE.Clock();
-
-			function render() {
-
-				var delta = clock.getDelta();
-
-				THREE.AnimationHandler.update( delta );
-
-				// SEA3D Keyframe Update		
-				SEA3D.AnimationHandler.update( delta ); 
+			function render( dlt ) {
 
 				//renderer.render( scene, camera );
-				composer.render( delta );
+				composer.render( dlt );
 
 			}
 

examples/webgl_loader_sea3d_keyframe.html

@@ -34,7 +34,7 @@
 
 		<script src="../build/three.min.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 		<script src="js/postprocessing/RenderPass.js"></script>
@@ -148,10 +148,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 1000, - 300, 1000 );
 
-				controls = new THREE.TrackballControls( camera, document );
-				controls.noZoom = true;
-				controls.noPan = true;
-				controls.dynamicDampingFactor = 0.05;
+				controls = new THREE.OrbitControls( camera );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -279,31 +276,29 @@
 				}
 			}
 
+			//
+
+			var clock = new THREE.Clock();
+
 			function animate() {
 
+				var delta = clock.getDelta();
+				
 				requestAnimationFrame( animate );
 
-				controls.update();
+				// Update SEA3D Animations
+				THREE.SEA3D.AnimationHandler.update( delta );
 
-				render();
+				render( delta );
 
 				stats.update();
 
 			}
 
-			var clock = new THREE.Clock();
-
-			function render() {
-
-				var delta = clock.getDelta();
-
-				THREE.AnimationHandler.update( delta );
-
-				// SEA3D Keyframe Update		
-				SEA3D.AnimationHandler.update( delta ); 
+			function render( dlt ) {
 
 				//renderer.render( scene, camera );
-				composer.render( delta );
+				composer.render( dlt );
 
 			}
 

examples/webgl_loader_sea3d_morph.html

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - sea3d / morph</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 {
+				font-family: Monospace;
+				background-color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+
+			}
+
+			a { color: white }
+		</style>
+	</head>
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank">three.js</a> - model by <a href="https://github.com/sunag/sea3d" style="color:#FFFFF" target="_blank">sea3d</a>
+		</div>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/controls/OrbitControls.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/postprocessing/MaskPass.js"></script> 
+		<script src="js/shaders/CopyShader.js"></script>
+		<script src="js/shaders/ColorCorrectionShader.js"></script>
+		<script src="js/shaders/VignetteShader.js"></script>
+		
+		<script src="js/loaders/sea3d/SEA3D.js"></script>
+		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
+		<script src="js/loaders/sea3d/SEA3DLoader.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, composer, controls, teapot;
+
+			var loader;
+
+			// Initialize Three.JS
+
+			init(); 
+
+			//
+			// SEA3D Loader
+			//
+
+			loader = new THREE.SEA3D( {
+
+				autoPlay : true, // Auto play animations
+				container : scene, // Container to add models
+				parser : THREE.SEA3D.DEFAULT, // Auto choose THREE.BufferGeometry and THREE.Geometry
+				multiplier : 1 // Light multiplier
+
+			} );
+
+			loader.onComplete = function( e ) {
+
+				// Get the first camera from 3ds Max
+				// use loader.get... to get others objects
+
+				var cam = loader.cameras[0];
+				camera.position.copy( cam.position );
+				camera.rotation.copy( cam.rotation );
+
+				// get mesh
+				teapot = loader.getMesh("Teapot01");
+				
+				// events
+				
+				window.addEventListener( 'mousemove', onMouseMove, false );
+				
+				animate();
+
+			};
+
+			loader.load( './models/sea3d/morph.sea' );
+
+			//
+
+			function init() {
+
+				scene = new THREE.Scene();
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.position.set( 1000, - 300, 1000 );
+
+				controls = new THREE.OrbitControls( camera );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x333333, 1 );
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				// post-processing
+
+				composer = new THREE.EffectComposer( renderer );
+
+				var renderPass = new THREE.RenderPass( scene, camera );
+				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				composer.addPass( renderPass );
+
+				var vh = 1.4, vl = 1.2;
+
+				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				composer.addPass( colorCorrectionPass );
+
+				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				vignettePass.uniforms[ "darkness" ].value = 1.0;
+				composer.addPass( vignettePass );
+
+				composer.addPass( copyPass );
+				copyPass.renderToScreen = true;
+
+				// extra lights
+
+				scene.add( new THREE.AmbientLight( 0x333333 ) );
+
+				// events
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onMouseMove( e ) {
+
+				var mouseX = e.clientX,
+					mouseY = e.clientY;
+
+				// change morph weight: 0 at 1
+				// names from modifier Morph of 3ds Max
+				teapot.setWeight("OldTeapot", mouseX / window.innerWidth);
+				teapot.setWeight("Sphere", mouseY / window.innerHeight);
+
+			}
+			
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			var clock = new THREE.Clock();
+
+			function animate() {
+
+				var delta = clock.getDelta();
+				
+				requestAnimationFrame( animate );
+
+				render( delta );
+
+				stats.update();
+
+			}
+
+			function render( dlt ) {
+
+				//renderer.render( scene, camera );
+				composer.render( dlt );
+
+			}
+
+		</script>
+	</body>
+</html>

examples/webgl_loader_sea3d_skinning.html

@@ -35,7 +35,7 @@
 
 		<script src="../build/three.min.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 		<script src="js/postprocessing/RenderPass.js"></script>
@@ -90,6 +90,7 @@
 
 				// get meshes
 				player = loader.getMesh("Player");
+
 				hat = loader.getMesh("Hat");
 
 				// events
@@ -115,10 +116,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 1000, - 300, 1000 );
 
-				controls = new THREE.TrackballControls( camera, document );
-				controls.noZoom = true;
-				controls.noPan = true;
-				controls.dynamicDampingFactor = 0.05;
+				controls = new THREE.OrbitControls( camera );				
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -195,28 +193,30 @@
 
 			//
 
+			var clock = new THREE.Clock();
+
 			function animate() {
 
+				var delta = clock.getDelta();
+				
 				requestAnimationFrame( animate );
 
-				controls.update();
+				// Update SEA3D Animations
+				THREE.SEA3D.AnimationHandler.update( delta );
+
+				// Update Three.JS Animations
+				THREE.AnimationHandler.update( delta ); 
 
-				render();
+				render( delta );
 
 				stats.update();
 
 			}
 
-			var clock = new THREE.Clock();
-
-			function render() {
-
-				var delta = clock.getDelta();
-
-				THREE.AnimationHandler.update( delta );
+			function render( dlt ) {
 
 				//renderer.render( scene, camera );
-				composer.render( delta );
+				composer.render( dlt );
 
 			}
 

examples/webgl_loader_sea3d_sound.html

@@ -103,7 +103,7 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
+			var container, raycaster, stats;
 
 			var camera, scene, renderer, composer, controls, velocity;
 			var blocker, instructions;
@@ -112,6 +112,8 @@
 			initKeyDown
 			
 			var loader;
+			var audioListener, soundFilter;			
+			var soundArea, collisionArea;
 
 			// Initialize Three.JS
 
@@ -134,6 +136,16 @@
 
 			loader.onComplete = function( e ) {
 
+				audioListener = loader.audioListener;
+
+				soundFilter = audioListener.context.createBiquadFilter();
+				soundFilter.type = 'lowpass';
+				soundFilter.Q.value = 10;
+				soundFilter.frequency.value = 440;	
+
+				soundArea = loader.getSound3D("Point002");
+				collisionArea = loader.getMesh("Torus003");
+
 				animate();
 
 			};
@@ -302,6 +314,8 @@
 			
 			function init() {
 
+				raycaster = new THREE.Raycaster();
+
 				scene = new THREE.Scene();
 				velocity = new THREE.Vector3();
 				
@@ -387,12 +401,50 @@
 
 			}
 
+			var clock = new THREE.Clock();
+			var audioPos = new THREE.Vector3();			
+			var audioRot = new THREE.Euler();
+
+			function updateSoundFilter( collision, sound3d ) {
+
+				// difference position between sound and listener
+				var difPos = new THREE.Vector3().setFromMatrixPosition( sound3d.matrixWorld ).sub(audioPos);	
+				var length = difPos.length();
+
+				// pick a vector from camera to sound
+				raycaster.set( audioPos, difPos.normalize() );
+
+				// intersecting sound1
+				if ( length > 50 && raycaster.intersectObjects( [collision] ).length ) {
+
+					if ( sound3d.getFilter() !== soundFilter ) sound3d.setFilter( soundFilter );
+
+				} else if ( sound3d.getFilter() !== undefined ) {
+
+					sound3d.setFilter();
+
+				}
+
+			}
+
+			//
+
 			function animate() {
 
 				var delta = clock.getDelta();
 				
 				animateCamera( delta );
 
+				// Sound3D Spatial Transform Update
+				loader.audioListener.position.copy( audioPos.setFromMatrixPosition( camera.matrixWorld ) );
+				loader.audioListener.rotation.copy( audioRot.setFromRotationMatrix( camera.matrixWorld ) );
+
+				// Update sound filter from raycaster intersecting				
+				updateSoundFilter( collisionArea, soundArea );
+
+				// Update SEA3D Animations
+				THREE.SEA3D.AnimationHandler.update( delta );				
+
 				render( delta );
 
 				stats.update();
@@ -401,18 +453,8 @@
 
 			}
 
-			var clock = new THREE.Clock();
-
 			function render( delta ) {
 
-				THREE.AnimationHandler.update( delta );
-
-				// SEA3D Keyframe Update		
-				SEA3D.AnimationHandler.update( delta ); 
-
-				// Sound Update
-				THREE.Sound3D.update( camera );
-
 				//renderer.render( scene, camera );
 				composer.render( delta );
 

src/extras/audio/Audio.js

@@ -21,6 +21,7 @@ THREE.Audio = function ( listener ) {
 	this.autoplay = false;
 
 	this.startTime = 0;
+	this.playbackRate = 1;
 	this.isPlaying = false;
 
 };
@@ -66,13 +67,15 @@ THREE.Audio.prototype.play = function () {
 	source.buffer = this.source.buffer;
 	source.loop = this.source.loop;
 	source.onended = this.source.onended;
-	source.connect( this.panner );
 	source.start( 0, this.startTime );
+	source.playbackRate.value = this.playbackRate;
 	
 	this.isPlaying = true;
 
 	this.source = source;
 	
+	this.connect();
+
 };
 
 THREE.Audio.prototype.pause = function () {
@@ -89,6 +92,72 @@ THREE.Audio.prototype.stop = function () {
 
 };
 
+THREE.Audio.prototype.connect = function () {
+
+	if ( this.filter !== undefined ) {
+			
+		this.source.connect( this.filter );
+		this.filter.connect( this.panner );
+
+	} else {
+
+		this.source.connect( this.panner );		
+
+	}
+
+};
+
+THREE.Audio.prototype.disconnect = function () {
+
+	if ( this.filter !== undefined ) {
+			
+		this.source.disconnect( this.filter );
+		this.filter.disconnect( this.panner );
+
+	} else {
+
+		this.source.disconnect( this.panner );		
+
+	}
+
+};
+
+THREE.Audio.prototype.setFilter = function ( value ) {
+	
+	if (this.isPlaying) {
+
+		this.disconnect();		
+		this.filter = value;
+		this.connect();
+
+	} else {
+
+		this.filter = value;
+
+	}
+
+};
+
+THREE.Audio.prototype.getFilter = function () {
+
+	return this.filter;
+
+};
+
+THREE.Audio.prototype.setPlaybackRate = function ( value ) {
+
+	this.playbackRate = value;
+
+	if (this.isPlaying) source.playbackRate.value = this.playbackRate;
+
+};
+
+THREE.Audio.prototype.getPlaybackRate = function () {
+
+	return this.playbackRate;
+
+};
+
 THREE.Audio.prototype.onEnded = function() {
 
 	this.isPlaying = false;
@@ -101,24 +170,48 @@ THREE.Audio.prototype.setLoop = function ( value ) {
 
 };
 
+THREE.Audio.prototype.getLoop = function () {
+
+	return this.source.loop;
+
+};
+
 THREE.Audio.prototype.setRefDistance = function ( value ) {
 
 	this.panner.refDistance = value;
 
 };
 
+THREE.Audio.prototype.getRefDistance = function () {
+
+	return this.panner.refDistance;
+
+};
+
 THREE.Audio.prototype.setRolloffFactor = function ( value ) {
 
 	this.panner.rolloffFactor = value;
 
 };
 
+THREE.Audio.prototype.getRolloffFactor = function () {
+
+	return this.panner.rolloffFactor;
+
+};
+
 THREE.Audio.prototype.setVolume = function ( value ) {
 
 	this.gain.gain.value = value;
 
 };
 
+THREE.Audio.prototype.getVolume = function () {
+
+	return this.gain.gain.value;
+
+};
+
 THREE.Audio.prototype.updateMatrixWorld = ( function () {
 
 	var position = new THREE.Vector3();