Question

我是3D编程的新手，需要一些帮助。

我有一个用户可以移动的XZ平面（使用OrbitControl），每当他们点击（或移动）鼠标时，我想找到当前可见的平面一角的世界空间坐标（类似于minx，miny，maxz，maxz）。

这是帮助说明问题的简单jsfiddle

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);

}

由于

Answer 1

识别平面与平截头体角相交的最简单方法是使用Raycaster从相机向下投射平截头体每个边（角）的光线，并查看光线与平面相交的位置。

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 );

    }

});

小提琴：http://jsfiddle.net/qawkvm0s/3/

three.js r.88

在当前视图中计算平面的角

1 个答案: