21

私は3Dプログラミングの初心者ですが、Three.JSを使用してWebGLから3Dの世界を探索し始めました。

camera.position.zとオブジェクトの「Z」位置を変更するときに、オブジェクトのサイズを事前に決定したいと思います。

例： 100x100x100のサイズの立方体メッシュがあります。

cube = new THREE.Mesh(
        new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),     
        new THREE.MeshFaceMaterial()
    );

アスペクト比1.8311874のカム

camera = new THREE.PerspectiveCamera( 45, aspect_ratio, 1, 30000 );

画面上のその立方体オブジェクトのサイズ（2D幅と高さ）を知りたいのですが、

camera.position.z = 750;
cube.position.z = 500;

それを見つける/事前に決定する方法はありますか？

4

1 に答える 1

38

You can compute the visible height for a given distance from the camera using the formulas explained in Three.js - Width of view.

var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians
var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

In your case the camera FOV is 45 degrees, so 

vFOV = PI/4.

(Note: in three.js the camera field-of-view FOV is the vertical one, not the horizontal one.)

The distance from the camera to the front face (important!) of the cube is 750 - 500 - 50 = 200. Therefore, the visible height in your case is 

height = 2 * tan( PI/8 ) * 200 = 165.69.

Since the front face of the cube is 100 x 100, the fraction of the visible height represented by the cube is 

fraction = 100 / 165.69 = 0.60.

So if you know the canvas height in pixels, then the height of the cube in pixels is 0.60 times that value.

The link I provided shows how to compute the visible width, so you can do that calculation in a similar fashion if you need it.

于 2013-03-11T05:39:35.913 に答える