CODEWITHSUNDEEP
javascriptthree.js
Mary7678
Mary7678

Reputation: 443

Can I add an invisible bounding box to a three.js scene?

I am trying to detect a click on a bounding box for an object (rather than just on the object itself - more clickable area). When I load the object like this:

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

And detect the click like this:

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

The bounding box shows up correctly, and I can click on it!!!!! However, the bounding box is visible on the screen:

enter image description here

I want the bounding box to be transparent/invisible/hidden. Is there any way I can have a bounding box attached to the object which is clickable but not visible?

I read that to make the bounding box invisible I should remove the scene.add(bbox); (not add it to the scene), but if I do that, then it is not in the scene for the ray to intersect, and thus the click is not registered.

Solutions?

Thanks so much!!!

Upvotes: 2

Views: 2588

Answers (2)

tomacco
tomacco

Reputation: 309

You can try to set the material to invisible:

bbox.material.visible = false;

Upvotes: 4

Mary7678
Mary7678

Reputation: 443

So, there seem to be (at least) two solutions.

As suggested by @prisoner849:

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

As suggested by @tomacco and refined by @WestLangley:

bbox.material.visible = false;

Both of these solutions worked for me!

enter image description here

Upvotes: 0

Related Questions