Help with SelectionHelper.js and SelectionBox.js

Questions
,
1

Hi all.

I have been trying to addapt the great code existing on github about SelectionHelper.js and SelectionBox.js in order to make it work with an orthographic camera but I have been unable to make it work.

I know that with orthographic camerathe logic should be simpler than with using a perspective camera but all my tries have been unsuccessfull.

Could anybody help me?

Best regards

2

So what have you tried so far^^? It’s best to share your current progress as a live example.

3

Hi Michael.

My main problem is under the SelectionBox in the function createFrustum.

selectionBox.createFrustum = function ( startPoint, endPoint )

My main problem is that I don’t know how to project the 2 points (startPoint, endPoint ) in the near frustum plane.

My approach was this one:

1.- create a frustum with the current camera values:

selectionBox.camera.updateMatrix(); // make sure camera's local matrix is updated
selectionBox.camera.updateMatrixWorld(); // make sure camera's world matrix is updated
selectionBox.camera.matrixWorldInverse.getInverse( camera.matrixWorld );
var frustum = new THREE.Frustum();
frustum.setFromMatrix( new THREE.Matrix4().multiplyMatrices( selectionBox.camera.projectionMatrix, selectionBox.camera.matrixWorldInverse ) );

2.- Once I have the full screen frustum I want to addapt the LEFT, RIGHT, TOP and BOTTOM plane constants of my frustum.planes[] by projecting the 2d mouse selected points into the near plane of the frustum. I don’t care about near and far plane constants.

My problems:
1.- In the frsutum documentation it says nothing about which are the 6 planes inside of a Frustum, I guess that the order is left , right , top, bottom, near, far but I am not sure. So my first problem is to identify the frustum.planes provided array.
2.- I don’t know how to project these 2 (2d points with screen coordinates) into the frustum near plane. I have tried the same approach that is used in the perspective way by using unproject but the results are not the expected.

var tmpPoint = startPoint.clone();
tmpPoint.x = Math.min( startPoint.x, endPoint.x );
tmpPoint.y = Math.max( startPoint.y, endPoint.y );
endPoint.x = Math.max( startPoint.x, endPoint.x );
endPoint.y = Math.min( startPoint.y, endPoint.y );
				
var vecNear = selectionBox.aCamera.position.clone();
var vecTopLeft = tmpPoint.clone();
var vecTopRight = new THREE.Vector3( endPoint.x, tmpPoint.y, 0 );
var vecDownRight = endPoint.clone();
var vecDownLeft = new THREE.Vector3( tmpPoint.x, endPoint.y, 0 );
				
vecTopLeft.unproject( selectionBox.aCamera );
vecTopRight.unproject( selectionBox.aCamera );
vecDownRight.unproject( selectionBox.aCamera );
vecDownLeft.unproject( selectionBox.aCamera );

Best regards

4

Some feedback to the first code section:

  • As long as camera.matrixAutoUpdate is set to true, you don’t have to call updateMatrix(). That happens automatically in updateMatrixWorld(). Besides, the view matrix (inverse world matrix of the camera) is also computed in updateMatrixWorld(). So this code is sufficient:
selectionBox.camera.updateMatrixWorld();
var frustum = new THREE.Frustum();
frustum.setFromMatrix( new THREE.Matrix4().multiplyMatrices( selectionBox.camera.projectionMatrix, selectionBox.camera.matrixWorldInverse ) );

Apart from that, I’m not familiar with the code in SelectionBox so it will take some time until I can provide proper feedback. As far as I can see, the implementation and the naming conventions of the class are not optimal. This will make it more complicated to study what’s going on…

5

Hi Mugen.

Many thanks for your support.

In the mean time I will try to solve the problem and keep you informed if I find a solution.

Best regards

6

Just a small question.

About frustum planes created from current camera, is there any preset order like when you create an orthographic camera ( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number) or not?

Best regards