ColladaLoader2: Update Examples

examples/js/loaders/ColladaLoader2.js

@@ -423,11 +423,11 @@ THREE.ColladaLoader.prototype = {
 					break;
 
 				case 'rotate':
-					console.warn( 'THREE.ColladaLoader: Animation transform "%s" not yet implemented.', transform );
+					console.warn( 'THREE.ColladaLoader: Animation transform type "%s" not yet implemented.', transform );
 					break;
 
 				case 'scale':
-					console.warn( 'THREE.ColladaLoader: Animation transform "%s" not yet implemented.', transform );
+					console.warn( 'THREE.ColladaLoader: Animation transform type "%s" not yet implemented.', transform );
 					break;
 
 			}

examples/models/collada/monster/readme.txt

@@ -1 +0,0 @@
-Model from http://www.3drt.com/downloads.htm

examples/webgl_loader_collada.html

@@ -9,7 +9,6 @@
 				background:#777;
 				padding:0;
 				margin:0;
-				font-weight: bold;
 				overflow:hidden;
 			}
 
@@ -33,14 +32,13 @@
 
 		<div id="container"></div>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
-			monster by <a href="http://www.3drt.com/downloads.htm" target="_blank" rel="noopener">3drt</a>
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> collada loader
+			| Elf Girl by <a href="https://sketchfab.com/yellow09" target="_blank" rel="noopener">halloween</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">CC Attribution</a>
 		</div>
 
 		<script src="../build/three.js"></script>
 
-		<script src="js/loaders/ColladaLoader.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/ColladaLoader2.js"></script>
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
@@ -48,8 +46,8 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
-			var camera, scene, renderer, controls;
+			var container, stats, clock;
+			var camera, scene, renderer, elf;
 
 			init();
 			animate();
@@ -58,30 +56,31 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.set( 7, 5, 7 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
+				camera.position.set( 8, 10, 8 );
+				camera.lookAt( new THREE.Vector3( 0, 3, 0 ) );
 
 				scene = new THREE.Scene();
 
-				// collada
-
-				var loader = new THREE.ColladaLoader();
-				loader.options.convertUpAxis = true;
-				loader.load( './models/collada/monster/monster.dae', function ( collada ) {
+				clock = new THREE.Clock();
 
-					var object = collada.scene;
+				// loading manager
 
-					object.scale.set( 0.0025, 0.0025, 0.0025 );
-					object.position.set( - 2, 0.2, 0 );
+				var loadingManager = new THREE.LoadingManager( function() {
 
-					scene.add( object );
+					scene.add( elf );
 
 				} );
 
-				//
+				// collada
+
+				var loader = new THREE.ColladaLoader( loadingManager );
+				loader.options.convertUpAxis = true;
+				loader.load( './models/collada/elf/elf.dae', function ( collada ) {
+
+					elf = collada.scene;
 
-				var gridHelper = new THREE.GridHelper( 10, 20 );
-				scene.add( gridHelper );
+				} );
 
 				//
 
@@ -101,10 +100,6 @@
 
 				//
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
-
-				//
-
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
@@ -134,6 +129,14 @@
 
 			function render() {
 
+				var delta = clock.getDelta();
+
+				if ( elf !== undefined ) {
+
+					elf.rotation.z += delta * 0.5;
+
+				}
+
 				renderer.render( scene, camera );
 
 			}

examples/webgl_loader_collada_skinning.html

@@ -9,7 +9,6 @@
 				background:#777;
 				padding:0;
 				margin:0;
-				font-weight: bold;
 				overflow:hidden;
 			}
 
@@ -33,11 +32,11 @@
 
 		<div id="container"></div>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - collada - skinning
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> collada loader - skinning
 		</div>
 
 		<script src="../build/three.js"></script>
-		<script src="js/loaders/ColladaLoader.js"></script>
+		<script src="js/loaders/ColladaLoader2.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -46,7 +45,7 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats, clock;
+			var container, stats, clock, avatar;
 			var camera, scene, renderer, mixer;
 
 			init();
@@ -63,28 +62,25 @@
 
 				clock = new THREE.Clock();
 
-				// collada
-
-				var loader = new THREE.ColladaLoader();
-				loader.options.convertUpAxis = true;
-				loader.load( "./models/collada/avatar.dae", function ( collada ) {
-
-					var object = collada.scene;
+				// loading manager
 
-					mixer = new THREE.AnimationMixer( object );
+				var loadingManager = new THREE.LoadingManager( function() {
 
-					object.traverse( function ( child ) {
+					scene.add( avatar );
 
-						if ( child instanceof THREE.SkinnedMesh ) {
+				} );
 
-							var clip = THREE.AnimationClip.parseAnimation( child.geometry.animation, child.geometry.bones );
-							mixer.clipAction( clip, child ).play();
+				// collada
 
-						}
+				var loader = new THREE.ColladaLoader( loadingManager );
+				loader.options.convertUpAxis = true;
+				loader.load( "./models/collada/avatar.dae", function ( collada ) {
 
-					} );
+					var animations = collada.animations;
+					avatar = collada.scene;
 
-					scene.add( object );
+					mixer = new THREE.AnimationMixer( avatar );
+					var action = mixer.clipAction( animations[ 0 ] ).play();
 
 				} );
 
@@ -98,10 +94,6 @@
 				var ambientLight = new THREE.AmbientLight( 0xcccccc );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( -1, 0.5, -1 ).normalize();
-				scene.add( directionalLight );
-
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );