added model and loader

jinpyojeon · Apr 25, 2017 · d928925 · d928925
1 parent 8f78238
commit d928925
Show file tree

Hide file tree

Showing 5 changed files with 85,860 additions and 16 deletions.
diff --git a/main.html b/main.html
@@ -1,7 +1,21 @@
+<!doctype HTML>
 <html>
 
 <head>
+    <meta charset=utf-8>
+    <style>
+        body {
+            margin: 0;
+        }
+
+        canvas {
+            width: 100%;
+            height: 100%
+        }
+    </style>
     <script type="text/javascript" src="src/three.min.js"></script>
+    <!-- script type="text/javascript" src="src/loaders/LoadingManager.js"></script-->
+    <script type="text/javascript" src="src/loaders/OBJLoader.js"></script>
     <script type="text/javascript" src="main.js"></script>
 </head>
 

diff --git a/main.js b/main.js
@@ -1,37 +1,45 @@
 var scene, camera, renderer;
-var geometry, material, mesh;
 
 init();
-animate();
 
-function init() {
 
+function init() {
     scene = new THREE.Scene();
 
+
     camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
     camera.position.z = 1000;
 
-    geometry = new THREE.BoxGeometry(200, 200, 200);
-    material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
-
-    mesh = new THREE.Mesh(geometry, material);
-    scene.add(mesh);
+    var light = new THREE.DirectionalLight(0xffffff, 1, 100);
+    light.position.set(0, 1, 0); //default; light shining from top
+    scene.add(light);
 
     renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0xEEEEEE);
+
+    // var manager = new THREE.LoadingManager();
+    // manager.onProgress = function(item, loaded, total) {
+    //     console.log(item, loaded, total);
+    // };
+
+    var loader = new THREE.OBJLoader();
+
+    loader.load('models/Stick_Figure_by_Swp.OBJ',
+        function(object) {
+            object.position.set(0, 0, 0);
+            scene.add(object);
+        }
+    );
 
     window.onload = function() {
         document.body.appendChild(renderer.domElement);
     }
-}
-
-function animate() {
 
-    requestAnimationFrame(animate);
-
-    mesh.rotation.x += 0.01;
-    mesh.rotation.y += 0.02;
+    render();
+}
 
+function render() {
+    requestAnimationFrame(render);
     renderer.render(scene, camera);
-
 }