javascript - 我可以在 three.js 场景中添加一个不可见的边界框吗？

Question

我正在尝试检测对对象边界框的点击(而不是仅仅对对象本身——更多可点击区域)。当我像这样加载对象时:

var loader2 = new THREE.ObjectLoader();
          loader2.load( "models/Platform/Platform.json", function(object, materials){
            object.rotation.x = - (Math.PI / 2);
            object.rotation.y = Math.PI;
            object.scale.set(.025, .025, .025);
            object.position.set(0, 1, .4);
            var bbox = new THREE.BoundingBoxHelper(object, 0xffffff);
            bbox.update();
            scene.add(object);
            scene.add(bbox);
            objects.push(bbox);
          });

然后像这样检测点击:

raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2();
        
        document.addEventListener( 'mousedown', onDocumentMouseDown, false );
        document.addEventListener( 'touchstart', onDocumentTouchStart, false );
        
        window.addEventListener( 'resize', onWindowResize, false );
        
        function onDocumentTouchStart( event ) {
          event.preventDefault();
          event.clientX = event.touches[0].clientX;
          event.clientY = event.touches[0].clientY;
          onDocumentMouseDown( event );
        }
        function onDocumentMouseDown( event ) {
          console.log("here");
          event.preventDefault();
          mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
          mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
          raycaster.setFromCamera( mouse, camera );
          console.log(mouse.x);
          console.log(mouse.y);
          var intersects = raycaster.intersectObjects( objects, true );
          if ( intersects.length > 0 ) {
            console.log("click");
          }

边界框正确显示，我可以点击它!!!!!!但是，边界框在屏幕上可见:

我希望边界框透明/不可见/隐藏。有什么方法可以将边界框附加到可点击但不可见的对象？

我读到要使边界框不可见，我应该删除 scene.add(bbox); (不将其添加到场景中)，但如果我这样做，则光线不在场景中相交，因此不会记录点击。

解决方案？

非常感谢!!!

Answer 1

可以尝试将 Material 设置为不可见:

bbox.material.visible = false;