loading 3d model and adding material to itHEADmain

1 files changed, 38 insertions, 21 deletions

diff --git a/main.js b/main.js
index 13328c5..70db369 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,7 @@
 import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
+const loader = new GLTFLoader();
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
@@ -7,10 +9,25 @@ const renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 
+
 const geometry = new THREE.BoxGeometry(1,1,1);
 const material = new THREE.MeshLambertMaterial( { color: 0x9370db } );
-const cube = new THREE.Mesh( geometry, material );
-scene.add( cube );
+var mainChar = new THREE.Mesh( geometry, material );
+//scene.add( mainChar );
+
+import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
+
+const objLoader = new OBJLoader();
+objLoader.load('map.obj', (root) => {
+	mainChar = root;
+	root.scale.set(0.25,0.25,0.25);
+ root.traverse((child) => {
+        if (child.isMesh) {
+            child.material = material; // Assign the MeshLambertMaterial
+        }
+    });
+	scene.add(root);
+});
 
 camera.position.z = 5;
 
@@ -23,8 +40,8 @@ scene.add(ambient_light);
 
 function animate() {
 
-	//cube.rotation.x += 0.01;
-	//cube.rotation.y += 0.01;
+	//mainChar.rotation.x += 0.01;
+	//mainChar.rotation.y += 0.01;
 
 	renderer.render( scene, camera);
 }
@@ -37,36 +54,36 @@ const motionEvent = (response) => {
 					//elem.style.transform = `rotateZ(${-e.alpha}deg) rotateX(${-e.beta}deg) rotateY(${
 					//  e.gamma
 					//}deg)`;
-					cube.rotation.x = e.beta/15.0; //-front +back
-					cube.rotation.y = e.gamma/15.0; //-left +right
+					mainChar.rotation.x = e.beta/15.0; //-front +back
+					mainChar.rotation.y = e.gamma/15.0; //-left +right
 					if(Math.abs(e.beta) > 1) {
-						cube.position.y += -e.beta / 240
+						mainChar.position.y += -e.beta / 240
 					}
 					if(Math.abs(e.gamma) > 1) {
-						cube.position.x += e.gamma / 240
+						mainChar.position.x += e.gamma / 240
 					}
 
-					if(cube.position.x > 4) {
-						cube.position.x -= 1
-						cube.position.x = -cube.position.x
+					if(mainChar.position.x > 4) {
+						mainChar.position.x -= 1
+						mainChar.position.x = -mainChar.position.x
 					}
-					else if(cube.position.x < -4) {
-						cube.position.x += 1
-						cube.position.x = -cube.position.x
+					else if(mainChar.position.x < -4) {
+						mainChar.position.x += 1
+						mainChar.position.x = -mainChar.position.x
 					}
 
-					if(cube.position.y > 6) {
-						cube.position.y -= 1
-						cube.position.y = -cube.position.y
+					if(mainChar.position.y > 6) {
+						mainChar.position.y -= 1
+						mainChar.position.y = -mainChar.position.y
 					}
-					else if(cube.position.y < -6) {
-						cube.position.y += 1
-						cube.position.y = -cube.position.y
+					else if(mainChar.position.y < -6) {
+						mainChar.position.y += 1
+						mainChar.position.y = -mainChar.position.y
 					}
 
 
 					
-					document.getElementById("info").textContent=`x: ${Math.round(cube.position.x * 10)}, y: ${Math.round(cube.position.y * 10)}`;
+					document.getElementById("info").textContent=`x: ${Math.round(mainChar.position.x * 10)}, y: ${Math.round(mainChar.position.y * 10)}`;
 				});
             }
 }