Creating my first custom object class

Questions
,
1

Hello everybody, nab question here, I am pretty familiar with three.js now but as a main C++ student I still struggle when trying to encapsulate things on javascript, here is an example of me trying to import a simple “box” class.

` export class Module extends THREE.Object3D {
  constructor(position)  {
    
    let geometry = new THREE.BoxGeometry(1, 32, 32);
    let material = new THREE.MeshPhongMaterial({
      color: 0xffffff,
      specular: new THREE.Color(0x131313),
      shininess: 5.0
    });
    let centre = new THREE.Vector3();
    geometry.computeBoundingBox();
    geometry.boundingBox.getCenter(centre);
    geometry.center();

    super(geometry, material);

    this.position.copy(centre);
    this.castShadow = true;
    this.receiveShadow = true;
 }        `

Then, when i simply add it into the Init function of my Index.js file (everything has been imported and works fine apparently, the compiler does not throw any errors) by going:

let modulo = new Module(“whateverposition”)
scene.add(modulo);

nothing appears, what am I doing wrong?

many thanks ^^

2

First - in general, it’s a bit risky to apply C++ / Java class-based coding style in js 1:1. Javascript code usually tends to be more open, flexible, and “global” - also js classes are still kind of a mess in progress. :man_shrugging:

On three examples page you can find source code for every example in bottom right - note that barely any of those, especially new ones, use classes / prototypes to create app logic.

Second - as for your issue, if you’re really strong about sticking with classes / inheritance, in this case the class you want to be extending is probably Mesh (Object3D is a very general representation of “anything in 3D” - it doesn’t use geometry or materials.)

1 Like
3

Sorry, I panicked, It was the (typical) nab mistake of cameras settings/position, the box has always been there (I had to change the parent class to the Mesh one though, many thanks for pointing that) i just could not see it! :smiley: :smiley: .

4

I don’t it’s a good idea to guide (especially new) JS developers away from classes. Using classes produces more clean and readable code than the previous prototype based style.

Yes, the official examples do not use classes yet. However, certain parts of the core were already converted to classes. And it is planned to move one with this task when import maps are available in all major browsers.

1 Like
5

[partial thread hijack, although with useful discussion related to the thread, so maybe it’s still helpful]

Well, that’s just opinion vs opinion, ain’t gonna fight about it. :sweat_smile: Personally I wouldn’t risk doing an entire project with pure js classes, unless it’s aided by TS, Angular 4+, or React components - kind of enough to look at obj2 loader example vs any other example in terms of readability and reusability. Kinda art for the sake of art - that’s all I wanted to suggest to OP - I still love classes, dw. :’)

[/partial thread hijack, although with useful discussion related to the thread, so maybe it’s still helpful]

1 Like