I need to expand the clickable area for an object by detecting a click on its bounding box instead of just the object itself. Here is how I load the object:
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);
});To detect the click, I use the following code:
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 clickable bounding box works as expected, but it is visible on the screen:
https://i.sstatic.net/6nqGP.png
I want the bounding box to be transparent or invisible. Is there a way to make the bounding box attached to the object clickable but not visible?
I read that removing "scene.add(bbox);" will make the bounding box invisible, but then the click won't register because it's not in the scene. Any solutions for this issue?
Appreciate your help!