question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Raycaster.setFromCamera is incorrect for back half of OrthographicCamera frustum.

See original GitHub issue

It appears to be failing here

Correct calculation, to start the ray from back of the frustum I think should be:

this.ray.origin.set( coords.x, coords.y, camera.near / ( camera.near - camera.far ) ).unproject( camera ); 

Notice the sphere position is not updated in back half of the frustum in live example:

Three.js version
  • Dev
Browser
  • All of them
OS
  • All of them

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
WestLangleycommented, Sep 26, 2018

The three.js examples should not be using a negative near plane. Rendering objects that are behind the camera can be confusing to users and can cause objects to be back-lit. Raycasting from the near clipping plane when the near clipping plane is behind the camera will result in the returned distance to the the intersected object being incorrect.

1reaction
arodiccommented, Sep 15, 2018

@Mugen87 right now I used negative plane for convenience. For example if I wanted to rotate OrthographicCamera around a point and see entire scene, I could simply put the camera there, set near/far to encompass the scene and rotate (no target/lookAt required).

However, I think this boils down do how we think about cameras. Perspective camera is kind of like a real world camera. Its projection geometry is a frustum and it shoots things in front of its center.

Orthographic camera, on the other hand, has a cuboid projection geometry and restricting it to front of the camera center seems arbitrary. Moreover, threejs examples use negative near plane and rendering a scene with negative near plane results with a perfectly fine and expected result…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Three.js Inaccurate Raycaster - javascript - Stack Overflow
Maybe this has to do with use of an orthographic camera? Or not updating some required matrix? function onMouseDown(event) { event.
Read more >
Raycaster#setFromCamera – three.js docs
This class is designed to assist with raycasting. Raycasting is used for mouse picking (working out what objects in the 3d space the...
Read more >
https://network.aia.org/HigherLogic/System/Downloa...
Frustum =function(a,b,c,d,e,g){this.planes=[void 0!==a?a:new THREE. ... OrthographicCamera?(this.ray.origin.set(b.x,b.y,-1).unproject(c) ...
Read more >
graphicsbook-linked-1.1.pdf - Introduction to Computer Graphics
even if in the image of the house is in back of the tree). ... top line, the line as it is drawn...
Read more >
Three. js and TypeScript | Sean Bradley - Skillshare
They affect the frustum of what will be converted to 2D and drawn onto the HTML canvas by the render on. Okay, so...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found