examples/webgl_loader_assimp2json.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - Open Asset Import Library (assimp) / assimp2json</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;
			}

			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;

			}

			a { color: red }
		</style>
	</head>

	<body>
		<div id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
			Jeep by Psionic, interior from
			<a href="http://www.assimp.org/" target="_blank" rel="noopener">Assimp</a>
		</div>

		<script src="../build/three.js"></script>

		<script src="js/loaders/AssimpJSONLoader.js"></script>

		<script src="js/WebGL.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			if ( WEBGL.isWebGLAvailable() === false ) {

				document.body.appendChild( WEBGL.getWebGLErrorMessage() );

			}

			/*

			Simple demo for loading json files generated by assimp2json
			https://github.com/acgessler/assimp2json

			assimp2json uses assimp (http://assimp.sf.net) to import 40+ 3D file
			formats, including 3ds, obj, dae, blend, fbx, x, ms3d, lwo (and many
			more).

			TODOs:
			  - assimp supports skeletal animations and assimp2son exports
			    them. This demo currently doesn't read them.
			  - not all material properties supported by assimp are currently
			    mapped to THREE.js

			The sample files for this demo originate in assimp's repository,
			and were converted using assimp2json 2.0. The interior file was
			slightly edited to adjust for lower-case texture names.

			*/

			var container, stats, clock;
			var camera, scene, renderer;

			init();
			animate();

			//

			function init() {

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

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );

				scene = new THREE.Scene();

				clock = new THREE.Clock();

				// load jeep model

				var loader1 = new THREE.AssimpJSONLoader();
				loader1.load( 'models/assimp/jeep/jeep.assimp.json', function ( object ) {

					object.scale.multiplyScalar( 0.2 );
					scene.add( object );

				} );

				// load interior model

				var loader2 = new THREE.AssimpJSONLoader();
				loader2.load( 'models/assimp/interior/interior.assimp.json', function ( object ) {

					scene.add( object );

				} );

				//

				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
				scene.add( ambientLight );

				var directionalLight = new THREE.DirectionalLight( 0xeeeeee );
				directionalLight.position.set( 1, 1, - 1 );
				directionalLight.position.normalize();
				scene.add( directionalLight );

				//

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				//

				stats = new Stats();
				container.appendChild( stats.dom );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			//

			function onWindowResize() {

				renderer.setSize( window.innerWidth, window.innerHeight );

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			//

			function render() {

				var elapsedTime = clock.getElapsedTime();

				camera.position.x = Math.cos( elapsedTime * 0.5 ) * 10;
				camera.position.y = 4;
				camera.position.z = Math.sin( elapsedTime * 0.5 ) * 10;

				camera.lookAt( scene.position );

				renderer.render( scene, camera );

			}

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