三个 JS 渲染对象数组

Question

我想在 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}` );

Answer 1

我相信您发布的是 PHP/javascript 混合代码片段。对于非 PHP 用户来说，起初这有点令人困惑，但看起来您在代码的最后 2 行中传递的是字符串而不是对象：

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}'] );

希望它能帮助你前进...