Currently engaged in a project that involves creating 3D objects using Three.js, sourced from databases.
The connection is established, but encountering failures when attempting to generate 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
// Check whether maxSize is positive or negative.
let height = Math.abs(maxSize.value);
shape.moveTo(0, 0);
for (let i = 0; i < coords.length; 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 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 snippet of code may not be perfect, but I wish to debug it before refining it further. It's written with ES6 features in mind.
The issue arises when attempting to integrate the created figure into A-Frame, as it keeps throwing an error stating 'you can't add an object without an Object3D to the scene' or 'this.updateMorphTargets is not a function'.
If anyone has any insights or solutions to offer, they would be greatly appreciated.
Additional details regarding attempted fixes can be found here, but they also result in the same 'this.updateMorphTargets is not a function' error.
Thank you for your assistance!