From 5eb7b3a42aab0d6903fa5cc587c0c3ee08d5466f Mon Sep 17 00:00:00 2001 From: Jean Carlo Deconto Date: Mon, 27 Jul 2015 14:06:18 -0300 Subject: [PATCH] sea3d revision 2 --- examples/index.html | 1 + examples/js/loaders/sea3d/SEA3DLoader.js | 760 +++++++++++---------- examples/models/sea3d/sound.sea | Bin 168129 -> 168222 bytes examples/webgl_loader_sea3d.html | 30 +- examples/webgl_loader_sea3d_hierarchy.html | 26 +- examples/webgl_loader_sea3d_keyframe.html | 33 +- examples/webgl_loader_sea3d_morph.html | 207 ++++++ examples/webgl_loader_sea3d_skinning.html | 33 +- examples/webgl_loader_sea3d_sound.html | 68 +- 9 files changed, 729 insertions(+), 429 deletions(-) create mode 100644 examples/webgl_loader_sea3d_morph.html diff --git a/examples/index.html b/examples/index.html index cd034b5b8f..5cffdbc695 100644 --- a/examples/index.html +++ b/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", diff --git a/examples/js/loaders/sea3d/SEA3DLoader.js b/examples/js/loaders/sea3d/SEA3DLoader.js index 5038bff601..ad30961105 100644 --- a/examples/js/loaders/sea3d/SEA3DLoader.js +++ b/examples/js/loaders/sea3d/SEA3DLoader.js @@ -5,11 +5,42 @@ * http://sea3d.poonya.com/ */ +// +// SEA3D +// + +THREE.SEA3D = function(config) { + this.config = config || {}; + + if (this.config.autoPlay === undefined) this.config.autoPlay = false; + if (this.config.flip === undefined) this.config.flip = true; + if (this.config.parser == undefined) this.config.parser = THREE.SEA3D.AUTO; + if (this.config.multiplier == undefined) this.config.multiplier = 1; + if (this.config.tangent == undefined) this.config.tangent = true; + if (this.config.bounding == undefined) this.config.bounding = true; + if (this.config.standardMaterial == undefined) this.config.standardMaterial = true; + if (this.config.audioRolloffFactor == undefined) this.config.audioRolloffFactor = 10; + + this.container = this.config.container || new THREE.Object3D(); + this.objects = {}; +} + +THREE.SEA3D.prototype = { + constructor: THREE.SEA3D, + + addEventListener: THREE.EventDispatcher.prototype.addEventListener, + hasEventListener: THREE.EventDispatcher.prototype.hasEventListener, + removeEventListener: THREE.EventDispatcher.prototype.removeEventListener, + dispatchEvent: THREE.EventDispatcher.prototype.dispatchEvent +} + // // Shader // -THREE.ShaderLib.replaceCode = function(src, target, replace) { +THREE.SEA3D.ShaderLib = {}; + +THREE.SEA3D.ShaderLib.replaceCode = function(src, target, replace) { for (var i = 0; i < target.length; i++) { var tar = target[i], rep = replace[i], @@ -20,59 +51,90 @@ THREE.ShaderLib.replaceCode = function(src, target, replace) { } return src; -} +}; + +// TODO: Emissive to Ambient Color Extension -THREE.ShaderLib['phong'].fragmentShader_StandardMaterial = - THREE.ShaderLib.replaceCode( THREE.ShaderLib['phong'].fragmentShader, [ - // Target - 'outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalAmbientLight ) * specular + totalSpecularLight + totalEmissiveLight;', // METAL - 'outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalAmbientLight ) + totalSpecularLight + totalEmissiveLight;' - ], [ - // Replace To - 'outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalAmbientLight + totalEmissiveLight ) * specular + totalSpecularLight;', // METAL - 'outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalAmbientLight + totalEmissiveLight ) + totalSpecularLight;' - ] ); +THREE.SEA3D.ShaderLib.fragStdMtl = THREE.SEA3D.ShaderLib.replaceCode( THREE.ShaderLib.phong.fragmentShader, [ + // Target + 'outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalAmbientLight ) * specular + totalSpecularLight + totalEmissiveLight;', // METAL + 'outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalAmbientLight ) + totalSpecularLight + totalEmissiveLight;' +], [ + // Replace To + 'outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalAmbientLight + totalEmissiveLight ) * specular + totalSpecularLight;', // METAL + 'outgoingLight += diffuseColor.rgb * ( totalDiffuseLight + totalAmbientLight + totalEmissiveLight ) + totalSpecularLight;' +] ); // -// Material ( Emissive to Ambient Color Extension ) +// Standard Material // -THREE.MeshPhongMaterial.prototype.emissiveToAmbientColor = false; +THREE.SEA3D.StandardMaterial = function () { -THREE.MeshPhongMaterial.prototype.CLONE = THREE.MeshPhongMaterial.prototype.clone; -THREE.MeshPhongMaterial.prototype.clone = function() { - var mat = this.CLONE(); - mat.emissiveToAmbientColor = this.emissiveToAmbientColor; - return mat; -} + THREE.MeshPhongMaterial.call( this ); + +}; + +THREE.SEA3D.StandardMaterial.prototype = Object.create( THREE.MeshPhongMaterial.prototype ); +THREE.SEA3D.StandardMaterial.prototype.constructor = THREE.SEA3D.StandardMaterial; + +THREE.SEA3D.StandardMaterial.prototype.copy = function ( source ) { -THREE.MeshPhongMaterial.prototype.__defineSetter__("__webglShader", function(val){ - if (this.emissiveToAmbientColor) val.fragmentShader = THREE.ShaderLib['phong'].fragmentShader_StandardMaterial; + THREE.MeshPhongMaterial.prototype.copy.call( this, source ); + + return this; + +}; + +THREE.SEA3D.StandardMaterial.prototype.clone = function() { + + return new THREE.SEA3D.StandardMaterial().copy( this ); + +}; + +THREE.SEA3D.StandardMaterial.prototype.__defineSetter__("__webglShader", function(val) { + + val.fragmentShader = THREE.SEA3D.ShaderLib.fragStdMtl; this.__webglShader__ = val; + }); -THREE.MeshPhongMaterial.prototype.__defineGetter__("__webglShader", function(){ + +THREE.SEA3D.StandardMaterial.prototype.__defineGetter__("__webglShader", function() { + return this.__webglShader__; + }); // -// Mesh +// Container // -// Local Animation -THREE.Object3D.prototype.UPDATEMATRIXWORLD = THREE.Mesh.prototype.updateMatrixWorld; -THREE.Object3D.prototype.updateMatrixWorld = function(force) { - if (this.animateMatrix) { - this.UPDATEMATRIXWORLD(force); - - this.animateMatrix.compose( this.animatePosition, this.animateQuaternion, this.animateScale ); - - this.matrixWorld.multiplyMatrices( this.matrixWorld, this.animateMatrix ); - } - else this.UPDATEMATRIXWORLD(force); -} +THREE.SEA3D.Object3D = function ( ) { + + THREE.Object3D.call( this ); + +}; + +THREE.SEA3D.Object3D.prototype = Object.create( THREE.Object3D.prototype ); +THREE.SEA3D.Object3D.prototype.constructor = THREE.SEA3D.Object3D; -THREE.Object3D.prototype.setAnimateMatrix = function(val) { - if (this.getAnimateMatrix() == val) return; +// Relative Animation Extension +// TODO: It can be done with shader + +THREE.SEA3D.Object3D.prototype.updateAnimateMatrix = function( force ) { + + THREE.Mesh.prototype.updateMatrixWorld.call( this, force ); + + this.animateMatrix.compose( this.animatePosition, this.animateQuaternion, this.animateScale ); + + this.matrixWorld.multiplyMatrices( this.matrixWorld, this.animateMatrix ); + +}; + +THREE.SEA3D.Object3D.prototype.setAnimateMatrix = function(val) { + + if (this.getAnimateMatrix() == val) + return; if (val) { this.animateMatrix = new THREE.Matrix4(); @@ -80,50 +142,106 @@ THREE.Object3D.prototype.setAnimateMatrix = function(val) { this.animatePosition = new THREE.Vector3(); this.animateQuaternion = new THREE.Quaternion(); this.animateScale = new THREE.Vector3(1,1,1); + + this.updateMatrixWorld = THREE.SEA3D.Object3D.prototype.updateAnimateMatrix; } else { delete this.animateMatrix; delete this.animatePosition; delete this.animateQuaternion; delete this.animateScale; + + this.updateMatrixWorld = THREE.Mesh.prototype.updateMatrixWorld; } this.matrixWorldNeedsUpdate = true; -} + +}; -THREE.Object3D.prototype.getAnimateMatrix = function() { +THREE.SEA3D.Object3D.prototype.getAnimateMatrix = function() { + return this.animateMatrix != null; -} + +}; + +// +// Mesh +// + +THREE.SEA3D.Mesh = function ( geometry, material ) { + + THREE.Mesh.call( this, geometry, material ); + +}; + +THREE.SEA3D.Mesh.prototype = Object.create( THREE.Mesh.prototype ); +THREE.SEA3D.Mesh.prototype.constructor = THREE.Mesh; -THREE.Mesh.prototype.setWeight = function(name, val) { +THREE.SEA3D.Mesh.prototype.setAnimateMatrix = THREE.SEA3D.Object3D.prototype.setAnimateMatrix; +THREE.SEA3D.Mesh.prototype.getAnimateMatrix = THREE.SEA3D.Object3D.prototype.getAnimateMatrix; + +THREE.SEA3D.Mesh.prototype.setWeight = function(name, val) { + this.morphTargetInfluences[ this.geometry.morphTargets[name] ] = val; -} -THREE.Mesh.prototype.getWeight = function(name) { +}; + +THREE.SEA3D.Mesh.prototype.getWeight = function(name) { + return this.morphTargetInfluences[ this.geometry.morphTargets[name] ]; -} -THREE.Mesh.prototype.DISPOSE = THREE.Mesh.prototype.dispose; -THREE.Mesh.prototype.dispose = function () { - if (this.animation) this.animation.dispose(); - this.DISPOSE(); -} +}; -THREE.Mesh.prototype.CLONE = THREE.Mesh.prototype.clone; -THREE.Mesh.prototype.clone = function ( object ) { - var cloned = THREE.Mesh.prototype.CLONE.call( this, object ); - - if (cloned.animation) - cloned.animation = this.animation.clone( cloned ); +THREE.SEA3D.Mesh.prototype.dispose = function () { + + if (this.animation) + this.animation.dispose(); + + this.animations = null; + + THREE.Mesh.prototype.dispose.call( this ); + +}; + +THREE.SEA3D.Mesh.prototype.copy = function ( source ) { + + THREE.Mesh.prototype.copy.call( this, source ); + + if (this.animation) + this.animation = source.animation.clone( this ); + + return this; + +}; + +THREE.SEA3D.Mesh.prototype.clone = function ( object ) { - return cloned; -} + return new THREE.SEA3D.Mesh( this.geometry, this.material ).copy( this ); + +}; // // Skinning // -THREE.SkinnedMesh.prototype.stop = function() { +THREE.SEA3D.SkinnedMesh = function ( geometry, material, useVertexTexture ) { + + THREE.SkinnedMesh.call( this, geometry, material, useVertexTexture ); + +}; + +THREE.SEA3D.SkinnedMesh.prototype = Object.create( THREE.SkinnedMesh.prototype ); +THREE.SEA3D.SkinnedMesh.prototype.constructor = THREE.SEA3D.SkinnedMesh; + +THREE.SEA3D.SkinnedMesh.prototype.setAnimateMatrix = THREE.SEA3D.Mesh.prototype.setAnimateMatrix; +THREE.SEA3D.SkinnedMesh.prototype.getAnimateMatrix = THREE.SEA3D.Mesh.prototype.getAnimateMatrix; + +THREE.SEA3D.SkinnedMesh.prototype.setWeight = THREE.SEA3D.Mesh.prototype.setWeight; +THREE.SEA3D.SkinnedMesh.prototype.getWeight = THREE.SEA3D.Mesh.prototype.getWeight; + +THREE.SEA3D.SkinnedMesh.prototype.isPlaying = false; + +THREE.SEA3D.SkinnedMesh.prototype.stop = function() { if (this.currentAnimation) { this.currentAnimation.stop(); this.currentAnimation = null; @@ -131,23 +249,21 @@ THREE.SkinnedMesh.prototype.stop = function() { } } -THREE.SkinnedMesh.prototype.pause = function() { +THREE.SEA3D.SkinnedMesh.prototype.pause = function() { if (this.isPlaying) { this.currentAnimation.pause(); this.isPlaying = false; } } -THREE.SkinnedMesh.prototype.resume = function() { +THREE.SEA3D.SkinnedMesh.prototype.resume = function() { if (!this.isPlaying && this.currentAnimation) { this.currentAnimation.pause(); this.isPlaying = true; } } -THREE.SkinnedMesh.prototype.isPlaying = false; - -THREE.SkinnedMesh.prototype.play = function(name, crossfade, offset) { +THREE.SEA3D.SkinnedMesh.prototype.play = function(name, crossfade, offset) { this.previousAnimation = this.currentAnimation; this.currentAnimation = this.animations[name]; @@ -159,7 +275,7 @@ THREE.SkinnedMesh.prototype.play = function(name, crossfade, offset) { this.previousAnimation.play(this.previousAnimation.currentTime, this.previousAnimation.weight); this.currentAnimation.play(offset !== undefined ? offset : this.currentAnimation.currentTime, this.currentAnimation.weight); - THREE.AnimationHandler.addCrossfade( this, crossfade ); + THREE.SEA3D.AnimationHandler.addCrossfade( this, crossfade ); } else { this.currentAnimation.play(offset !== undefined ? offset : this.currentAnimation.currentTime, 1); @@ -168,7 +284,7 @@ THREE.SkinnedMesh.prototype.play = function(name, crossfade, offset) { this.isPlaying = true; } -THREE.SkinnedMesh.prototype.setAnimations = function(animations) { +THREE.SEA3D.SkinnedMesh.prototype.setAnimations = function(animations) { this.animations = []; this.weightSchedule = []; this.warpSchedule = []; @@ -180,7 +296,7 @@ THREE.SkinnedMesh.prototype.setAnimations = function(animations) { var ns = animations[i].name; var name = ns.substring(nsIndex); - this.animations[i] = new THREE.Animation( this, animations[i]); + this.animations[i] = new THREE.SEA3D.Animation( this, animations[i] ); this.animations[i].loop = animations[i].repeat; this.animations[i].name = name; @@ -188,222 +304,146 @@ THREE.SkinnedMesh.prototype.setAnimations = function(animations) { } } -THREE.SkinnedMesh.prototype.boneByName = function(name) { +THREE.SEA3D.SkinnedMesh.prototype.boneByName = function(name) { var bones = this.bones; for(var i = 0, bl = bones.length; i < bl; i++) { - if (name == bones[i].name) { - return bones[i]; - } + if (name == bones[i].name) + return bones[i]; } } -THREE.SkinnedMesh.prototype.DISPOSE = THREE.SkinnedMesh.prototype.dispose; -THREE.SkinnedMesh.prototype.dispose = function () { +THREE.SEA3D.SkinnedMesh.prototype.dispose = function () { + this.stop(); - this.animations = null; - this.DISPOSE(); + + if (this.animation) + this.animation.dispose(); + + this.animations = null; + + THREE.SkinnedMesh.prototype.dispose.call( this ); + } -THREE.SkinnedMesh.prototype.CLONE = THREE.SkinnedMesh.prototype.clone; -THREE.SkinnedMesh.prototype.clone = function ( object ) { +THREE.SEA3D.SkinnedMesh.prototype.copy = function ( source ) { - var cloned = THREE.SkinnedMesh.prototype.CLONE.call( this, object ); - - if (cloned.animation) - cloned.animation = this.animation.clone( cloned ); - - cloned.animations = []; - - if (this.geometry.animations) { - var refAnimations = this.geometry.animations; + THREE.SkinnedMesh.prototype.copy.call( this, source ); + + if (this.animation) + this.animation = source.animation.clone( this ); + + this.animations = []; + + if (source.geometry.animations) { + var refAnimations = source.geometry.animations; var nsIndex = refAnimations[0].name.indexOf("/")+1; - + for (var i = 0; i < refAnimations.length; i++) { var name = refAnimations[i].name.substring(nsIndex); var data = refAnimations[i]; - + data.initialized = false; - - cloned.animations[i] = new THREE.Animation( cloned, data ); - cloned.animations[i].loop = refAnimations[i].repeat; - cloned.animations[i].name = name; + + this.animations[i] = new THREE.SEA3D.Animation( this, data ); + this.animations[i].loop = refAnimations[i].repeat; + this.animations[i].name = name; } } - - return cloned; -} -// -// Three.JS Skeleton Animation Crossfade Extension -// + return this; -THREE.AnimationHandler.crossfade = []; -THREE.AnimationHandler.UPDATE = THREE.AnimationHandler.update; +}; -THREE.AnimationHandler.update = function( dt ) { - var i, cf = THREE.AnimationHandler.crossfade; - - // Crossfade - i = 0; - while ( i < cf.length ) { - var mesh = cf[i]; - - mesh.currentAnimation.weight += dt / mesh.crossfade; - - if (mesh.currentAnimation.weight > 1) { - mesh.previousAnimation.weight = 0; - mesh.currentAnimation.weight = 1; - - if (mesh.onCrossfadeComplete) - mesh.onCrossfadeComplete( mesh ); - - cf.splice( i, 1 ); - - delete mesh.crossfade; - } else - ++i; - - mesh.previousAnimation.weight = 1 - mesh.currentAnimation.weight; - } - - THREE.AnimationHandler.UPDATE( dt ); -} +THREE.SEA3D.SkinnedMesh.prototype.clone = function ( object ) { -THREE.AnimationHandler.addCrossfade = function( mesh, crossfade ) { - if (mesh.crossfade !== undefined) - THREE.AnimationHandler.crossfade.splice( THREE.AnimationHandler.crossfade.indexOf( mesh ), 1 ); - - mesh.crossfade = crossfade; - - THREE.AnimationHandler.crossfade.push( mesh ); -} + return new THREE.SEA3D.SkinnedMesh( this.geometry, this.material, this.useVertexTexture ).copy( this ); +}; // -// Animation Event Extension +// Animation Update // -THREE.Animation.prototype.STOP = THREE.Animation.prototype.stop; -THREE.Animation.prototype.stop = function() { - if (this.onComplete) - this.onComplete( this ); +THREE.SEA3D.AnimationHandler = { - this.STOP(); -} - -THREE.Animation.prototype.RESET = THREE.Animation.prototype.reset; -THREE.Animation.prototype.reset = function() { - if (this.onReset) - this.onReset( this ); + crossfade : [], - this.RESET(); -} + update : function( dt ) { -// -// Sound3D -// + var i, cf = THREE.SEA3D.AnimationHandler.crossfade; -THREE.Sound3D = function( src, volume, distance ) { - THREE.Object3D.call( this ); - - this.audio = new Audio(); - this.audio.src = src; - this.audio.load(); - - this.distance = distance !== undefined ? distance : 1000; - this.volume = volume !== undefined ? volume : 1; - - this.playing = false; -} + // crossfade + i = 0; + while ( i < cf.length ) { + var mesh = cf[i]; -THREE.Sound3D.prototype = Object.create( THREE.Object3D.prototype ); + mesh.currentAnimation.weight += dt / mesh.crossfade; -THREE.Sound3D.prototype.loop = false; + if (mesh.currentAnimation.weight > 1) { + mesh.previousAnimation.weight = 0; + mesh.currentAnimation.weight = 1; -THREE.Sound3D.prototype.play = function(offset) { - if (offset !== undefined && this.audio.duration > 0) - { - this.audio.currentTime = offset; - } - - this.audio.loop = this.loop; - this.audio.play(); - - if (!this.playing) - { - this.index = THREE.Sound3D.sounds.length; - THREE.Sound3D.sounds.push( this ); - this.playing = true; - } -} + if (mesh.onCrossfadeComplete) + mesh.onCrossfadeComplete( mesh ); -THREE.Sound3D.prototype.stop = function() { - if (this.audio.duration > 0) - this.audio.currentTime = 0; - - this.pause(); -} + cf.splice( i, 1 ); -THREE.Sound3D.prototype.pause = function() { - this.audio.pause(); - - if (this.playing) - { - THREE.Sound3D.sounds.splice( this.index, 1 ); - this.playing = false; - } -} + delete mesh.crossfade; + } else + ++i; -THREE.Sound3D.prototype.update = function( camera ) { - var soundPosition = new THREE.Vector3(); - soundPosition.setFromMatrixPosition( this.matrixWorld ); - - var cameraPosition = new THREE.Vector3(); - cameraPosition.setFromMatrixPosition( camera.matrixWorld ); - - var distance = soundPosition.distanceTo( cameraPosition ); + mesh.previousAnimation.weight = 1 - mesh.currentAnimation.weight; + + } + + THREE.AnimationHandler.update( dt ); + SEA3D.AnimationHandler.update( dt ); - var volume = this.volume * (1 - ( distance / (this.distance * 3) )); + }, - this.audio.volume = Math.max(0, Math.min(1, volume)); -} + addCrossfade : function( mesh, crossfade ) { + + if (mesh.crossfade !== undefined) + THREE.SEA3D.AnimationHandler.crossfade.splice( THREE.SEA3D.AnimationHandler.crossfade.indexOf( mesh ), 1 ); + + mesh.crossfade = crossfade; -THREE.Sound3D.sounds = []; + THREE.SEA3D.AnimationHandler.crossfade.push( mesh ); -THREE.Sound3D.update = function( camera ) { - var sounds = THREE.Sound3D.sounds; - for(var i = 0; i < sounds.length; i++) { - sounds[i].update( camera ); } + } // -// SEA3D +// Animation Event // - -THREE.SEA3D = function(config) { - this.config = config || {}; - - if (this.config.autoPlay === undefined) this.config.autoPlay = false; - if (this.config.flip === undefined) this.config.flip = true; - if (this.config.parser == undefined) this.config.parser = THREE.SEA3D.AUTO; - if (this.config.multiplier == undefined) this.config.multiplier = 1; - if (this.config.tangent == undefined) this.config.tangent = true; - if (this.config.bounding == undefined) this.config.bounding = true; - if (this.config.ambientColor == undefined) this.config.ambientColor = true; - - this.container = this.config.container || new THREE.Object3D(); - this.objects = {}; -} -THREE.SEA3D.prototype = { - constructor: THREE.SEA3D, +THREE.SEA3D.Animation = function ( root, data ) { + + THREE.Animation.call( this, root, data ); - addEventListener: THREE.EventDispatcher.prototype.addEventListener, - hasEventListener: THREE.EventDispatcher.prototype.hasEventListener, - removeEventListener: THREE.EventDispatcher.prototype.removeEventListener, - dispatchEvent: THREE.EventDispatcher.prototype.dispatchEvent -} +}; + +THREE.SEA3D.Animation.prototype = Object.create( THREE.Animation.prototype ); +THREE.SEA3D.Animation.prototype.constructor = THREE.SEA3D.Animation; + +THREE.SEA3D.Animation.prototype.stop = function() { + + if (this.onComplete) + this.onComplete( this ); + + THREE.Animation.prototype.stop.call( this ); + +}; + +THREE.SEA3D.Animation.prototype.reset = function() { + + if (this.onReset) + this.onReset( this ); + + THREE.Animation.prototype.reset.call( this ); + +}; // // Config @@ -621,122 +661,119 @@ THREE.SEA3D.prototype.updateAnimationSet = function(obj3d) { var buf = THREE.SEA3D.BUFFER2; var anmSet = obj3d.animation.animationSet; var relative = obj3d.animation.relative; - - if (anmSet.flip) - return; - var anms = anmSet.animations; - for (var i = 0; i < anms.length; i++) { - var dataList = anms[i].dataList; - var t_anm = [], j; - - for (j = 0; j < dataList.length; j++) { - var data = dataList[j]; - var raw = dataList[j].data; - var kind = data.kind; - var numFrames = raw.length / data.blockLength; + if (anmSet.flip && !anms.length) + return; + + var dataList = anms[0].dataList; + var t_anm = []; - switch(kind) { - case SEA3D.Animation.POSITION: - case SEA3D.Animation.ROTATION: - t_anm.push( { - kind : kind, - numFrames : numFrames, - raw : raw - } ); - break; - } + for (i = 0; i < dataList.length; i++) { + var data = dataList[i]; + var raw = dataList[i].data; + var kind = data.kind; + var numFrames = raw.length / data.blockLength; + + switch(kind) { + case SEA3D.Animation.POSITION: + case SEA3D.Animation.ROTATION: + t_anm.push( { + kind : kind, + numFrames : numFrames, + raw : raw + } ); + break; } + } + + if (t_anm.length > 0) { - if (t_anm.length > 0) { - - var numFrames = t_anm[0].numFrames, - ct = THREE.SEA3D.CONTAINER, - tar = relative ? obj3d : obj3d.parent; - - if (obj3d.animation.relative) { - ct.position.set(0, 0, 0); - ct.rotation.set(0, 0, 0); - ct.scale.set(1, 1, 1); - } else { - ct.position.copy(obj3d.position); - ct.rotation.copy(obj3d.rotation); - ct.scale.copy(obj3d.scale); - } + var numFrames = t_anm[0].numFrames, + ct = THREE.SEA3D.CONTAINER, + tar = relative ? obj3d : obj3d.parent; - tar.add( ct ); - - for (var f = 0, t, c; f < numFrames; f++) { - - for (t = 0; t < t_anm.length; t++) { - - var raw = t_anm[t].raw, - kind = t_anm[t].kind; - - switch(kind) { - case SEA3D.Animation.POSITION: - - c = f * 3; - - ct.position.set( - raw[c ], - raw[c + 1], - raw[c + 2] - ); + if (obj3d.animation.relative) { + ct.position.set(0, 0, 0); + ct.rotation.set(0, 0, 0); + ct.scale.set(1, 1, 1); + } else { + ct.position.copy(obj3d.position); + ct.rotation.copy(obj3d.rotation); + ct.scale.copy(obj3d.scale); + } - break; - - case SEA3D.Animation.ROTATION: - - c = f * 4; - - ct.quaternion.set( - raw[c ], - raw[c + 1], - raw[c + 2], - raw[c + 3] - ); + tar.add( ct ); + + for (var f = 0, t, c; f < numFrames; f++) { - break; - } - } + for (t = 0; t < t_anm.length; t++) { - this.updateMatrix( ct ); + var raw = t_anm[t].raw, + kind = t_anm[t].kind; - for (t = 0; t < t_anm.length; t++) { - - var raw = t_anm[t].raw, - kind = t_anm[t].kind; - - switch(kind) { - case SEA3D.Animation.POSITION: - - c = f * 3; - - raw[c ] = ct.position.x; - raw[c + 1] = ct.position.y; - raw[c + 2] = ct.position.z; - - break; - - case SEA3D.Animation.ROTATION: - - c = f * 4; - - raw[c ] = ct.quaternion.x; - raw[c + 1] = ct.quaternion.y; - raw[c + 2] = ct.quaternion.z; - raw[c + 3] = ct.quaternion.w; - - break; - } + switch(kind) { + case SEA3D.Animation.POSITION: + + c = f * 3; + + ct.position.set( + raw[c ], + raw[c + 1], + raw[c + 2] + ); + + break; + + case SEA3D.Animation.ROTATION: + + c = f * 4; + + ct.quaternion.set( + raw[c ], + raw[c + 1], + raw[c + 2], + raw[c + 3] + ); + + break; } } - - tar.remove( ct ); + + this.updateMatrix( ct ); + + for (t = 0; t < t_anm.length; t++) { + + var raw = t_anm[t].raw, + kind = t_anm[t].kind; + + switch(kind) { + case SEA3D.Animation.POSITION: + + c = f * 3; + + raw[c ] = ct.position.x; + raw[c + 1] = ct.position.y; + raw[c + 2] = ct.position.z; + + break; + + case SEA3D.Animation.ROTATION: + + c = f * 4; + + raw[c ] = ct.quaternion.x; + raw[c + 1] = ct.quaternion.y; + raw[c + 2] = ct.quaternion.z; + raw[c + 3] = ct.quaternion.w; + + break; + } + } } - } + + tar.remove( ct ); + } anmSet.flip = true; } @@ -769,7 +806,9 @@ THREE.SEA3D.prototype.vectorToUV = function(list) { } THREE.SEA3D.prototype.toVector3 = function(data) { + return new THREE.Vector3(data.x, data.y, data.z); + } THREE.SEA3D.prototype.scaleColor = function(color, scale) { @@ -781,14 +820,17 @@ THREE.SEA3D.prototype.scaleColor = function(color, scale) { } THREE.SEA3D.prototype.updateScene = function () { + if (this.materials != undefined) { for(var i = 0, l = this.materials.length; i < l; ++i) { this.materials[i].needsUpdate = true; } } + } -THREE.SEA3D.prototype.addSceneObject = function(sea) { +THREE.SEA3D.prototype.addSceneObject = function(sea) { + var obj3d = sea.tag; obj3d.props = sea.properties; @@ -810,14 +852,19 @@ THREE.SEA3D.prototype.addSceneObject = function(sea) { this.config.container.add( obj3d ); else this.container.add( obj3d ); + } THREE.SEA3D.prototype.bufferToTexture = function(raw) { + return "data:image/png;base64," + SEA3D.Stream.bufferToBase64(raw); + } THREE.SEA3D.prototype.bufferToSound = function(raw) { + return "data:audio/mp3;base64," + SEA3D.Stream.bufferToBase64(raw); + } THREE.SEA3D.prototype.applyDefaultAnimation = function(sea, ANIMATOR_CLASS) { @@ -1431,7 +1478,7 @@ THREE.SEA3D.prototype.readLine = function(sea) { // THREE.SEA3D.prototype.readContainer3D = function(sea) { - var container = new THREE.Object3D(); + var container = new THREE.SEA3D.Object3D(); this.containers = this.containers || []; this.containers.push( this.objects["c3d/" + sea.name] = sea.tag = container ); @@ -1542,14 +1589,16 @@ THREE.SEA3D.prototype.readMesh = function(sea) { geo.morphTargets = this.getMorpher( morpher, sea.geometry ); if (skeleton) { - mesh = new THREE.SkinnedMesh( geo, mat, false ); + mesh = new THREE.SEA3D.SkinnedMesh( geo, mat, false ); if (skeletonAnimation) { mesh.setAnimations( geo.animations ); - if (this.config.autoPlay) mesh.play( mesh.animations[0].name ); + + if (this.config.autoPlay) + mesh.play( mesh.animations[0].name ); } } else { - mesh = new THREE.Mesh( geo, mat ); + mesh = new THREE.SEA3D.Mesh( geo, mat ); if (vtxAnm) geo.morphTargets = this.getVertexAnimation( vtxAnm ); @@ -1574,13 +1623,21 @@ THREE.SEA3D.prototype.readMesh = function(sea) { // THREE.SEA3D.prototype.readSoundPoint = function(sea) { - var sound3d = new THREE.Sound3D( sea.sound.tag, sea.volume, sea.distance ); - if (sea.autoPlay) { - sound3d.loop = true; - sound3d.play(); + if (!this.audioListener) { + this.audioListener = new THREE.AudioListener(); + this.container.add( this.audioListener ); } + var sound3d = new THREE.Audio( this.audioListener ); + + sound3d.load( sea.sound.tag ); + sound3d.autoplay = sea.autoPlay; + sound3d.setLoop( sea.autoPlay ); + sound3d.setVolume( sea.volume ); + sound3d.setRefDistance( sea.distance ); + sound3d.setRolloffFactor( this.config.audioRolloffFactor ); + sound3d.name = sea.name; this.sounds3d = this.sounds3d || []; @@ -1589,7 +1646,8 @@ THREE.SEA3D.prototype.readSoundPoint = function(sea) { this.addSceneObject( sea ); this.updateTransform(sound3d, sea); - this.applyDefaultAnimation( sea, THREE.SEA3D.Object3DAnimator ); + this.applyDefaultAnimation( sea, THREE.SEA3D.Object3DAnimator ); + } // @@ -1876,7 +1934,7 @@ THREE.SEA3D.prototype.materialTechnique = })(); THREE.SEA3D.prototype.readMaterial = function(sea) { - var mat = new THREE.MeshPhongMaterial(); + var mat = this.config.standardMaterial ? new THREE.SEA3D.StandardMaterial() : new THREE.MeshPhongMaterial(); mat.emissiveToAmbientColor = this.config.ambientColor; mat.name = sea.name; diff --git a/examples/models/sea3d/sound.sea b/examples/models/sea3d/sound.sea index 94beda62fbc90e575884472889fd6617722508a7..5ec614961ce4e3c1c33ea457e0307077409f3811 100644 GIT binary patch delta 462 zcmX@OkZax|E}mdl$6#ZZ3?~K#CaH-$ntUvE9KFV8bQUWqb$!xbwTW@5C}Z$+<0d90 z)8ZxG8GE@OK642E$;I(zb2~#dJKw8qxlgqY9o}~6>eiXlgnAs`nX4Y1w8np5N8m1| zIrpXrMNM8NresB&P8IQ4V%>E%Yuou68>bq~jk+nL$FP}Me5It=lwH=oQ8O1G5(wX{ zplRA#9>A*4DDz?RApTvnAA44;%;dWL-MzM2D_WQQW z{%8EvBvrqzeDax@X<6Ca)fo?WB%NK97p9}(a%?sO!$jw9MuUmx<%PSKf3{EQ*sDKF z-h7=KAJ-A3yAIR4nwS)&;SwBMrrUX`hMoHGd40=;k`s?4HMSpXV*1M?pxQON+~B{) znNs;^ZSRJA52j!4XF3oc&A`CGo@<=Kz!8#PR9b9cU>wW9Ai!V)6o!KCZrR;2>zdZ> z4U+r6bxPO4St66qFXm&pskmfD)((|;<<}09sv7rxCA>Y9d~8OQ$;wu?X4jW5vrV+# Ni=0iEK6wI@9sn*Nz!(4k delta 373 zcmbQYi0j}&E}mdl$6#ZZ3?~K#Cdr9Bntbg1x09W1cL<7>eMsN#F#S{`Q#Ygj^spu- zd7%j*J7;v~lPJ4RT}Uc@```RT$}vsN0f z&zi0Cuys+9PT#EDX>o?o;5VjGuS@Q zfKlw+^bL(nEZcYdWBk!1vwvRs%7;K^fc=#?Dxbal~-e9ib5wQ9X!}cRhOn-R< g0+;uB&n^11>QIfumRFlrx=p{>&van=hY3u205Hy=%m4rY diff --git a/examples/webgl_loader_sea3d.html b/examples/webgl_loader_sea3d.html index 2cf6abff4d..ecfca4d863 100644 --- a/examples/webgl_loader_sea3d.html +++ b/examples/webgl_loader_sea3d.html @@ -33,7 +33,7 @@ - + @@ -101,14 +101,11 @@ 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 ); renderer.setSize( window.innerWidth, window.innerHeight ); @@ -164,28 +161,29 @@ // + var clock = new THREE.Clock(); + function animate() { + var delta = clock.getDelta(); + requestAnimationFrame( animate ); + // update Three.JS+SEA3D animation + THREE.SEA3D.AnimationHandler.update( delta ); + controls.update(); - 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 ); } diff --git a/examples/webgl_loader_sea3d_hierarchy.html b/examples/webgl_loader_sea3d_hierarchy.html index c395e8a380..f8bd95833f 100644 --- a/examples/webgl_loader_sea3d_hierarchy.html +++ b/examples/webgl_loader_sea3d_hierarchy.html @@ -33,7 +33,7 @@ - + @@ -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,29 @@ // + var clock = new THREE.Clock(); + function animate() { + var delta = clock.getDelta(); + requestAnimationFrame( animate ); + // update Three.JS+SEA3D animation + THREE.SEA3D.AnimationHandler.update( delta ); + controls.update(); - render(); + render( delta ); stats.update(); } - var clock = new THREE.Clock(); + function render( dlt ) { - function render() { - - var delta = clock.getDelta(); - - THREE.AnimationHandler.update( delta ); - - // SEA3D Keyframe Update - SEA3D.AnimationHandler.update( delta ); - //renderer.render( scene, camera ); - composer.render( delta ); + composer.render( dlt ); } diff --git a/examples/webgl_loader_sea3d_keyframe.html b/examples/webgl_loader_sea3d_keyframe.html index 6b35977bf0..7615f4ba80 100644 --- a/examples/webgl_loader_sea3d_keyframe.html +++ b/examples/webgl_loader_sea3d_keyframe.html @@ -34,7 +34,7 @@ - + @@ -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 ); @@ -278,32 +275,32 @@ break; } } - + + // + + var clock = new THREE.Clock(); + function animate() { + var delta = clock.getDelta(); + requestAnimationFrame( animate ); + // update Three.JS+SEA3D animation + THREE.SEA3D.AnimationHandler.update( delta ); + controls.update(); - 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 ); } diff --git a/examples/webgl_loader_sea3d_morph.html b/examples/webgl_loader_sea3d_morph.html new file mode 100644 index 0000000000..185e0a5b50 --- /dev/null +++ b/examples/webgl_loader_sea3d_morph.html @@ -0,0 +1,207 @@ + + + + three.js webgl - sea3d / morph + + + + + +
+ three.js - model by sea3d +
+ + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/webgl_loader_sea3d_skinning.html b/examples/webgl_loader_sea3d_skinning.html index b0380e8d38..7e2d799dd4 100644 --- a/examples/webgl_loader_sea3d_skinning.html +++ b/examples/webgl_loader_sea3d_skinning.html @@ -35,7 +35,7 @@ - + @@ -90,13 +90,14 @@ // get meshes player = loader.getMesh("Player"); + hat = loader.getMesh("Hat"); - + // events - + window.addEventListener( 'click', onMouseClick, false ); window.addEventListener( 'contextmenu', onRightClick, false ); - + animate(); }; @@ -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,29 @@ // + var clock = new THREE.Clock(); + function animate() { + var delta = clock.getDelta(); + requestAnimationFrame( animate ); + // update Three.JS+SEA3D animation + THREE.SEA3D.AnimationHandler.update( delta ); + controls.update(); - 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 ); } diff --git a/examples/webgl_loader_sea3d_sound.html b/examples/webgl_loader_sea3d_sound.html index bf7cdc4b57..3591eaf884 100644 --- a/examples/webgl_loader_sea3d_sound.html +++ b/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 @@ -133,7 +135,17 @@ } ); 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(); @@ -386,12 +400,50 @@ controls.getObject().translateZ( velocity.z * delta ); } - + + 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 ); + + // SEA3D Keyframe Update + SEA3D.AnimationHandler.update( delta ); render( delta ); @@ -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 ); -- GitLab