CODEWITHSUNDEEP
javascriptcamerathree.js
Corrosif
Corrosif

Reputation: 117

Threejs CameraHelper point coordinate

I would like to get control point of the rendering volume of a camera in three.js

it can be accessed by using a camera helper like in the camera example with attribute pointMap

console.log(cameraOrthoHelper.pointMap);

return :

c, cf1, cf2, cf3,cf4, cn1, cn2, cn3, cn4, f1, f2, f3, f4, n1, n2, n3, n4, p, t, u1, u2, u3

Threejs camera helper

My interest are in n1...n4 and f1...f4 (orange cube)

But the value seems to be wrong. what do i have to do to exploit thoses values in real world coordinates ?

Upvotes: 1

Views: 1710

Answers (1)

Wilt
Wilt

Reputation: 44316

Those points are set using the properties of the camera.

new THREE.OrthographicCamera( left, right, top, bottom, near, far );

So if you want to change the "orange box" you should just change the camera and your helper will also change...

UPDATE

You can get the camera helper matrix and apply it to the vertices that you are interested in. If you want the orange box this means you need the four near and four far points:

Near points:

cameraHelper.pointMap[n1][0]
cameraHelper.pointMap[n2][0]
cameraHelper.pointMap[n3][0]
cameraHelper.pointMap[n4][0]

Far points:

cameraHelper.pointMap[f1][0]
cameraHelper.pointMap[f2][0]
cameraHelper.pointMap[f3][0]
cameraHelper.pointMap[f4][0]

Apply the camera helper matrix to the points and you have them in world space. Before you do that you have to also update the worldMatrix of the orthographic camera, it seems the cameraHelper matrix depends on it:

camera.updateMatrixWorld();
point.applyMatrix4( cameraHelper.matrix );

Check a fiddle here that demonstrates that the code above works.

Upvotes: 2

Related Questions