THREE.js Ray Intersect fails by adding div

Question

My Three.js script runs fine when there is only one target div on the page (which holds renderer.domElement). As soon as I add another div with fixed height and width above the target div, ray.intersectObjects returns null. I doubt that the vector that I am creating for ray is causing the problem. Here is the code.

var vector = new THREE.Vector3( ( event.clientX / divWidth ) * 2 - 1, -( event.clientY / divHeight ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

var intersects = ray.intersectObjects( myObjects, true );

Any ideas on how I can solve this.

EDIT: it is now THREE.Raycaster (three.js r.56)

Samuel RIGAUD · Accepted Answer · 2024-07-13 19:47:31Z

48

The short answer is you have to take into consideration the offset of the canvas.

The long answer depends on how your code is written, so I'll give you two answers, which should cover the bases.

Assume your HTML is something like this:

<style>
    #canvas {
        width: 200px;
        height: 200px;
        margin: 100px;
        padding: 0px;
        position: static; /* fixed or static */
        top: 100px;
        left: 100px;
    }
</style>

<body>
    <div id="canvas"></div>
</body>

Your JS is something like this:

const CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;

const container = document.getElementById( 'canvas' );
document.body.appendChild( container );

const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container.appendChild( renderer.domElement );

Method 1 For the following method to work correctly, set the canvas position static; margin > 0 and padding > 0 are OK

mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;

Method 2 For this alternate method, set the canvas position fixed; set top > 0, set left > 0; padding must be 0; margin > 0 is OK

mouse.x = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1;
mouse.y = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;

Here is a Fiddle if you want to experiment: https://jsfiddle.net/uf4c0ws9/

EDIT: Fiddle updated to three.js r.150

edited Jul 13, 2024 at 19:47

Samuel RIGAUD

1,6981 gold badge19 silver badges28 bronze badges

answered Nov 24, 2012 at 18:34

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charlotte Over a year ago

You may need to multiply the numerator on the mouse x and y calculations by renderer.devicePixelRatio for the devices (retina displays etc.) where that value is not equal to one.

LF-DevJourney · Accepted Answer · 2019-05-29 00:48:59Z

enent.clientX is the client window offset, so to calculate the mouse position we also have to use the renderer element client window offset. Use the element.getBoundingClientRect() to get the element rect offset the window.

var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

<html>
<head>
<script src="http://threejs.org/build/three.min.js"></script>

    <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" />


<style>
body {
    font-family: Monospace;
    background-color: #fff;
    margin: 0px;
    overflow: hidden;
}

#canvas {
    background-color: #000;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 10px;
    padding: 0px;
    top: 10px;
    left: 100px;
}

.border {
    padding:10px; 
    margin:10px;
}

</style>
</head>
<body>
<div class="border">
	<div class="border">
		<div id="canvas"></div>
	</div>
</div>
<script>
// Three.js ray.intersects with offset canvas

var container, camera, scene, renderer, mesh,

    objects = [],
    
    count = 0,

    CANVAS_WIDTH = 200,
    CANVAS_HEIGHT = 200;

// info
info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#f00';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1';
info.style.fontFamily = 'Monospace';
info.innerHTML = 'INTERSECT Count: ' + count;
info.style.userSelect = "none";
info.style.webkitUserSelect = "none";
info.style.MozUserSelect = "none";
document.body.appendChild( info );

container = document.getElementById( 'canvas' );

renderer = new THREE.WebGLRenderer();
renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container.appendChild( renderer.domElement );

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 45, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
camera.position.y = 250;
camera.position.z = 500;
camera.lookAt( scene.position );
scene.add( camera );

scene.add( new THREE.AmbientLight( 0x222222 ) );

var light = new THREE.PointLight( 0xffffff, 1 );
camera.add( light );

mesh = new THREE.Mesh( 
	new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 ), 
	new THREE.MeshPhongMaterial( { color : 0x0080ff } 
) );
scene.add( mesh );
objects.push( mesh );

// find intersections
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// mouse listener
document.addEventListener( 'mousedown', function( event ) {
    
 var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
  
	raycaster.setFromCamera( mouse, camera );

    intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0 ) {
        
        info.innerHTML = 'INTERSECT Count: ' + ++count;
        
    }

}, false );

function render() {

    mesh.rotation.y += 0.01;
    
    renderer.render( scene, camera );

}

(function animate() {

    requestAnimationFrame( animate );

    render();

})();

</script>
</body>
</html>

I got good results by modifying mouse.x denominator mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
@beepscore your comment is correct and helped me a lot, thanks

danivicario · Accepted Answer · 2015-02-25 11:04:13Z

4

WestLangley, thanks a lot for your explanation. It was really helpful as usual.

In my case, I had my chart in a div absolutely positioned, so I had to do this:

    var offset = $('.rightBlock').offset();


    mouse.x = ( ( event.clientX - offset.left ) / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( ( event.clientY - offset.top ) / renderer.domElement.height ) * 2 + 1;

Where rightBlock is my container, that uses only 70% of the screen.

You inspired me and help me solving this problematic issue! Thanks a lot.

answered Feb 25, 2015 at 11:04

danivicario

1,8511 gold badge19 silver badges24 bronze badges

1 Comment

Displee Over a year ago

well, this doesn't work when you zoom out the geometry, there will be an offset, do you know how to fix this?

Cezary Cezary · Accepted Answer · 2023-03-20 07:49:03Z

0

I had a div (slider) with position absolute and a canvas nested inside.

<div class='slider'><div id="canvas-container"></div></div>

const canvasContainer: HTMLElement = document.getElementById('canvas-container');

this.renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
canvasContainer.appendChild(this.renderer.domElement);


const renderer = this.renderer.domElement.getBoundingClientRect();
this.mouse.x = ( ( e.clientX - renderer.left ) / ( renderer.right - renderer.left ) ) * 2 - 1;
this.mouse.y = - ( ( e.clientY - renderer.top ) / ( renderer.bottom - renderer.top) ) * 2 + 1;

this.raycaster.intersectObject(this.model, true);

answered Mar 20, 2023 at 7:49

Cezary Cezary

412 bronze badges

Collectives™ on Stack Overflow

THREE.js Ray Intersect fails by adding div

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related