# Javascript class contacs

**URL:** <https://discourse.threejs.org/t/javascript-class-contacs/74843>\
**Category:** Questions\
**Tags:** class, javascript\
**Created:** [December 5, 2024, 4:59pm UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843 "2024-12-05T16:59:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jo\_Youzarsif](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jo_youzarsif/32/58129_2.png) [@Jo\_Youzarsif](https://discourse.threejs.org/u/Jo_Youzarsif)\
**Post date:** [December 5, 2024, 4:59pm UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/1 "2024-12-05T16:59:00Z")

</div>

Hello,

I have a strange issue with javascript (I don’t think it’s a threeJS thing or not) where i have a class I use to organize my code, here’s the code:

```javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

export class SceneManager {

    scene;
    loaded;

    constructor(scene, loaded) {
        this.scene = scene;
        this.loaded = loaded;
    }

    initScene() {
        const loaderManager = new THREE.LoadingManager(
            () => {
                //loaded
                console.log("scene loaded");
            },
            (itemUrl, itemsLoaded, itemsTotal) => {
                // progress
                console.log(`loading: ${itemsLoaded}/${itemsTotal}`);
            },
            (url) => {
                //error
                console.log('There was an error loading ' + url);
            }
        );

        const gltfLoader = new GLTFLoader(loaderManager);
        const dracoLoader = new DRACOLoader(loaderManager);
        dracoLoader.setDecoderPath('/draco/');
        gltfLoader.setDRACOLoader(dracoLoader);
        const textureLoader = new THREE.TextureLoader(loaderManager);

        const tableTexture = textureLoader.load('./textures/table_texture.webp');
        const shelfTexture = textureLoader.load('./textures/shelf_texture.webp');

        loadGLB('table', tableTexture);
        loadGLB('shelf', shelfTexture);
        //... the function is called many times
        //... but the error occurred regadless of number of calls

        function loadGLB(name, tex) {
            gltfLoader.load(`./meshes/${name}.glb`, (gltf) => {
                gltf.scene.traverse((obj) => {
                    if (obj instanceof THREE.Mesh) {
                        obj.material = new THREE.MeshBasicMaterial({ map: tex });
                        this.scene.add(obj); // <--- the error point to here
                    }
                });
            });
        }
    }
}

```

An error pops up saying

```javascript
Cannot read properties of undefined (reading 'scene')

```

I don’t know what’s the propblem coming from, if I took the glb loader outside of the function it works, can anyone help me here? Thanks.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [December 5, 2024, 6:04pm UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/2 "2024-12-05T18:04:44Z")

</div>

Just a blind guess. Try with `that`:

> [@Jo\_Youzarsif](#):
>
> ```javascript
> var that = this; // <-- change 1 of 2
> 
> loadGLB('table', tableTexture);
> loadGLB('shelf', shelfTexture);
> 
> function loadGLB(name, tex) {
> gltfLoader.load(`./meshes/${name}.glb`, (gltf) => {
> gltf.scene.traverse((obj) => {
> if (obj instanceof THREE.Mesh) {
> obj.material = new THREE.MeshBasicMaterial({ map: tex });
> that.scene.add(obj); // <-- change 2 of 2
> }
> });
> });
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![Jo\_Youzarsif](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jo_youzarsif/32/58129_2.png) [@Jo\_Youzarsif](https://discourse.threejs.org/u/Jo_Youzarsif)\
**Post date:** [December 5, 2024, 7:48pm UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/3 "2024-12-05T19:48:10Z")

</div>

@PavelBoytchev  
that’s … worked

i have ZERO idea what you’ve done! I need to look it up! thanks

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [December 5, 2024, 9:47pm UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/4 "2024-12-05T21:47:38Z")

</div>

…also you can do (obj.isMesh) instead of (obj instanceof THREE.Mesh).

---

<div class="post-metadata">

**Author:** ![Jo\_Youzarsif](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jo_youzarsif/32/58129_2.png) [@Jo\_Youzarsif](https://discourse.threejs.org/u/Jo_Youzarsif)\
**Post date:** [December 6, 2024, 10:56am UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/5 "2024-12-06T10:56:43Z")

</div>

Hello, thanks for the tip, but does it relate to the issue or just a tip? thanks again  
is it for optemization?

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [December 6, 2024, 3:41pm UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/6 "2024-12-06T15:41:52Z")

</div>

The issue is `function loadGLB(name, tex) {`  
In the body of that function `this` will reference the function instead of the class that contains it.  
Simplest fix would be to do `const loadGLB = (name, tex) =>{...}`

Understanding [how `this` works in JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) is very important or you’ll end up with this kind of error regularly.

---

<div class="post-metadata">

**Author:** ![Jo\_Youzarsif](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jo_youzarsif/32/58129_2.png) [@Jo\_Youzarsif](https://discourse.threejs.org/u/Jo_Youzarsif)\
**Post date:** [December 6, 2024, 4:11pm UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/7 "2024-12-06T16:11:28Z")

</div>

ooo thanks for the explanation, that do make sense!

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [December 7, 2024, 12:19am UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/8 "2024-12-07T00:19:44Z")

</div>

it may be more performant, and also applies to other meshlike things like SkinnedMesh… and is just sorta idiomatic for threejs rather than relying on strict class equality.

---

<div class="post-metadata">

**Author:** ![Jo\_Youzarsif](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jo_youzarsif/32/58129_2.png) [@Jo\_Youzarsif](https://discourse.threejs.org/u/Jo_Youzarsif)\
**Post date:** [December 7, 2024, 1:47pm UTC](https://discourse.threejs.org/t/javascript-class-contacs/74843/9 "2024-12-07T13:47:50Z")

</div>

thanks for the tip, I looked it up and it is better as simple as instead of comparing and as you said, just check the bool inside the file that came with.