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 :)

Piotr Adam Milewski · Accepted Answer · 2017-10-14 20:59:32Z

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)

edited Oct 14, 2017 at 20:59

answered Oct 14, 2017 at 16:10

Piotr Adam Milewski

14.7k3 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

You sir , are a true hero. It took me a while to convert it into my excisting code, but it works now! I did have to add the <a-entity foo> part manual via document.body.innerHTML += <a-entity foo></a-entity> so it would work with the coordinates from a GET request. But hey it works! Thanks

Collectives™ on Stack Overflow

Creating a new object in three.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related