big website change

static/secrets/forest/forest.js

@@ -1,23 +1,48 @@
 import * as THREE from 'three';
+import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 
 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#forest'), });
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+let modelObject = new THREE.Object3D;
 
 renderer.setSize( window.innerWidth, window.innerHeight );
 renderer.setAnimationLoop( animate );
 
-const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-const cube = new THREE.Mesh( geometry, material );
-scene.add( cube );
-
 camera.position.z = 5;
 
+// OBJ loader. 
+const objectLoader = new OBJLoader();
+objectLoader.load(
+    "/wolf_head.obj",
+    function(object) {
+        console.log(object);
+        modelObject = object;
+        object.traverse((child) => {
+            // instance of is apparently the reason god made typescript 
+            if (child instanceof THREE.Mesh) {
+                // Create material for the mesh.  
+                child.material = new THREE.MeshStandardMaterial({ color: 0x962FFE });
+                child.material.wireframe = true;
+                child.material.wireframeLinewidth = 1;
+                child.material.emissive = (new THREE.Color().setHex(0xff3030));
+            }
+        });
+
+        scene.add(object);
+    },
+    function(xhr) {
+        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+    },
+    function(error) {
+        console.log('an error happened', error);
+    }
+);
+
 function animate() {
 
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
+  modelObject.rotation.x += 0.01;
+  modelObject.rotation.y += 0.01;
 
   renderer.render( scene, camera );
 

static/secrets/kennel/woof.js

@@ -47,7 +47,7 @@ function init() {
 
     room.load(
         // url of file
-        '../test2.gltf',
+        'test2.gltf',
         // when resource is loaded
         function(gltf) {
             gltf.scene.position.y = -1;
@@ -69,9 +69,9 @@ function init() {
         }
     );
 
-    image.load('../paw.png', (texture) => {
+    image.load('paw.png', (texture) => {
         pawTexture = texture;
-        image.load('../finger.png', (texture) => {
+        image.load('finger.png', (texture) => {
             fingerTexture = texture;
             const material = new THREE.SpriteMaterial({ map: texture });
             currentSprite = new THREE.Sprite(material);