CODEWITHSUNDEEP
3dthree.js
medan
medan

Reputation: 13

Compute corner of the plane in the current view

I am pretty new with 3D programming and need some help.

I have an XZ plane that a user can move around (using OrbitControl) and whenever they click (or move) the mouse, I want to find the world space coordinates at the corner of the plane that are currently visible (something like minx, miny, maxz, maxz).

Here is the simple jsfiddle to help illustrate the question

http://jsfiddle.net/qawkvm0s/1/

var camera, scene, renderer, controls, plane;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 250, 500);
    scene.add(camera);
    
    controls = new THREE.OrbitControls( camera );

    createPlane();

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    
    document.body.addEventListener("click", function() {
        // compute corner vertices of the plane that are visible in current view
    });
}

function createPlane() {
    var numOfXTiles = 30;
    var numOfYTiles = 30;
    var geometry = new THREE.PlaneGeometry(numOfXTiles * 256, numOfYTiles * 256, numOfXTiles, numOfYTiles);
	
	var material = new THREE.MeshBasicMaterial({
		wireframe: true
	});
	plane = new THREE.Mesh(geometry, material);
	plane.rotation.x = Math.PI / 2;
			
	scene.add(plane);
			
}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {


    controls.update();
    renderer.render(scene, camera);

}

Thanks

Upvotes: 1

Views: 455

Answers (1)

WestLangley
WestLangley

Reputation: 104783

The easiest way to identify where a plane intersects the corners of the frustum is to use Raycaster to cast a ray from the camera down each edge (corner) of the frustum and see where the ray intersects the plane.

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

...

document.body.addEventListener("click", function() {

    mouse.x = + 1; // use + 1 and - 1
    mouse.y = + 1; // use + 1 and - 1

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObjects( [ plane ] ); 

    if ( intersects.length > 0 ) {

        var geometry = new THREE.SphereGeometry( 10, 12, 6 );
        var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        var mesh = new THREE.Mesh( geometry, material );
        mesh.position.copy( intersects[ 0 ].point );
        scene.add( mesh );

    }

});

fiddle: http://jsfiddle.net/qawkvm0s/3/

three.js r.88

Upvotes: 1

Related Questions