计算当前视图中平面的角

Question

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

我有一个用户可以四处移动（使用 OrbitControl）的 XZ 平面，每当他们单击（或移动）鼠标时，我想在平面的角处找到世界 space 坐标当前可见（类似于 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 );

    }

});

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

three.js r.88

计算当前视图中平面的角

Compute corner of the plane in the current view

3d

three.js