|
@@ -1,22 +1,21 @@
|
|
|
<!DOCTYPE html>
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
<html lang="en">
|
|
|
-
|
|
|
|
|
<head>
|
|
<head>
|
|
|
- <title>three.js webgl - Assimp - Binary</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 {
|
|
|
|
|
- color: #000;
|
|
|
|
|
- font-family: Monospace;
|
|
|
|
|
- font-size: 13px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- background-color: #000;
|
|
|
|
|
- margin: 0px;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- #info {
|
|
|
|
|
|
|
+ <title>three.js webgl - Assimp</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 {
|
|
|
|
|
+ color: #000;
|
|
|
|
|
+ font-family: Monospace;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background-color: #000;
|
|
|
|
|
+ margin: 0px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ #info {
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 10px;
|
|
top: 10px;
|
|
@@ -37,101 +36,103 @@
|
|
|
float: left;
|
|
float: left;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
- </style>
|
|
|
|
|
|
|
+ </style>
|
|
|
</head>
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
<body>
|
|
|
- <div id="container"></div>
|
|
|
|
|
- <div id="info">
|
|
|
|
|
|
|
+ <div id="container"></div>
|
|
|
|
|
+ <div id="info">
|
|
|
<a href="http://threejs.org" target="_blank">three.js</a>
|
|
<a href="http://threejs.org" target="_blank">three.js</a>
|
|
|
- <a href="https://github.com/Virtulous" target="_blank">Assimp Binary File format</a>
|
|
|
|
|
- <div>Assimp binary loader by <a href="https://virtulo.us" target="_blank">Virtulous</a></div>
|
|
|
|
|
|
|
+ <a href="https://github.com/Virtulous" target="_blank">Assimp File format</a>
|
|
|
|
|
+ <div>Assimp loader by <a href="https://virtulo.us" target="_blank">Virtulous</a></div>
|
|
|
<div>Octaminator model from <a href="http://opengameart.org/content/octaminator-engine-ready" target="_blank">Teh_Bucket and raymoohawk</a></div>
|
|
<div>Octaminator model from <a href="http://opengameart.org/content/octaminator-engine-ready" target="_blank">Teh_Bucket and raymoohawk</a></div>
|
|
|
</div>
|
|
</div>
|
|
|
- <script src="../build/three.js"></script>
|
|
|
|
|
- <script src="js/loaders/AssimpLoader.js"></script>
|
|
|
|
|
- <script src="js/Detector.js"></script>
|
|
|
|
|
- <script src="js/libs/stats.min.js"></script>
|
|
|
|
|
-
|
|
|
|
|
- <script src="js/controls/OrbitControls.js"></script>
|
|
|
|
|
-
|
|
|
|
|
- <script>
|
|
|
|
|
- if ( !Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
|
- var container, stats;
|
|
|
|
|
- var camera, scene, renderer;
|
|
|
|
|
- var clock = new THREE.Clock();
|
|
|
|
|
- var animation;
|
|
|
|
|
- init();
|
|
|
|
|
-
|
|
|
|
|
- function init() {
|
|
|
|
|
-
|
|
|
|
|
- container = document.getElementById( 'container' );
|
|
|
|
|
- camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
|
|
- camera.position.set( 600, 1150, 5 );
|
|
|
|
|
- camera.up.set( 0, 0, 1 );
|
|
|
|
|
- camera.lookAt( new THREE.Vector3( -100, 0, 0 ) );
|
|
|
|
|
-
|
|
|
|
|
- scene = new THREE.Scene();
|
|
|
|
|
- var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
|
|
|
|
|
- light.position.set( 0, 4, 4 ).normalize();
|
|
|
|
|
- scene.add( light );
|
|
|
|
|
- var ambient = new THREE.AmbientLight( 0x333333, 1.5 );
|
|
|
|
|
- scene.add( ambient );
|
|
|
|
|
- renderer = new THREE.WebGLRenderer( {
|
|
|
|
|
- antialias: true
|
|
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- renderer.setClearColor( 0xfff4e5 );
|
|
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
- renderer.sortObjects = false;
|
|
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
|
|
- renderer.setClearColor( new THREE.Color( 0, 0, 0 ), 1 );
|
|
|
|
|
-
|
|
|
|
|
- var controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
|
|
|
|
+ <script src="../build/three.js"></script>
|
|
|
|
|
+ <script src="js/loaders/AssimpLoader.js"></script>
|
|
|
|
|
+ <script src="js/Detector.js"></script>
|
|
|
|
|
+ <script src="js/libs/stats.min.js"></script>
|
|
|
|
|
+
|
|
|
|
|
+ <script src="js/controls/OrbitControls.js"></script>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ if ( !Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
|
+ var container, stats;
|
|
|
|
|
+ var camera, scene, renderer;
|
|
|
|
|
+ var clock = new THREE.Clock();
|
|
|
|
|
+ var animation;
|
|
|
|
|
+ init();
|
|
|
|
|
+
|
|
|
|
|
+ function init() {
|
|
|
|
|
+
|
|
|
|
|
+ container = document.getElementById( 'container' );
|
|
|
|
|
+ camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
|
|
+ camera.position.set( 600, 1150, 5 );
|
|
|
|
|
+ camera.up.set( 0, 0, 1 );
|
|
|
|
|
+ camera.lookAt( new THREE.Vector3( -100, 0, 0 ) );
|
|
|
|
|
+
|
|
|
|
|
+ scene = new THREE.Scene();
|
|
|
|
|
+ var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
|
|
|
|
|
+ light.position.set( 0, 4, 4 ).normalize();
|
|
|
|
|
+ scene.add( light );
|
|
|
|
|
+ var ambient = new THREE.AmbientLight( 0x333333, 1.5 );
|
|
|
|
|
+ scene.add( ambient );
|
|
|
|
|
+ renderer = new THREE.WebGLRenderer( {
|
|
|
|
|
+ antialias: true
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ renderer.setClearColor( 0xfff4e5 );
|
|
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
+ renderer.sortObjects = false;
|
|
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
|
|
+ renderer.setClearColor( new THREE.Color( 0, 0, 0 ), 1 );
|
|
|
|
|
+
|
|
|
|
|
+ var controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
controls.target.set(-100,0,0);
|
|
controls.target.set(-100,0,0);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
controls.update();
|
|
controls.update();
|
|
|
|
|
|
|
|
- stats = new Stats();
|
|
|
|
|
- container.appendChild( stats.dom );
|
|
|
|
|
- var loader = new THREE.AssimpLoader();
|
|
|
|
|
|
|
+ stats = new Stats();
|
|
|
|
|
+ container.appendChild( stats.dom );
|
|
|
|
|
+ var loader = new THREE.AssimpLoader();
|
|
|
|
|
+
|
|
|
|
|
+ loader.load( "./models/assimp/octaminator/Octaminator.assimp", function( err, object ) {
|
|
|
|
|
+
|
|
|
|
|
+ object.object.rotation.x = Math.PI / 2;
|
|
|
|
|
+ scene.add( object.object );
|
|
|
|
|
+ animation = object.animation;
|
|
|
|
|
|
|
|
- loader.load( "./models/assimp/binary/squid.assimp", function( err, object ) {
|
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
|
|
- object.object.rotation.x = Math.PI / 2;
|
|
|
|
|
- scene.add( object.object );
|
|
|
|
|
- animation = object.animation;
|
|
|
|
|
|
|
+ window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
+ animate();
|
|
|
|
|
|
|
|
- } );
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
- animate();
|
|
|
|
|
|
|
+ function onWindowResize() {
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
|
|
- function onWindowResize() {
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
|
|
- camera.updateProjectionMatrix();
|
|
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
|
+ var now = performance.now();
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ function animate() {
|
|
|
|
|
|
|
|
- var now = performance.now();
|
|
|
|
|
|
|
+ var delta = performance.now() - now;
|
|
|
|
|
+ now += delta;
|
|
|
|
|
+ requestAnimationFrame( animate, renderer.domElement );
|
|
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
|
|
|
- function animate() {
|
|
|
|
|
|
|
+ if ( animation )
|
|
|
|
|
+ animation.setTime( now / 1000 );
|
|
|
|
|
|
|
|
- var delta = performance.now() - now;
|
|
|
|
|
- now += delta;
|
|
|
|
|
- requestAnimationFrame( animate, renderer.domElement );
|
|
|
|
|
- renderer.render( scene, camera );
|
|
|
|
|
- if ( animation )
|
|
|
|
|
- animation.setTime( now / 1000 );
|
|
|
|
|
- stats.update();
|
|
|
|
|
|
|
+ stats.update();
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
- </script>
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ </script>
|
|
|
</body>
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|
|
</html>
|
Mr.doob
