THREE.js Ray Intersect fails by adding div

by

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.

There are a lot of possible combinations, so you may have to experiment. Also, different browsers may act differently.

Assume your HTML is something like this:

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

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

Your JS is something like this:

var CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;

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

renderer = new THREE.WebGLRenderer();
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: http://jsfiddle.net/cn7ecoaa/

EDIT: Fiddle updated to three.js r.84

More Related Contents:

  1. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  2. How to stop a requestAnimationFrame recursion/loop?
  3. How to save canvas animation as gif or webm?
  4. How to Protect website code PHP / JS? [closed]
  5. Hover over image to get a box with multiple links in html/JavaScript
  6. How to decode HTML entities using jQuery?
  7. Can I escape HTML special chars in JavaScript?
  8. Simulation background-size: cover in canvas
  9. How can I simulate a click to an anchor tag?
  10. Map HTML to JSON [closed]
  11. className only changing every other class
  12. How to compare colors in JavaScript?
  13. focus doesn’t work in IE
  14. Access event to call preventdefault from custom function originating from onclick attribute of tag
  15. React: how to load and render external html file?
  16. How to add background-image using ngStyle (angular2)?
  17. Is it OK to add your own attributes to HTML elements? [duplicate]
  18. Change the style of an entire CSS class using javascript
  19. Scale a div to fit in window but preserve aspect ratio
  20. HTML5 video, how to detect when there is no audio track?
  21. jQuery in Chrome returns “block” instead of “inline”
  22. How do I retrieve if the popstate event comes from back or forward actions with the HTML5 pushstate?
  23. HTML5 Canvas Circle Text
  24. How to write into a file (in user directory) using JavaScript?
  25. Getting HTML elements by their attribute names
  26. NewLine escape character not working
  27. Setting the height of a DIV dynamically
  28. How do I restrict past dates in HTML5 input type Date?
  29. how to animate drawing lines on canvas
  30. How to replace the entire html webpage with ajax response?

Leave a Comment