Hộp giới hạn ba chiều 2D của đối tượng 3D

Question

Tôi cần tìm ra khu vực trên màn hình mà đối tượng 3D của tôi sử dụng.

Tôi đã cố gắng tìm câu trả lời của Google nhưng không thành công.

Chức năng geometry.computeBoundingBox() chỉ trả lại hộp giới hạn 3D.

Làm cách nào tôi có thể chuyển đổi hình ảnh này thành hộp giới hạn 2D?

Answer 1

Bạn chỉ cần có để chuyển đổi tất cả các đỉnh để không gian màn hình và thực hiện một hộp bounding 2D từ họ:

function computeScreenSpaceBoundingBox(mesh, camera) { 
    var vertices = mesh.geometry.vertices; 
    var vertex = new THREE.Vector3(); 
    var min = new THREE.Vector3(1); 
    var max = new THREE.Vector3(-1); 

    for (var i = 0; i < vertices.length; i++) { 
    var vertexWorldCoord = vertex.copy(vertices[i]).applyMatrix4(mesh.matrixWorld); 
    var vertexScreenSpace = vertexWorldCoord.project(camera); 
    min.min(vertexScreenSpace); 
    max.max(vertexScreenSpace); 
    } 

    return new THREE.Box2(min, max); 
} 

Kết quả là Box2 là ở tọa độ màn hình bình thường [-1, 1]. Bạn có thể nhận được các điểm ảnh bằng cách nhân với một nửa chiều cao và chiều rộng của renderer của bạn:

function normalizedToPixels(coord, renderWidthPixels, renderHeightPixels) { 
    var halfScreen = new THREE.Vector2(renderWidthPixels/2, renderHeightPixels/2) 
    return coord.clone().multiply(halfScreen); 
} 

Xem một cuộc biểu tình của nó ở đây: http://jsfiddle.net/holgerl/6fy9d54t/

EDIT: Giảm sử dụng bộ nhớ trong vòng lặp bên trong bằng cách gợi ý từ @WestLangley