Creating a new object in three.js

Question

I'm currently working on a project that involves making 3Dobjects in Threejs, based of databases.

I already have the connection etc, but it keeps failing when I try to create a new object.

    this.type = 'CustomObject';
    let shape = new THREE.Shape();
    const maxSize = coords.reduce((prev, current) => (Math.abs(prev.value) > Math.abs(current.value)) ? prev : current); // max Size but Abs
    // console.log("Max size before check : "+ maxSize.value);
    //Check weither maxSize is positive or negative.
    let height = Math.abs(maxSize.value);

    shape.moveTo(0, 0);
    for (let i = 0; i < coords.length; i++) {
        // console.log(coords[i]);
        shape.lineTo(coords[i].id, coords[i].value);
    }

    shape.lineTo(coords[coords.length - 1].id, -height - 3);
    shape.lineTo(0, -height - 3);
    shape.lineTo(0, 0);
    // let geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
    let extrudeSettings = {
        steps: 4,
        amount: 20,
        bevelEnabled: false,
        bevelThickness: 1,
        bevelSize: 1,
        bevelSegments: 1
    };
    this.geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    this.material = new THREE.MeshBasicMaterial({color: 0xCbcbcb});
    let object = new THREE.Mesh( this.geometry, this.material );
    this.createdGraph = object;
    console.log(this.createdGraph.Object3D);
    this.scene.add(this.createdGraph);
}

This is just part of the code, I know it's not the best. But I would like to work it before I clean it. It's writen with ES6 in mind.

The problem is that if you execute the code, it does create the figure I'd like to have.

A screengrab of the object created by the code.

But if I try to add it to A-Frame ( because I've worked with it before), it keeps giving me the error that I can't add an object without an Object3D to the scene or 'this.updateMorphTargets is not a function ' .

Anyone have any ideas ?

PS I've also tried this https://stackoverflow.com/a/31924233 idea, but that comes back with the ' this.updateMorphTargets is not a function' error.

Thanks :)

Answer 1

I'm not sure which parts give you the error,
I've copied Your code to a fiddle, added 3 coords, and it's working.

Judging from Your code, You've got bad scene references, in a-frame it's

this.el.sceneEl

assuming this is any entity, and this.scene does not refer to the scene.
Furthermore refer to three.js objects as object3D, not Object3D

---

I've only put the three.js object creation to a aframe component:

AFRAME.registerComponent("foo",{
  init:function(){
  //Your code here
  }
});

and placed an entity:

<a-entity foo> </a-entity>

---

Also I've placed the object by getting the scene reference, before adding:

this.el.sceneEl.object3D.add(object)