1.html


<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - collada</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: #000000;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script src="js/three.min.js"></script>
		<script src="js/ColladaLoader.js"></script>
		<script>
			var container, stats;

			var camera, scene, renderer, objects;
			var particleLight, pointLight;
			var dae, skin;

			var loader = new THREE.ColladaLoader();
			loader.options.convertUpAxis = true;
			loader.load( 'obj/marble.dae', function ( collada ) {

				dae = collada.scene;
				skin = collada.skins[ 0 ];

				dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
				dae.updateMatrix();

				init();
				animate();

			} );

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.set( 2, 2, 3 );

				scene = new THREE.Scene();

				// Grid

				var size = 14, step = 1;

				var geometry = new THREE.Geometry();

				// Add the COLLADA
				scene.add( dae );

				scene.add( new THREE.AmbientLight( 0xcccccc ) );

				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );

			}

			var t = 0;
			var clock = new THREE.Clock();

			function animate() {

				var delta = clock.getDelta();

				requestAnimationFrame( animate );

				if ( t > 1 ) t = 0;

				render();
				stats.update();

			}

			function render() {

				var timer = Date.now() * 0.0005;

				camera.lookAt( scene.position );
				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>