Three JS - Ограничивающая рамка не установлена ​​на объекте с материалом

Question

Я пытался добавить Bounding Box к моему объекту, но, похоже, он работает только для 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 );
    });
}

Я не знаю, почему l oop применяется только для моего цилиндра ... Мне нужна помощь, чтобы понять, почему это не работает.

РЕДАКТИРОВАТЬ: благодаря @ тюрьме849 я только что добавил функцию в загрузчик

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>