Extending Object3D - Typescript

Questions
1

Hi,

I’m working on a library for 2d support based on three.js and I wanted to create custom classes based on the Object3D.

Problem: when running the app it gives me this error

image
image818×222 10.2 KB

Funny thing is, if I extend from Group instead it works. So my question is what is special about extending Object3D vs other specialization of the class defined by three.js

2

It worked for me.

Example,

class CustomObject3D extends THREE.Object3D {
    customProperty: boolean
    constructor(customProperty: boolean) {
        super()
        this.customProperty = customProperty
        console.log("in CustomObject3D constructor")
    }
}

const customObject3D = new CustomObject3D(true)
customObject3D.position.set(1, 2, 3)

Make sure your tsconfig.json targets ES6 or higher
E.g.,

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "node",
        "strict": true
    },
    "include": ["**/*.ts"]
}
3

Thanks for the reply! I’ll double check my setup

But out of curiosity, have you actually tried to add it to a scene and render it? Because I have no issues extending it but the error seems to be thrown when renderer is collecting object to render.

4

I extend a lot of three classes, but you likely don’t want to extend Object3D itself if your going to be drawing something with it. Also, be careful with overriding fields, it’s safest (but not always convenient) to use userData for any data for future proofing against any conflicts.

class MyTree extends Object3D {
  override userData = {
        height: 5
   }
}

You may want to use mesh, eg:

class MyCircle extends Mesh<BufferGeometry, MeshBasicMaterial> {
...
}
1 Like
5

Thanks @alexpineda

For now I’ll just extend the Group, which seems to be working fine. The use case is a 2d Sprite object, and I’m handling anchoring the texture and other sprite related features inside this group. Internally I have a mesh with a PlaneGeometry representing the sprite, and I’m adding that as a child to the parent Group representing the Sprite.

Now that you mentioned it, I think it might have worked by extending Mesh directly and playing with the geometry transformation instead…