ThreeJS - 未在 material 对象上设置边界框

Question

我尝试将边界框添加到我的对象，但它似乎只对 testObj 有效，他对我的其他具有纹理的对象无效。

 var testObj = new THREE.Mesh(
    new THREE.CylinderGeometry( 1 , 1 , 4 , 8 ),
    new THREE.MeshLambertMaterial({ color: 0xff00ff })
  );
  scene.add(testObj );
  staticCollideMesh.push(testObj );

    // PADDLE1 
    loaderTexture.load('http://localhost:8000/WoodTexture.jpg', function (texture ) {
      var material = new THREE.MeshLambertMaterial( {
        map: texture
        });
        var geometry = new THREE.BoxGeometry(PADDLE_WIDTH, PADDLE_HEIGHT, PADDLE_DEPTH );
        paddle1 = new THREE.Mesh( geometry, material);
        paddle1.castShadow = true;
        paddle1.receiveShadow = true;
        paddle1.name = "paddle1";
        scene.add( paddle1 );       
        staticCollideMesh.push(paddle1);
    }, undefined, function ( err ) {
      console.error( 'WoodTexture1.jpg : An error happened.' );
    }
  );

这是我添加 BBox 和 BoxHelper 的方式：

let constructCollisionBoxes = function() {

    staticCollideMesh.forEach( function( mesh ){
        mesh.BBox = new THREE.Box3().setFromObject( mesh );
        mesh.BBoxHelper = new THREE.BoxHelper( mesh , 0xff0000 );
        scene.add( mesh.BBoxHelper );
    });
}

我不知道为什么循环只适用于我的圆柱体...我需要帮助来理解为什么这不起作用。

编辑：感谢@prisoner849，我刚刚在加载程序中添加了函数

scene.add(paddle1);
staticCollideMesh.push(paddle1);
constructionCollisionMesh();

Answer 1

在使用加载器的情况下，请记住，加载是异步的，因此当您调用 constructCollisionBoxes() 时，您的盒子的创建依赖于纹理加载完成的时刻，不在staticCollideMesh 数组。

要修复它，您可以这样做：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.25));

var staticCollideMesh = [];

var PADDLE_WIDTH = 3,
  PADDLE_HEIGHT = 3,
  PADDLE_DEPTH = 2;

var testObj = new THREE.Mesh(
  new THREE.CylinderGeometry(1, 1, 4, 8),
  new THREE.MeshLambertMaterial({
    color: 0xff00ff
  })
);
scene.add(testObj);
staticCollideMesh.push(testObj);

var texture = new THREE.TextureLoader().load(`https://threejs.org/examples/textures/uv_grid_opengl.jpg`);

// PADDLE1 
var material = new THREE.MeshLambertMaterial({
  map: texture
});
var geometry = new THREE.BoxGeometry(PADDLE_WIDTH, PADDLE_HEIGHT, PADDLE_DEPTH);
paddle1 = new THREE.Mesh(geometry, material);
paddle1.castShadow = true;
paddle1.receiveShadow = true;
paddle1.name = "paddle1";
scene.add(paddle1);
staticCollideMesh.push(paddle1);

let constructCollisionBoxes = function() {

  staticCollideMesh.forEach(function(mesh) {
    mesh.BBox = new THREE.Box3().setFromObject(mesh);
    mesh.BBoxHelper = new THREE.BoxHelper(mesh, 0xff0000);
    scene.add(mesh.BBoxHelper);
  });
}

constructCollisionBoxes();

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://unpkg.com/three@0.115.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.115.0/examples/js/controls/OrbitControls.js"></script>

ThreeJS - 未在 material 对象上设置边界框

ThreeJS - Bounding Box not set on object with material

bounding-box

three.js