I am encountering an error while trying to render an array of objects in a three.js scene.
The error message from three.js reads as follows:
three.module.js:8589 Uncaught TypeError: Cannot read property 'center' of undefined
at Sphere.copy (three.module.js:8589)
at Frustum.intersectsObject (three.module.js:9344)
at projectObject (three.module.js:21975)
at projectObject (three.module.js:22020)
at WebGLRenderer.render (three.module.js:21776)
at render (eval at ./app/components/View/scene.js (1.chunk.js:23),
This is the object I am attempting to render:
const models = {
cube: [
{
type: 'cube',
name: 'cube_1',
wire: true,
material: {
color: 'tomato',
},
soma: {
position: {
x: 0,
y: 0,
z: 0
},
rotation: {
x: 45,
y: 45,
z: 45
},
scale: {
x: 1,
y: 1,
z: 1
},
size: {
width: 40,
height: 40,
depth: 40
}
}
}
]
And here is how I am trying to render it:
const { soma, name, type, material, wire } = models.cube[0]
const widthC = soma.size.width
const heightC = soma.size.height
const depthC = soma.size.depth
window[`wire_${name}`] = new THREE.EdgesGeometry(new THREE.BoxGeometry( widthC, heightC, depthC ));
window[`wire_mat_${name}`] = new THREE.LineBasicMaterial( { ...material } );
window[`model_${name}`] = new THREE.LineSegments( `wire_${name}`,`wire_mat_${name}` )
scene.add( `model_${name}` );