Fix: rats not visible

magic-mirror/src/core/animate.js

@@ -1,17 +1,17 @@
 import * as THREE from 'three';
-import { updateDoor } from '../scene/door.js';
 import { updateVcrDisplay } from '../scene/vcr-display.js';
 import { state } from '../state.js';
 import { updateScreenEffect } from '../scene/magic-mirror.js'
 import { updateCauldron } from '../scene/cauldron.js';
 import { updateFire } from '../scene/fireplace.js';
+import { updateRats } from '../scene/rat.js';
 
 function updateCamera() {
     const globalTime = Date.now() * 0.00003;
-    const lookAtTime = Date.now() * 0.0002;
+    const lookAtTime = Date.now() * 0.00005;
 
     const camAmplitude = 0.2;
-    const lookAmplitude = 0.1;
+    const lookAmplitude = 0.4;
 
     // Base Camera Position in front of the TV
     const baseX = -0.5;
@@ -19,8 +19,8 @@ function updateCamera() {
     const baseZ = 2.2;
 
     // Base LookAt target (Center of the screen)
-    const baseTargetX = -0.7;
-    const baseTargetY = 1.7;
+    const baseTargetX = -0.2;
+    const baseTargetY = 1.6;
     const baseTargetZ = -0.3;
 
     // Camera Position Offsets (Drift)
@@ -33,7 +33,7 @@ function updateCamera() {
     state.camera.position.z = baseZ + camOffsetZ;
 
     // LookAt Target Offsets (Subtle Gaze Shift)
-    const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude * 3;
+    const lookOffsetX = Math.sin(lookAtTime * 1.5) * lookAmplitude * 4;
     const lookOffsetY = Math.cos(lookAtTime * 1.2) * lookAmplitude;
 
     // Apply lookAt to the subtly shifted target
@@ -70,11 +70,9 @@ function updateScreenLight() {
 
 function updateShaderTime() {
     if (state.tvScreen && state.tvScreen.material.uniforms && state.tvScreen.material.uniforms.u_time) {
-        if (state.tvScreenPowered) {
         state.tvScreen.material.uniforms.u_time.value = state.clock.getElapsedTime();
     }
 }
-}
 
 function updateVideo() {
     if (state.videoTexture) {
@@ -82,18 +80,6 @@ function updateVideo() {
     }
 }
 
-function updateVcr() {
-    const currentTime = state.baseTime + state.videoElement.currentTime;
-    if (Math.abs(currentTime - state.lastUpdateTime) > 0.1) {
-        updateVcrDisplay(currentTime);
-        state.lastUpdateTime = currentTime;
-    }
-    if (currentTime - state.lastBlinkToggleTime > 0.5) { // Blink every 0.5 seconds
-        state.blinkState = !state.blinkState;
-        state.lastBlinkToggleTime = currentTime;
-    }
-}
-
 function updateBooks() {
     const LEVITATE_CHANCE = 0.0003; // Chance for a resting book to start levitating per frame
     const LEVITATE_DURATION_MIN = 100; // frames
@@ -169,13 +155,12 @@ export function animate() {
     updateScreenLight();
     updateVideo();
     updateShaderTime();
-    // updateVcr();
     updateBooks();
-    // updateDoor();
-    // updatePictureFrame();
+    updatePictureFrame();
     updateScreenEffect();
     updateFire();
     updateCauldron();
+    updateRats();
 
     // RENDER!
     state.renderer.render(state.scene, state.camera);

magic-mirror/src/scene/fireplace.js

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 import { state } from '../state.js';
 import { fireVertexShader, fireFragmentShader } from '../shaders/fire-shaders.js';
 import stoneTextureUrl from '/textures/stone_floor.png';
+import woodTextureUrl from '/textures/wood.png';
 
 let fireMaterial;
 let fireLight;
@@ -16,6 +17,12 @@ export function createFireplace(x, z, rotY) {
     stoneTexture.repeat.set(2, 2);
     const stoneMaterial = new THREE.MeshPhongMaterial({ map: stoneTexture, color: 0x999999, shininess: 10 });
 
+    const woodTexture = state.loader.load(woodTextureUrl);
+    const logMaterial = new THREE.MeshPhongMaterial({
+        map: woodTexture,
+        color: 0x5c4033 // A dark wood tint
+    });
+
     const hearthWidth = 2.5;
     const hearthHeight = 0.2;
     const hearthDepth = 1.5;
@@ -72,6 +79,23 @@ export function createFireplace(x, z, rotY) {
     rightJamb.position.set(openingWidth / 2 + frameThickness / 2, hearthHeight + jambHeight / 2, bodyDepth / 2 + frameDepth / 2);
     fireplaceGroup.add(rightJamb);
 
+    // 3.8. Logs inside fireplace
+    const logGeo = new THREE.CylinderGeometry(0.08, 0.1, openingWidth * 0.7, 8);
+
+    const createLog = (pos, rot) => {
+        const log = new THREE.Mesh(logGeo, logMaterial);
+        log.position.copy(pos);
+        log.rotation.copy(rot);
+        log.castShadow = false;
+        log.receiveShadow = true;
+        fireplaceGroup.add(log);
+    };
+
+    const logY = hearthHeight + 0.1;
+    createLog(new THREE.Vector3(0, logY, 0.5), new THREE.Euler(0, 0, Math.PI / 2));
+    createLog(new THREE.Vector3(-0.1, logY + 0.1, 0.4), new THREE.Euler(0.2, 0, Math.PI / 2.2));
+    createLog(new THREE.Vector3(0.2, logY + 0.1, 0.5), new THREE.Euler(-0.2, 0, Math.PI / 1.8));
+
     // 4. Animated Fire
     fireMaterial = new THREE.ShaderMaterial({
         uniforms: {

magic-mirror/src/scene/rat.js

@@ -0,0 +1,93 @@
+import * as THREE from 'three';
+import { state } from '../state.js';
+
+const SLEEP_WAIT = 60;
+
+export class Rat {
+    constructor(path, initialDelay) {
+        this.path = path;
+        this.speed = 0.002 + Math.random() * 0.002;
+        this.progress = -initialDelay; // Start with a negative progress as a delay
+
+        // The rat's body
+        const bodyGeo = new THREE.CapsuleGeometry(0.02, 0.07, 4, 8);
+        const bodyMat = new THREE.MeshPhongMaterial({ color: 0x2a1d1d, shininess: 10 });
+        this.mesh = new THREE.Mesh(bodyGeo, bodyMat);
+        this.mesh.castShadow = true;
+        this.mesh.rotation.z = Math.PI / 2;
+        this.mesh.rotation.y = Math.PI / 2;
+        this.mesh.position.y = 0;
+
+        this.actor = new THREE.Group();
+        this.actor.visible = false; // Start invisible
+        this.actor.add(this.mesh);
+
+        state.scene.add(this.actor);
+    }
+
+    update() {
+        this.progress += this.speed;
+
+        // If the rat has finished its path, reset with a new delay
+        if (this.progress > 1.0) {
+            this.progress = -(Math.random() * SLEEP_WAIT); // wait some seconds before going again
+            this.actor.visible = false;
+            return;
+        }
+
+        // Don't do anything if we are in the delay period
+        if (this.progress < 0) {
+            return;
+        }
+
+        // First time it becomes visible
+        if (!this.actor.visible) {
+            this.actor.visible = true;
+        }
+
+        // Move along the path
+        const position = this.path.getPointAt(this.progress);
+        this.actor.position.copy(position);
+
+        // Orient along the path
+        const tangent = this.path.getTangentAt(this.progress).normalize();
+        const lookAtPosition = position.clone().add(tangent);
+        this.actor.lookAt(lookAtPosition);
+    }
+}
+
+export function createRats(x, y, z, rotY) {
+    // --- 9.5 Rat Hole ---
+    const holeGeo = new THREE.CircleGeometry(0.15, 16);
+    const holeMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
+    const ratHole = new THREE.Mesh(holeGeo, holeMat);
+    ratHole.position.set(x, y + 0.1, z);
+    ratHole.rotation.y = rotY;
+    state.scene.add(ratHole);
+
+    // Define a path for the rats to follow
+    const ratPath = new THREE.CatmullRomCurve3([
+        new THREE.Vector3(x, y, z), // Start at the hole
+        new THREE.Vector3(x-2.0, 0, z),
+        new THREE.Vector3(0.8, 0, -1.2),
+        new THREE.Vector3(-1.0, 0, -1.3),
+        new THREE.Vector3(-1.8, 0, -1.0),
+        new THREE.Vector3(-1.9, 0, 0.7),
+        new THREE.Vector3(0.5, 0, 0.5),
+        new THREE.Vector3(1.8, 0, 1.0),
+        new THREE.Vector3(x, y, z), // End at the hole
+    ]);
+
+    // Create a few rats with different starting delays
+    state.rats.push(new Rat(ratPath, 0.5));
+    state.rats.push(new Rat(ratPath, 3.0));
+    state.rats.push(new Rat(ratPath, 5.0));
+}
+
+export function updateRats() {
+    if (!state.rats || state.rats.length === 0) return;
+
+    state.rats.forEach(rat => {
+        rat.update();
+    });
+}

magic-mirror/src/scene/root.js

@@ -6,6 +6,7 @@ import { createMagicMirror } from './magic-mirror.js';
 import { createFireplace } from './fireplace.js';
 import { createTable } from './table.js';
 import { createCauldron } from './cauldron.js';
+import { createRats } from './rat.js';
 import { PictureFrame } from './PictureFrame.js';
 import painting1 from '/textures/painting1.jpg';
 import painting2 from '/textures/painting2.jpg';
@@ -77,7 +78,7 @@ export function createSceneObjects() {
 
     state.scene.add(candleGroup);
 
-    createTable(-1.8, 0, -0.8, Math.PI / 2.3);
+    createTable(-1.8, 0, -1.2, Math.PI / 2.3);
 
     // Add cauldron on top of the table (Y = table height + cauldron radius)
     createCauldron(-1.8, 0.5 + 0.2, -0.8);
@@ -140,17 +141,20 @@ export function createSceneObjects() {
     // --- 9. Fireplace ---
     createFireplace(state.roomSize / 2 - 0.5, -1, -Math.PI / 2);
 
-    createBookshelf(-state.roomSize/2 + 0.2, state.roomSize/2*0.2, Math.PI/2, 0);
+    createRats(state.roomSize/2 - 0.01, 0, 0.37, -Math.PI / 2);
+
+    createBookshelf(-state.roomSize/2 + 0.2, state.roomSize/2*0.1, Math.PI/2, 0);
     createBookshelf(-state.roomSize/2 + 0.2, state.roomSize/2*0.7, Math.PI/2, 0);
     createBookshelf(-state.roomSize/2 * 0.7, -state.roomSize/2+0.3, 0, 1);
     
     const pictureFrame = new PictureFrame(state.scene, {
-        position: new THREE.Vector3(-state.roomSize/2, 1.7, -state.roomSize/2 + 0.6),
-        width: 0.5,
+        position: new THREE.Vector3(-state.roomSize/2, 1.7, -state.roomSize/2 + 0.7),
+        width: 0.7,
         height: 1,
         imageUrls: [painting1, painting2],
         rotationY: Math.PI / 2
     });
+
     state.pictureFrames.push(pictureFrame);
 
     const pictureFrame2 = new PictureFrame(state.scene, {
@@ -161,4 +165,13 @@ export function createSceneObjects() {
         rotationY: -Math.PI / 2
     });
     state.pictureFrames.push(pictureFrame2);
+
+    const pictureFrame3 = new PictureFrame(state.scene, {
+        position: new THREE.Vector3(state.roomSize/2, 1.7, 0.75),
+        width: 0.7,
+        height: 1.2,
+        imageUrls: [painting2, painting1],
+        rotationY: -Math.PI / 2
+    });
+    state.pictureFrames.push(pictureFrame3);
 }

magic-mirror/src/scene/screen-shaders.js

@@ -1,18 +0,0 @@
-export const screenVertexShader = `
-varying vec2 vUv;
-
-void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`;
-
-export const screenFragmentShader = `
-varying vec2 vUv;
-uniform sampler2D videoTexture;
-
-void main() {
-    // Sample the video texture
-    gl_FragColor = texture2D(videoTexture, vUv);
-}
-`;

magic-mirror/src/shaders/fire-shaders.js

@@ -49,7 +49,7 @@ float fbm(in vec2 st) {
 
 void main() {
     vec2 uv = vUv;
-    float q = fbm(uv * 2.0 - vec2(0.0, u_time * 0.2));
+    float q = fbm(uv * 2.0 - vec2(0.0, u_time * 1.2));
     float r = fbm(uv * 2.0 + q + vec2(1.7, 9.2) + vec2(0.0, u_time * -0.3));
 
     float fireAmount = fbm(uv * 2.0 + r + vec2(0.0, u_time * 0.15));
@@ -57,7 +57,7 @@ void main() {
     // Shape the fire to rise from the bottom
     fireAmount *= (1.0 - uv.y);
 
-    vec3 fireColor = mix(vec3(0.9, 0.5, 0.1), vec3(1.0, 0.9, 0.3), fireAmount);
+    vec3 fireColor = mix(vec3(0.9, 0.3, 0.1), vec3(1.0, 0.9, 0.3), fireAmount);
     gl_FragColor = vec4(fireColor, fireAmount * 2.0);
 }
 `;

magic-mirror/src/shaders/screen-shaders.js

@@ -57,7 +57,7 @@ void main() {
         finalColor = baseColor;
     } else if (u_effect_type < 1.9) { // "Summon Vision" (Warm-up) effect
         // This is now a multi-stage effect controlled by u_effect_strength (0.0 -> 1.0)
-        float noiseVal = noise(vUv * 10.0);
+        float noiseVal = noise(vUv * 50.0 + vec2(0.0, u_time * -125.0));
         vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
         vec4 videoColor = texture2D(videoTexture, vUv);
 
@@ -75,7 +75,7 @@ void main() {
     } else { // "Vision Fades" (Power-down) effect
         // Multi-stage effect: Last frame -> fade to mist -> fade to transparent
 
-        float noiseVal = noise(vUv * 10.0);
+        float noiseVal = noise(vUv * 50.0 + vec2(0.0, u_time * 123.0));
         vec3 mistColor = vec3(0.8, 0.7, 1.0) * noiseVal;
         vec4 videoColor = texture2D(videoTexture, vUv);
 

magic-mirror/src/state.js

@@ -54,6 +54,7 @@ export function initState() {
     loader: new THREE.TextureLoader(),
     landingSurfaces: [],
     crawlSurfaces: [], // Surfaces for spiders to crawl on
+    rats: [], // Array to hold rats
     bookLevitation: {
         state: 'resting', // 'resting', 'levitating', 'returning'
         timer: 0,