fixed movement and added gltf

static/secrets/woof.js

@@ -1,45 +1,80 @@
 import * as THREE from 'three';
-import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 
-// Setup stuff 
+// Variables
+const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#kennel'), });
+const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
+const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 2.5);
+const controls = new PointerLockControls(camera, renderer.domElement);
 const scene = new THREE.Scene();
-//const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-//camera.position.z = 5;
-let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
-camera.position.z = 5;
+const clock = new THREE.Clock();
+const loader = new GLTFLoader();
+const keyMap = {}
 
-const renderer = new THREE.WebGLRenderer({
-    canvas: document.querySelector('#kennel'),
-});
+init();
 
-renderer.setSize(window.innerWidth, window.innerHeight);
+//Initialisation
+function init() {
+    // Renderer
+    renderer.setSize(window.innerWidth, window.innerHeight);
 
-// Cube geometry stuff. 
-const geometry = new THREE.BoxGeometry(5, 1, 1);
-const material = new THREE.MeshBasicMaterial({ color: 0x962FFE });
-const material2 = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
-const cube = new THREE.Mesh(geometry, material);
-const cube2 = new THREE.Mesh(geometry, material2);
-cube2.position.x = 4;
-cube2.position.z = 7;
-cube2.rotateX = 35;
-scene.add(cube);
-scene.add(cube2);
+    // Camera
+    camera.position.z = 5;
 
-// Light stuff
-const light = new THREE.DirectionalLight(0xFFFFFF, 0.5);
-light.position.x = 5;
-scene.add(light);
+    // Light
+    light.position.set(0.5, 1, 0.75);
+    scene.add(light);
 
-// Controller stuff
-let clock = new THREE.Clock();
-let controls = new FirstPersonControls(camera, renderer.domElement);
-controls.movementSpeed = 5;
-controls.lookSpeed = 0.1;
-controls.lookVertical = false;
+    // Scene
+    scene.background = new THREE.Color(0x000000);
+
+    // Controller
+    document.addEventListener('click', () => {
+        controls.lock();
+    });
+
+    const onDocumentKey = (e) => {
+        keyMap[e.code] = e.type === 'keydown';
+    };
+    document.addEventListener('keydown', onDocumentKey, false);
+    document.addEventListener('keyup', onDocumentKey, false);
+
+    // GLFT Loader
+    loader.load(
+        // url of file
+        '../test.gltf',
+        // when resource is loaded
+        function(gltf) {
+            scene.add(gltf.scene);
+
+            gltf.animations;
+            gltf.scene;
+            gltf.scenes;
+            gltf.cameras;
+            gltf.asset;
+        },
+        //when loading is progressing
+        function(xhr) {
+            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+        },
+        // when error
+        function(error) {
+            console.log('a fucking error lmao: ', error);
+        }
+    );
+}
 
 function animate() {
-    controls.update(clock.getDelta());
+    const delta = clock.getDelta();
+
+    if (controls.isLocked) {
+        if (keyMap['KeyW']) controls.moveForward(delta * 5);
+        if (keyMap['KeyS']) controls.moveForward(-delta * 5);
+        if (keyMap['KeyA']) controls.moveRight(-delta * 5);
+        if (keyMap['KeyD']) controls.moveRight(delta * 5);
+    }
+
     renderer.render(scene, camera);
 }
 renderer.setAnimationLoop(animate);