summaryrefslogtreecommitdiffhomepage
path: root/main.js
diff options
context:
space:
mode:
Diffstat (limited to 'main.js')
-rw-r--r--main.js59
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)}`;
});
}
}