<!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 }
#stats { position: absolute; top:0; left: 0 }
#stats #fps { background: transparent !important }
#stats #fps #fpsText { color: #aaa !important }
#stats #fps #fpsGraph { display: none }
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> -
Jeep by Psionic, interior from
<a href="http://assimp.sf.net" target="_blank">Assimp</a>
</div>
<script src="../build/three.min.js"></script>
<script src="js/loaders/AssimpJSONLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) {
Detector.addGetWebGLMessage();
}
/*
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;
var camera, scene, renderer, objects;
var clock = new THREE.Clock();
// init scene
init();
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
// Load jeep model using the AssimpJSONLoader
var loader1 = new THREE.AssimpJSONLoader();
loader1.load( 'models/assimp/jeep/jeep.assimp.json', function ( object ) {
object.scale.multiplyScalar( 0.2 );
scene.add( object );
}, onProgress, onError );
// load interior model
var loader2 = new THREE.AssimpJSONLoader();
loader2.load( 'models/assimp/interior/interior.assimp.json', function ( object ) {
scene.add( object );
}, onProgress, onError );
animate();
//
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 2, 4, 5 );
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.035 );
// Lights
scene.add( new THREE.AmbientLight( 0xcccccc ) );
var directionalLight = new THREE.DirectionalLight( 0xeeeeee );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random();
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add( directionalLight );
// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// Stats
stats = new Stats();
container.appendChild( stats.domElement );
// Events
window.addEventListener( 'resize', onWindowResize, false );
}
//
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
//
var t = 0;
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
//
function render() {
var timer = Date.now() * 0.0005;
camera.position.x = Math.cos( timer ) * 10;
camera.position.y = 4;
camera.position.z = Math.sin( timer ) * 10;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>