javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!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">
		<link type="text/css" rel="stylesheet" href="main.css">
	</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 type="module">

			import * as THREE from '../build/three.module.js';

			import Stats from './jsm/libs/stats.module.js';

			import { AssimpJSONLoader } from './jsm/loaders/AssimpJSONLoader.js';

			/*

			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 loader = new AssimpJSONLoader();

				loader.load( 'models/assimp/jeep/jeep.assimp.json', function ( object ) {

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

				} );

				// load interior model

				loader.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>