Question

我正在尝试检测对象的边界框上的单击（而不仅仅是对象本身 - 更多可点击区域）。当我像这样加载对象时：

＆＃13;

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

＆＃13;

并像这样检测点击：

＆＃13;

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");
          }

＆＃13;

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

我希望边界框是透明/不可见/隐藏的。有没有办法可以将一个边界框附加到可点击但不可见的对象上？

我读到了为了使边界框不可见我应该删除scene.add（bbox）; （不要将它添加到场景中），但如果我这样做，那么光线不会在场景中相交，因此点击不会被注册。

解决方案？

非常感谢!!!

Answer 1

您可以尝试将材质设置为不可见：

bbox.material.visible = false;

Answer 2

所以，似乎（至少）有两种解决方案。

正如@ prisoner849所建议的那样：

bbox.material.opacity = 0;
bbox.material.transparent = true;

正如@tomacco所建议并由@WestLangley提炼：

bbox.material.visible = false;

这两种解决方案都适合我！

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

2 个答案: