首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

sea3d update (#8892)

* node material r5 + mirror nodes example

* threejs.min in node material examples

* sea3d update

* reverted to un-minified

* update mrdoob EventDispatcher.js

* fix eventdispatcher update

* proto defines replace by Object.assign

* native script support transferred to loader

* sound filters support

* light intensity from sound amplitude

* keep .setFilter() method

* get freq amplitude average

* cleanup

* use THREE.AudioAnalyser to get amplitude
sunag 9 年之前
父节点
8ebfc03c4a
当前提交
0eaaa84564
共有 25 个文件被更改，包括 965 次插入 和 1533 次删除
合并视图 显示文件统计
  1. 116 1091
      examples/js/loaders/sea3d/SEA3D.js
  2. 10 7
      examples/js/loaders/sea3d/SEA3DLegacy.js
  3. 691 338
      examples/js/loaders/sea3d/SEA3DLoader.js
  4. 二进制
      examples/models/sea3d/flag.sea
  5. 二进制
      examples/models/sea3d/flag.tjs.sea
  6. 二进制
      examples/models/sea3d/keyframe.sea
  7. 二进制
      examples/models/sea3d/keyframe.tjs.sea
  8. 二进制
      examples/models/sea3d/mascot.sea
  9. 二进制
      examples/models/sea3d/mascot.tjs.sea
  10. 二进制
      examples/models/sea3d/morph.sea
  11. 二进制
      examples/models/sea3d/morph.tjs.sea
  12. 二进制
      examples/models/sea3d/robot.sea
  13. 二进制
      examples/models/sea3d/robot.tjs.sea
  14. 二进制
      examples/models/sea3d/skin.sea
  15. 二进制
      examples/models/sea3d/skin.tjs.sea
  16. 二进制
      examples/models/sea3d/sound.sea
  17. 二进制
      examples/models/sea3d/sound.tjs.sea
  18. 1 13
      examples/webgl_loader_sea3d.html
  19. 9 10
      examples/webgl_loader_sea3d_hierarchy.html
  20. 21 31
      examples/webgl_loader_sea3d_keyframe.html
  21. 6 8
      examples/webgl_loader_sea3d_morph.html
  22. 9 7
      examples/webgl_loader_sea3d_skinning.html
  23. 29 10
      examples/webgl_loader_sea3d_sound.html
  24. 57 18
      src/audio/Audio.js
  25. 16 0
      src/audio/AudioAnalyser.js

文件差异内容过多而无法显示
+ 116 - 1091
examples/js/loaders/sea3d/SEA3D.js


+ 10 - 7
examples/js/loaders/sea3d/SEA3DLegacy.js
查看文件 

@@ -528,7 +528,7 @@ THREE.SEA3D.prototype.getSkeletonAnimationLegacy = function( sea, skl ) {
 
 		if ( sea.tag ) return sea.tag;
 
 		if ( sea.tag ) return sea.tag;
 
 
 
 		var animations = [],
 
 		var animations = [],
 
-			delta = sea.frameRate / 1000,
 
+			delta = ( 1000 / sea.frameRate ) / 1000,
 
 			scale = [ 1, 1, 1 ];
 
 			scale = [ 1, 1, 1 ];
 
 
 
 		for ( var i = 0; i < sea.sequence.length; i ++ ) {
 
 		for ( var i = 0; i < sea.sequence.length; i ++ ) {
 
@@ -537,14 +537,13 @@ THREE.SEA3D.prototype.getSkeletonAnimationLegacy = function( sea, skl ) {
 
 
 
 			var start = seq.start;
 
 			var start = seq.start;
 
 			var end = start + seq.count;
 
 			var end = start + seq.count;
 
-			var ns = sea.name + "/" + seq.name;
 
 
 
 			var animation = {
 
 			var animation = {
 
-				name: ns,
 
+				name: seq.name,
 
 				repeat: seq.repeat,
 
 				repeat: seq.repeat,
 
 				fps: sea.frameRate,
 
 				fps: sea.frameRate,
 
 				JIT: 0,
 
 				JIT: 0,
 
-				length: delta * ( seq.count - 1 ),
 
+				length: delta * seq.count,
 
 				hierarchy: []
 
 				hierarchy: []
 
 			};
 
 			};
 
 
 
@@ -614,7 +613,11 @@ THREE.SEA3D.prototype.getSkeletonAnimationLegacy = function( sea, skl ) {
 
 
 
 			}
 
 			}
 
 
 
-			animations.push( animation );
 
+			var anm = THREE.AnimationClip.parseAnimation( animation, skl.tag );
 
+			anm.loop = seq.repeat;
 
+			anm.timeScale = 1;
 
+
 
+			animations.push( anm );
 
 
 
 		}
 
 		}
 
 
 
@@ -679,7 +682,7 @@ THREE.SEA3D.prototype.onHead = function( args ) {
 
 
 
 };
 
 };
 
 
 
-THREE.SEA3D.EXTENSIONS.push( function() {
 
+THREE.SEA3D.EXTENSIONS_LOADER.push( { setTypeRead: function() {
 
 
 
 	// CONFIG
 
 	// CONFIG
 
 
 
@@ -687,4 +690,4 @@ THREE.SEA3D.EXTENSIONS.push( function() {
 
 
 
 	this.file.typeRead[ SEA3D.Skeleton.prototype.type ] = this.readSkeleton;
 
 	this.file.typeRead[ SEA3D.Skeleton.prototype.type ] = this.readSkeleton;
 
 
 
-} );
 
+} } );

文件差异内容过多而无法显示
+ 691 - 338
examples/js/loaders/sea3d/SEA3DLoader.js


二进制
examples/models/sea3d/flag.sea
查看文件


二进制
examples/models/sea3d/flag.tjs.sea
查看文件


二进制
examples/models/sea3d/keyframe.sea
查看文件


二进制
examples/models/sea3d/keyframe.tjs.sea
查看文件


二进制
examples/models/sea3d/mascot.sea
查看文件


二进制
examples/models/sea3d/mascot.tjs.sea
查看文件


二进制
examples/models/sea3d/morph.sea
查看文件


二进制
examples/models/sea3d/morph.tjs.sea
查看文件


二进制
examples/models/sea3d/robot.sea
查看文件


二进制
examples/models/sea3d/robot.tjs.sea
查看文件


二进制
examples/models/sea3d/skin.sea
查看文件


二进制
examples/models/sea3d/skin.tjs.sea
查看文件


二进制
examples/models/sea3d/sound.sea
查看文件


二进制
examples/models/sea3d/sound.tjs.sea
查看文件


+ 1 - 13
examples/webgl_loader_sea3d.html
查看文件 

@@ -28,16 +28,11 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<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>
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - asset by <a href="https://github.com/sunag/sea3d" style="color:#FFFFF" target="_blank">sea3d</a>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 
 
-		<script src="js/MorphAnimMesh.js"></script>
 
-		<script src="js/loaders/collada/Animation.js"></script>
 
-		<script src="js/loaders/collada/AnimationHandler.js"></script>
 
-		<script src="js/loaders/collada/KeyFrameAnimation.js"></script>
 
-
 
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/controls/OrbitControls.js"></script>
 
 
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 
@@ -140,10 +135,6 @@
 
 				composer.addPass( copyPass );
 
 				composer.addPass( copyPass );
 
 				copyPass.renderToScreen = true;
 
 				copyPass.renderToScreen = true;
 
 
 
-				// extra lights
 
-
 
-				scene.add( new THREE.AmbientLight( 0x333333 ) );
 
-
 
 				// events
 
 				// events
 
 
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -174,9 +165,6 @@
 
 				// Update SEA3D Animations
 
 				// Update SEA3D Animations
 
 				THREE.SEA3D.AnimationHandler.update( delta );
 
 				THREE.SEA3D.AnimationHandler.update( delta );
 
 
 
-				// Update Three.JS Animations
 
-				THREE.AnimationHandler.update( delta );
 
-
 
 				render( delta );
 
 				render( delta );
 
 
 
 				stats.update();
 
 				stats.update();

+ 9 - 10
examples/webgl_loader_sea3d_hierarchy.html
查看文件 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - sea3d</title>
 
+		<title>three.js webgl - sea3d / hierarchy</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
@@ -28,7 +28,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<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>
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - asset by <a href="https://github.com/sunag/sea3d" style="color:#FFFFF" target="_blank">sea3d</a>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
@@ -43,14 +43,10 @@
 
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 
 		<script src="js/shaders/VignetteShader.js"></script>
 
 		<script src="js/shaders/VignetteShader.js"></script>
 
 
 
-		<script src="js/MorphAnimMesh.js"></script>
 
-		<script src="js/loaders/collada/Animation.js"></script>
 
-
 
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
 
 
 
-
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 
@@ -81,13 +77,13 @@
 
 
 
 			loader.onComplete = function( e ) {
 
 			loader.onComplete = function( e ) {
 
 
 
-				// reset global time
 
-				SEA3D.AnimationHandler.setTime( 0 );
 
-
 
 				// play all animations
 
 				// play all animations
 
+
 
 				for(var i = 0; i < loader.meshes.length; i++) {
 
 				for(var i = 0; i < loader.meshes.length; i++) {
 
+
 
 					if (loader.meshes[i].animation)
 
 					if (loader.meshes[i].animation)
 
-						loader.meshes[i].animation.play("root");
 
+						loader.meshes[i].animation.play( "root" );
 
+
 
 				}
 
 				}
 
 
 
 				// Get the first camera from SEA3D Studio
 
 				// Get the first camera from SEA3D Studio
 
@@ -120,6 +116,9 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setClearColor( 0x333333, 1 );
 
 				renderer.setClearColor( 0x333333, 1 );
 
+				renderer.shadowMap.enabled = true;
 
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
+				renderer.shadowMap.cullFace = THREE.CullFaceBack;
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();

+ 21 - 31
examples/webgl_loader_sea3d_keyframe.html
查看文件 

@@ -28,7 +28,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<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>
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - asset by <a href="https://github.com/sunag/sea3d" style="color:#FFFFF" target="_blank">sea3d</a>
 
 			<div id="description">Click to play</div>
 
 			<div id="description">Click to play</div>
 
 		</div>
 
 		</div>
 
 
 
@@ -44,9 +44,6 @@
 
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 
 		<script src="js/shaders/VignetteShader.js"></script>
 
 		<script src="js/shaders/VignetteShader.js"></script>
 
 
 
-		<script src="js/MorphAnimMesh.js"></script>
 
-		<script src="js/loaders/collada/Animation.js"></script>
 
-
 
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
 
@@ -90,9 +87,6 @@
 
 
 
 				controls = new THREE.OrbitControls( camera );
 
 				controls = new THREE.OrbitControls( camera );
 
 
 
-				// reset global animation time
 
-				SEA3D.AnimationHandler.setTime( 0 );
 
-
 
 				// events
 
 				// events
 
 
 
 				window.addEventListener('click', onMouseClick, false);
 
 				window.addEventListener('click', onMouseClick, false);
 
@@ -107,35 +101,38 @@
 
 			//	Animation Functions
 
 			//	Animation Functions
 
 			//
 
 			//
 
 
 
-			function playAll(name, crossfade, offset) {
 
-
 
-				// reset global time
 
-				SEA3D.AnimationHandler.setTime( 0 );
 
+			function playAll(id, crossfade, offset) {
 
 
 
 				// play all animations
 
 				// play all animations
 
+
 
 				for(var i = 0; i < loader.meshes.length; i++) {
 
 				for(var i = 0; i < loader.meshes.length; i++) {
 
+
 
 					if (loader.meshes[i].animation)
 
 					if (loader.meshes[i].animation)
 
-						loader.meshes[i].animation.play(name, crossfade, offset);
 
+						loader.meshes[i].animation.play(id, crossfade, offset);
 
+
 
 				}
 
 				}
 
 
 
 			}
 
 			}
 
 
 
 			function setTimeScale( timeScale ) {
 
 			function setTimeScale( timeScale ) {
 
 
 
-				// set in all active animations
 
-				for(var i in SEA3D.AnimationHandler.animations) {
 
-					SEA3D.AnimationHandler.animations[i].timeScale = timeScale;
 
+				for(var i = 0; i < loader.meshes.length; i++) {
 
+
 
+					if (loader.meshes[i].animation)
 
+						loader.meshes[i].animation.setTimeScale( timeScale );
 
+
 
 				}
 
 				}
 
 
 
 			}
 
 			}
 
 
 
 			function stopAll() {
 
 			function stopAll() {
 
 
 
-				// reset global time
 
-				SEA3D.AnimationHandler.setTime( 0 );
 
+				for(var i = 0; i < loader.meshes.length; i++) {
 
 
 
-				// stop all active animations
 
-				SEA3D.AnimationHandler.stop();
 
+					if (loader.meshes[i].animation)
 
+						loader.meshes[i].animation.stop();
 
+
 
+				}
 
 
 
 			}
 
 			}
 
 
 
@@ -182,10 +179,6 @@
 
 				composer.addPass( copyPass );
 
 				composer.addPass( copyPass );
 
 				copyPass.renderToScreen = true;
 
 				copyPass.renderToScreen = true;
 
 
 
-				// extra lights
 
-
 
-				scene.add( new THREE.AmbientLight( 0x333333 ) );
 
-
 
 				// events
 
 				// events
 
 
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -246,18 +239,15 @@
 
 
 
 						var fracture99 = loader.getMesh("Object099");
 
 						var fracture99 = loader.getMesh("Object099");
 
 
 
-						//fracture99.animation.time = 0;
 
-						//fracture99.animation.timeScale = 1;
 
+						//fracture99.animation.setTimeScale( 1 );
 
 						//fracture99.animation.playing
 
 						//fracture99.animation.playing
 
-						//fracture99.animation.states ...
 
-						//fracture99.animation.currentState ...
 
-
 
-						//fracture99.animation.node ...
 
-						//fracture99.animation.node.duration
 
+						//fracture99.animation.currentAnimation
 
+						//fracture99.animation.previousAnimation
 
 
 
 						fracture99.animation.play("crash#2", .5, 0);
 
 						fracture99.animation.play("crash#2", .5, 0);
 
-						//fracture99.animation.pause();
 
 						//fracture99.animation.stop();
 
 						//fracture99.animation.stop();
 
+						//fracture99.animation.pause();
 
+						//fracture99.animation.resume();
 
 
 
 						description("crash#2 in single object - crossfade 0.5 seconds");
 
 						description("crash#2 in single object - crossfade 0.5 seconds");

+ 6 - 8
examples/webgl_loader_sea3d_morph.html
查看文件 

@@ -28,7 +28,8 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<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>
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - asset by <a href="https://github.com/sunag/sea3d" style="color:#FFFFF" target="_blank">sea3d</a>
 
+			<div id="description">Flag is Vertex Animation / Teapot is Morpher</div>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
@@ -43,9 +44,6 @@
 
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 
 		<script src="js/shaders/ColorCorrectionShader.js"></script>
 
 		<script src="js/shaders/VignetteShader.js"></script>
 
 		<script src="js/shaders/VignetteShader.js"></script>
 
 
 
-		<script src="js/MorphAnimMesh.js"></script>
 
-		<script src="js/loaders/collada/Animation.js"></script>
 
-
 
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3D.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
 
 		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
 
@@ -90,6 +88,7 @@
 
 				controls = new THREE.OrbitControls( camera );
 
 				controls = new THREE.OrbitControls( camera );
 
 
 
 				// get mesh
 
 				// get mesh
 
+
 
 				teapot = loader.getMesh("Teapot01");
 
 				teapot = loader.getMesh("Teapot01");
 
 
 
 				// events
 
 				// events
 
@@ -145,10 +144,6 @@
 
 				composer.addPass( copyPass );
 
 				composer.addPass( copyPass );
 
 				copyPass.renderToScreen = true;
 
 				copyPass.renderToScreen = true;
 
 
 
-				// extra lights
 
-
 
-				scene.add( new THREE.AmbientLight( 0x333333 ) );
 
-
 
 				// events
 
 				// events
 
 
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -187,6 +182,9 @@
 
 
 
 				requestAnimationFrame( animate );
 
 				requestAnimationFrame( animate );
 
 
 
+				// Update SEA3D Animations
 
+				THREE.SEA3D.AnimationHandler.update( delta );
 
+
 
 				render( delta );
 
 				render( delta );
 
 
 
 				stats.update();
 
 				stats.update();

+ 9 - 7
examples/webgl_loader_sea3d_skinning.html
查看文件 

@@ -28,7 +28,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<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>
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - asset by <a href="https://github.com/sunag/sea3d" style="color:#FFFFF" target="_blank">sea3d</a>
 
 			<br/>BoneObject: Object3D attached in a Bone
 
 			<br/>BoneObject: Object3D attached in a Bone
 
 			<br/>Click to hidden/show the hat - Right click to run
 
 			<br/>Click to hidden/show the hat - Right click to run
 
 		</div>
 
 		</div>
 
@@ -96,11 +96,17 @@
 
 
 
 				// get meshes
 
 				// get meshes
 
 				player = loader.getMesh("Player");
 
 				player = loader.getMesh("Player");
 
-
 
 				hat = loader.getMesh("Hat");
 
 				hat = loader.getMesh("Hat");
 
 
 
 				// events
 
 				// events
 
 
 
+				// on animation complete example
 
+				player.animationsData['pass#1'].onComplete = function() {
 
+
 
+					console.log("Animation completed!");
 
+
 
+				}
 
+
 
 				window.addEventListener( 'click', onMouseClick, false );
 
 				window.addEventListener( 'click', onMouseClick, false );
 
 				window.addEventListener( 'contextmenu', onRightClick, false );
 
 				window.addEventListener( 'contextmenu', onRightClick, false );
 
 
 
@@ -153,10 +159,6 @@
 
 				composer.addPass( copyPass );
 
 				composer.addPass( copyPass );
 
 				copyPass.renderToScreen = true;
 
 				copyPass.renderToScreen = true;
 
 
 
-				// extra lights
 
-
 
-				scene.add( new THREE.AmbientLight( 0x333333 ) );
 
-
 
 				// events
 
 				// events
 
 
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -167,7 +169,7 @@
 
 
 
 				// play character animation
 
 				// play character animation
 
 				if (player.currentAnimation.name == "idle")
 
 				if (player.currentAnimation.name == "idle")
 
-					player.play("run", .5);
 
+					player.play("run", .5);// play "pass#1" to caller .onComplete animation example
 
 				else
 
 				else
 
 					player.play("idle", .5);
 
 					player.play("idle", .5);

+ 29 - 10
examples/webgl_loader_sea3d_sound.html
查看文件 

@@ -67,7 +67,7 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<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>
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - asset by <a href="https://github.com/sunag/sea3d" style="color:#FFFFF" target="_blank">sea3d</a>
 
 		</div>
 
 		</div>
 
 
 
 		<div id="blocker">
 
 		<div id="blocker">
 
@@ -115,8 +115,8 @@
 
 			initKeyDown
 
 			initKeyDown
 
 
 
 			var loader;
 
 			var loader;
 
-			var audioListener, soundFilter;
 
-			var soundArea, collisionArea;
 
+			var audioListener, soundFilter, soundAreaAnalyser, soundOutsideAnalyser;
 
+			var soundArea, collisionArea, lightArea, lightOutside;
 
 
 
 			// Initialize Three.JS
 
 			// Initialize Three.JS
 
 
 
@@ -139,12 +139,27 @@
 
 
 
 				audioListener = loader.audioListener;
 
 				audioListener = loader.audioListener;
 
 
 
+				// sound filter
 
+
 
 				soundFilter = audioListener.context.createBiquadFilter();
 
 				soundFilter = audioListener.context.createBiquadFilter();
 
 				soundFilter.type = 'lowpass';
 
 				soundFilter.type = 'lowpass';
 
 				soundFilter.Q.value = 10;
 
 				soundFilter.Q.value = 10;
 
 				soundFilter.frequency.value = 440;
 
 				soundFilter.frequency.value = 440;
 
 
 
+				// sound asset 1
 
+
 
+				lightOutside = loader.getLight("Light1");
 
+
 
+				soundOutside = loader.getSound3D("Point001");
 
+				soundOutsideAnalyser = new THREE.AudioAnalyser( soundOutside, 512 );
 
+
 
+				// sound asset 2 + area
 
+
 
+				lightArea = loader.getLight("Light2");
 
+
 
 				soundArea = loader.getSound3D("Point002");
 
 				soundArea = loader.getSound3D("Point002");
 
+				soundAreaAnalyser = new THREE.AudioAnalyser( soundArea, 512 );
 
+
 
 				collisionArea = loader.getMesh("Torus003");
 
 				collisionArea = loader.getMesh("Torus003");
 
 
 
 				animate();
 
 				animate();
 
@@ -405,23 +420,23 @@
 
 			var audioPos = new THREE.Vector3();
 
 			var audioPos = new THREE.Vector3();
 
 			var audioRot = new THREE.Euler();
 
 			var audioRot = new THREE.Euler();
 
 
 
-			function updateSoundFilter( collision, sound3d ) {
 
+			function updateSoundFilter() {
 
 
 
 				// difference position between sound and listener
 
 				// difference position between sound and listener
 
-				var difPos = new THREE.Vector3().setFromMatrixPosition( sound3d.matrixWorld ).sub(audioPos);
 
+				var difPos = new THREE.Vector3().setFromMatrixPosition( soundArea.matrixWorld ).sub(audioPos);
 
 				var length = difPos.length();
 
 				var length = difPos.length();
 
 
 
 				// pick a vector from camera to sound
 
 				// pick a vector from camera to sound
 
 				raycaster.set( audioPos, difPos.normalize() );
 
 				raycaster.set( audioPos, difPos.normalize() );
 
 
 
 				// intersecting sound1
 
 				// intersecting sound1
 
-				if ( length > 50 && raycaster.intersectObjects( [collision] ).length ) {
 
+				if ( length > 50 && raycaster.intersectObjects( [collisionArea] ).length ) {
 
 
 
-					if ( sound3d.getFilter() !== soundFilter ) sound3d.setFilter( soundFilter );
 
+					if ( soundArea.getFilters()[0] !== soundFilter ) soundArea.setFilters( [ soundFilter ] );
 
 
 
-				} else if ( sound3d.getFilter() !== undefined ) {
 
+				} else if ( soundArea.getFilters()[0] === soundFilter ) {
 
 
 
-					sound3d.setFilter();
 
+					soundArea.setFilters( [] );
 
 
 
 				}
 
 				}
 
 
 
@@ -440,7 +455,11 @@
 
 				loader.audioListener.rotation.copy( audioRot.setFromRotationMatrix( camera.matrixWorld ) );
 
 				loader.audioListener.rotation.copy( audioRot.setFromRotationMatrix( camera.matrixWorld ) );
 
 
 
 				// Update sound filter from raycaster intersecting
 
 				// Update sound filter from raycaster intersecting
 
-				updateSoundFilter( collisionArea, soundArea );
 
+				updateSoundFilter();
 
+
 
+				// light intensity from sound amplitude
 
+				lightOutside.intensity = soundOutsideAnalyser.getAverage() / 50;
 
+				lightArea.intensity = soundAreaAnalyser.getAverage() / 50;
 
 
 
 				// Update SEA3D Animations
 
 				// Update SEA3D Animations
 
 				THREE.SEA3D.AnimationHandler.update( delta );
 
 				THREE.SEA3D.AnimationHandler.update( delta );

+ 57 - 18
src/audio/Audio.js
查看文件 

@@ -24,7 +24,7 @@ THREE.Audio = function ( listener ) {
 
 	this.hasPlaybackControl = true;
 
 	this.hasPlaybackControl = true;
 
 	this.sourceType = 'empty';
 
 	this.sourceType = 'empty';
 
 
 
-	this.filter = null;
 
+	this.filters = [];
 
 
 
 };
 
 };
 
 
 
@@ -51,11 +51,10 @@ THREE.Audio.prototype = Object.assign( Object.create( THREE.Object3D.prototype )
 
 
 
 	setBuffer: function ( audioBuffer ) {
 
 	setBuffer: function ( audioBuffer ) {
 
 
 
-		var scope = this;
 
+		this.source.buffer = audioBuffer;
 
+		this.sourceType = 'buffer';
 
 
 
-		scope.source.buffer = audioBuffer;
 
-		scope.sourceType = 'buffer';
 
-		if ( scope.autoplay ) scope.play();
 
+		if ( this.autoplay ) this.play();
 
 
 
 		return this;
 
 		return this;
 
 
 
@@ -89,7 +88,7 @@ THREE.Audio.prototype = Object.assign( Object.create( THREE.Object3D.prototype )
 
 
 
 		this.source = source;
 
 		this.source = source;
 
 
 
-		this.connect();
 
+		return this.connect();
 
 
 
 	},
 
 	},
 
 
 
@@ -105,6 +104,8 @@ THREE.Audio.prototype = Object.assign( Object.create( THREE.Object3D.prototype )
 
 		this.source.stop();
 
 		this.source.stop();
 
 		this.startTime = this.context.currentTime;
 
 		this.startTime = this.context.currentTime;
 
 
 
+		return this;
 
+
 
 	},
 
 	},
 
 
 
 	stop: function () {
 
 	stop: function () {
 
@@ -119,14 +120,23 @@ THREE.Audio.prototype = Object.assign( Object.create( THREE.Object3D.prototype )
 
 		this.source.stop();
 
 		this.source.stop();
 
 		this.startTime = 0;
 
 		this.startTime = 0;
 
 
 
+		return this;
 
+
 
 	},
 
 	},
 
 
 
 	connect: function () {
 
 	connect: function () {
 
 
 
-		if ( this.filter !== null ) {
 
+		if ( this.filters.length > 0 ) {
 
+
 
+			this.source.connect( this.filters[ 0 ] );
 
+
 
+			for ( var i = 1, l = this.filters.length; i < l; i ++ ) {
 
+
 
+				this.filters[ i - 1 ].connect( this.filters[ i ] );
 
+
 
+			}
 
 
 
-			this.source.connect( this.filter );
 
-			this.filter.connect( this.getOutput() );
 
+			this.filters[ this.filters.length - 1 ].connect( this.getOutput() );
 
 
 
 		} else {
 
 		} else {
 
 
 
@@ -134,14 +144,23 @@ THREE.Audio.prototype = Object.assign( Object.create( THREE.Object3D.prototype )
 
 
 
 		}
 
 		}
 
 
 
+		return this;
 
+
 
 	},
 
 	},
 
 
 
 	disconnect: function () {
 
 	disconnect: function () {
 
 
 
-		if ( this.filter !== null ) {
 
+		if ( this.filters.length > 0 ) {
 
+
 
+			this.source.disconnect( this.filters[ 0 ] );
 
+
 
+			for ( var i = 1, l = this.filters.length; i < l; i ++ ) {
 
 
 
-			this.source.disconnect( this.filter );
 
-			this.filter.disconnect( this.getOutput() );
 
+				this.filters[ i - 1 ].disconnect( this.filters[ i ] );
 
+
 
+			}
 
+
 
+			this.filters[ this.filters.length - 1 ].disconnect( this.getOutput() );
 
 
 
 		} else {
 
 		} else {
 
 
 
@@ -149,30 +168,46 @@ THREE.Audio.prototype = Object.assign( Object.create( THREE.Object3D.prototype )
 
 
 
 		}
 
 		}
 
 
 
+		return this;
 
+
 
 	},
 
 	},
 
 
 
-	getFilter: function () {
 
+	getFilters: function () {
 
 
 
-		return this.filter;
 
+		return this.filters;
 
 
 
 	},
 
 	},
 
 
 
-	setFilter: function ( value ) {
 
+	setFilters: function ( value ) {
 
 
 
-		if ( value === undefined ) value = null;
 
+		if ( ! value ) value = [];
 
 
 
 		if ( this.isPlaying === true ) {
 
 		if ( this.isPlaying === true ) {
 
 
 
 			this.disconnect();
 
 			this.disconnect();
 
-			this.filter = value;
 
+			this.filters = value;
 
 			this.connect();
 
 			this.connect();
 
 
 
 		} else {
 
 		} else {
 
 
 
-			this.filter = value;
 
+			this.filters = value;
 
 
 
 		}
 
 		}
 
 
 
+		return this;
 
+
 
+	},
 
+
 
+	getFilter: function () {
 
+
 
+		return this.getFilters()[ 0 ];
 
+
 
+	},
 
+
 
+	setFilter: function ( filter ) {
 
+
 
+		return this.setFilters( filter ? [ filter ] : [] );
 
+
 
 	},
 
 	},
 
 
 
 	setPlaybackRate: function ( value ) {
 
 	setPlaybackRate: function ( value ) {
 
@@ -192,6 +227,8 @@ THREE.Audio.prototype = Object.assign( Object.create( THREE.Object3D.prototype )
 
 
 
 		}
 
 		}
 
 
 
+		return this;
 
+
 
 	},
 
 	},
 
 
 
 	getPlaybackRate: function () {
 
 	getPlaybackRate: function () {
 
@@ -243,6 +280,8 @@ THREE.Audio.prototype = Object.assign( Object.create( THREE.Object3D.prototype )
 
 
 
 		this.gain.gain.value = value;
 
 		this.gain.gain.value = value;
 
 
 
+		return this;
 
+
 
 	}
 
 	}
 
 
 
 } );
 
 } );

+ 16 - 0
src/audio/AudioAnalyser.js
查看文件 

@@ -20,6 +20,22 @@ Object.assign( THREE.AudioAnalyser.prototype, {
 
 		this.analyser.getByteFrequencyData( this.data );
 
 		this.analyser.getByteFrequencyData( this.data );
 
 		return this.data;
 
 		return this.data;
 
 
 
+	},
 
+
 
+	getAverage: function() {
 
+
 
+		var values = 0, data = this.getData();
 
+
 
+		// get all the frequency amplitudes
 
+
 
+		for (var i = 0; i < data.length; i++) {
 
+
 
+			values += data[ i ];
 
+
 
+		}
 
+
 
+		return values / data.length;
 
+
 
 	}
 
 	}
 
 
 
 } );
 
 } );

部分文件因为文件数量过多而无法显示