Merge branch 'master' of github.com:Ovilia/ThreeExample.js

Ovilia · Feb 9, 2017 · 4373f6d · 4373f6d
2 parents 6fc0255 + cff735c
commit 4373f6d
Show file tree

Hide file tree

Showing 5 changed files with 9,502 additions and 43 deletions.
diff --git a/Chapter7/7.3.2.html b/Chapter7/7.3.2.html
@@ -3,7 +3,7 @@
     <head>
         <script type="text/javascript" src="../lib/three.js"></script>
         <script type="text/javascript" src="../lib/MTLLoader.js"></script>
-        <script type="text/javascript" src="../lib/OBJMTLLoader.js"></script>
+        <script type="text/javascript" src="../lib/OBJLoader.js"></script>
 
         <script type="text/javascript">
             var scene = null;
@@ -25,18 +25,25 @@
                 camera.lookAt(new THREE.Vector3(0, 2, 0));
                 scene.add(camera);
 
-                var loader = new THREE.OBJMTLLoader();
-                loader.addEventListener('load', function(event) {
-                    var obj = event.content;
-                    mesh = obj;
-                    scene.add(obj);
+                // material loader
+                var mtlLoader = new THREE.MTLLoader();
+                mtlLoader.setPath('../lib/');
+                mtlLoader.load('port.mtl', function(materials) {
+                    materials.preload();
+
+                    // model loader
+                    var objLoader = new THREE.OBJLoader();
+                    objLoader.setMaterials(materials);
+                    objLoader.setPath('../lib/');
+                    objLoader.load('port.obj', function ( object ) {
+                        object.position.y = - 95;
+                        // if has object, add to scene
+                        if (object.children.length > 0) {
+                            scene.add( object.children[0] );
+                        }
+                    });
                 });
-                loader.load('../lib/port.obj', '../lib/port.mtl');
 
-
-                //var loader = new THREE.OBJMTLLoader();
-
-
                 var light = new THREE.DirectionalLight(0xffffff);
                 light.position.set(20, 10, 5);
                 scene.add(light);

diff --git a/Chapter7/7.3.3.html b/Chapter7/7.3.3.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+    <head>
+        <script type="text/javascript" src="../lib/three.js"></script>
+        <script type="text/javascript" src="../lib/ColladaLoader.js"></script>
+
+        <script type="text/javascript">
+            var scene = null;
+            var camera = null;
+            var renderer = null;
+
+            var mesh = null;
+            var id = null;
+
+            function init() {
+                renderer = new THREE.WebGLRenderer({
+                    canvas: document.getElementById('mainCanvas')
+                });
+                renderer.setClearColor(0x000000);
+                scene = new THREE.Scene();
+
+                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
+                camera.position.set(15, 25, 25);
+                camera.lookAt(new THREE.Vector3(0, 2, 0));
+                scene.add(camera);
+
+                var loader = new THREE.ColladaLoader();
+                loader.load('../lib/port.dae', function (collada) {
+                    if (collada.scene.children.length > 0) {
+                        scene.add(collada.scene.children[0]);
+                    }
+                });
+
+                var light = new THREE.DirectionalLight(0xffffff);
+                light.position.set(20, 10, 5);
+                scene.add(light);
+
+                id = setInterval(draw, 20);
+            }
+
+            function draw() {
+                renderer.render(scene, camera);
+            }
+        </script>
+    </head>
+
+    <body onload="init()">
+        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
+    </body>
+</html>