我想在three.js场景中渲染一个对象数组
我的问题是,当我尝试渲染对象时,three.js会返回此错误
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),
这是我试图渲染的对象
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
}
}
}
]
}
这就是我要做的事情
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}` );
答案 0 :(得分:1)
我相信你发布了一个PHP / javascript混合代码snipet。对于非PHP用户来说,这有点令人困惑,但看起来你在代码的最后两行传递字符串而不是对象:
window['model_${name}'] = new THREE.LineSegments( 'wire_${name}','wire_mat_${name}' );
scene.add( 'model_${name}' );
应该是:
window['model_${name}'] = new THREE.LineSegments( window['wire_${name}'],window['wire_mat_${name}'] );
scene.add( window['model_${name}'] );
希望它能帮助你前进......