Cannot read properties of undefined (reading 'actualRoom')

Questions
1

I everyone, I’m stuck with this since 4h hours now…

Try everything I can…

import * as THREE from "three";
import Experience from "../Experience.js"
import GSAP from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger.js";

export default class Controls {
    constructor() {
        this.experience = new Experience();
        this.scene = this.experience.scene;
        this.sizes = this.experience.sizes;
        this.resources = this.experience.resources;
        this.time = this.experience.time;
        this.camera = this.experience.camera;
        this.room = this.experience.world.room.actualRoom;
       
        GSAP.registerPlugin(ScrollTrigger);
        

       this.setPath();
       console.log("prout");

    }

    setPath(){
        console.log("prout");
        this.timeline = new GSAP.timeline();
        this.timeline.to(this.room.position, {
            x: 5,
            duration: 20,
        });
    }

    resize() {}

    update() {

    }


}

This is Controls and the next one is Experience

import * as THREE from "three";

import Sizes from "./Utils/Sizes.js";
import Time from "./Utils/Time.js";
import Resources from "./Utils/Resources.js";
import assets from "./Utils/assets.js";

import Camera from "./Camera.js";
import Renderer from "./Renderer.js";

import World from "./World/World.js"
import Controls from "./World/Controls.js";

export default class Experience{
    static instance 
    constructor(canvas){
        if(Experience.instance){
            return Experience.instance
        }
        Experience.instance = this;
        this.canvas = canvas;
        this.scene = new THREE.Scene();
        this.time = new Time();
        this.sizes = new Sizes();
        this.camera = new Camera();
        this.renderer = new Renderer();
        
        this.resources = new Resources(assets);
        this.world = new World();
        this.controls = new Controls();

        this.time.on("update", ()=>{
            this.update();
        })

        this.sizes.on("resize", ()=>{
            this.resize();
        })
        
    }

    update(){
        this.camera.update();
        this.renderer.update();
        this.world.update();
        this.controls.update();

    }

    resize(){
        this.camera.resize();
        this.renderer.resize();
        this.world.resize();

    }
}

Thank’s for your help !!!

2

But it’s your custom code for what I see - the only person who may know why that property isn’t defined is… you :smiling_face_with_tear:

The error just says that this.experience.world.room.actualRoom is not defined (more precisely - room is not defined.)

Try not to overcomplicate OOP - it’s complex and hard enough to maintain even when well structured. Try combining Experience, World, and scene into a single class - and divide only when it’s necessary.

6

How are you stuck at the problem with someone else’s custom code :face_with_peeking_eye: ? Or just with cannot read properties of undefined?

If the second - please share the entire error message. You’re then just attempting to read property of an object that does not exist.