Javascript three.js正交摄影机：使用透视图缩放立方体_Javascript_Three.js_Orthographic_Projection Matrix

Javascript three.js正交摄影机：使用透视图缩放立方体

javascript three.js

Javascript three.js正交摄影机：使用透视图缩放立方体,javascript,three.js,orthographic,projection-matrix,Javascript,Three.js,Orthographic,Projection Matrix,我开发了一个简单的three.js应用程序来呈现一个立方体。我创建了三个文件：index.html、viewer\u style.css和viewer.js index.html的内容如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first three.js app</title> &l

我开发了一个简单的

three.js

应用程序来呈现一个立方体。我创建了三个文件：

index.html

、

viewer\u style.css

和

viewer.js

index.html

的内容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <link rel='stylesheet' type='text/css' href='viewer_style.css'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/three.js"></script>
        <script src="js/controls/OrbitControls.js"></script>
        <script src="js/renderers/Projector.js"></script>
    </head>
    <body>
        <script src="viewer.js"></script>
    </body>
</html>

// SCENE
var scene = new THREE.Scene();

// CAMERA
var frustumHeight;
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.OrthographicCamera(- frustumHeight * aspect / 2, frustumHeight * aspect / 2, frustumHeight / 2, - frustumHeight / 2, 1, 2000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;

// CUBE        
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshPhongMaterial({color: 0xbaf5e8, flatShading: true});
var cube = new THREE.Mesh( geometry, material );
cube.receiveShadow = true;
scene.add(cube);

// BOUNDING BOX
var helper_bbox = new THREE.BoxHelper(cube);
helper_bbox.update();
scene.add(helper_bbox);

// AXES
var helper_axes = new THREE.AxisHelper();
scene.add(helper_axes);

// FIT ALL:
var bbox_radius = helper_bbox.geometry.boundingSphere.radius;
if(aspect < 1){
    frustumHeight = 2 * bbox_radius;
}
else{
    frustumHeight = 2 * bbox_radius / aspect;
}
camera.left = - frustumHeight * aspect / 2;
camera.right = frustumHeight * aspect / 2;
camera.top = frustumHeight / 2;
camera.bottom = - frustumHeight / 2;
camera.updateProjectionMatrix();

// RENDERER
var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

// LIGHTS
var ambientLight = new THREE.AmbientLight(0x101010, 1.0); 
scene.add(ambientLight); 
directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); 
directionalLight.position.set(1.0, 1.0, 1.0).normalize(); 
scene.add(directionalLight); 
directionalLight_2 = new THREE.DirectionalLight(0xffffff, 1.0); 
directionalLight_2.position.set(-1.0, -1.0, 1.0).normalize(); 
scene.add(directionalLight_2); 

// CONTROLS
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera);

window.addEventListener( 'resize', onWindowResize, false );

function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

function onWindowResize(){   
    var aspect = window.innerWidth / window.innerHeight;
    camera.left   = - frustumHeight * aspect / 2;
    camera.right  =   frustumHeight * aspect / 2;
    camera.top    =   frustumHeight / 2;
    camera.bottom = - frustumHeight / 2;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);  
    camera.lookAt(scene.position);
}

animate();

camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;

我打算使用立方体边界球体的半径，以一定的边距将立方体拟合到场景中。如下图所示，它似乎工作正常：

但是，我将

viewer.js

中的相机位置更改为：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <link rel='stylesheet' type='text/css' href='viewer_style.css'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/three.js"></script>
        <script src="js/controls/OrbitControls.js"></script>
        <script src="js/renderers/Projector.js"></script>
    </head>
    <body>
        <script src="viewer.js"></script>
    </body>
</html>

// SCENE
var scene = new THREE.Scene();

// CAMERA
var frustumHeight;
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.OrthographicCamera(- frustumHeight * aspect / 2, frustumHeight * aspect / 2, frustumHeight / 2, - frustumHeight / 2, 1, 2000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;

// CUBE        
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshPhongMaterial({color: 0xbaf5e8, flatShading: true});
var cube = new THREE.Mesh( geometry, material );
cube.receiveShadow = true;
scene.add(cube);

// BOUNDING BOX
var helper_bbox = new THREE.BoxHelper(cube);
helper_bbox.update();
scene.add(helper_bbox);

// AXES
var helper_axes = new THREE.AxisHelper();
scene.add(helper_axes);

// FIT ALL:
var bbox_radius = helper_bbox.geometry.boundingSphere.radius;
if(aspect < 1){
    frustumHeight = 2 * bbox_radius;
}
else{
    frustumHeight = 2 * bbox_radius / aspect;
}
camera.left = - frustumHeight * aspect / 2;
camera.right = frustumHeight * aspect / 2;
camera.top = frustumHeight / 2;
camera.bottom = - frustumHeight / 2;
camera.updateProjectionMatrix();

// RENDERER
var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

// LIGHTS
var ambientLight = new THREE.AmbientLight(0x101010, 1.0); 
scene.add(ambientLight); 
directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); 
directionalLight.position.set(1.0, 1.0, 1.0).normalize(); 
scene.add(directionalLight); 
directionalLight_2 = new THREE.DirectionalLight(0xffffff, 1.0); 
directionalLight_2.position.set(-1.0, -1.0, 1.0).normalize(); 
scene.add(directionalLight_2); 

// CONTROLS
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera);

window.addEventListener( 'resize', onWindowResize, false );

function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

function onWindowResize(){   
    var aspect = window.innerWidth / window.innerHeight;
    camera.left   = - frustumHeight * aspect / 2;
    camera.right  =   frustumHeight * aspect / 2;
    camera.top    =   frustumHeight / 2;
    camera.bottom = - frustumHeight / 2;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);  
    camera.lookAt(scene.position);
}

animate();

camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;

在这种情况下，我得到如下结果：

在这种情况下，立方体未安装到屏幕上。我认为这是因为我在错误的参考系中测量边界球的半径。然而，我一直未能找到解决这个问题的办法

有人知道我做错了什么吗？我是否使用了正确的方法？提前感谢。

如果按照建议将

方面<1

更改为

方面>1

，则您的代码是正确的。下面是一个JSFIDLE代码，演示了这一点：

您的代码看起来不错。将

aspect<1

更改为

aspect>1

。为清晰起见，将

trustumize

重命名为

trustumheight

。谢谢。我编辑了这个问题，将

trustumize

更改为

trustumheight

。我还尝试将

aspect<1

更改为

aspect>1

，但也没有得到预期的结果。事实上，立方体现在在屏幕上更大了。我没有在问题中添加最后一个更改，因为我不太明白你为什么建议进行此更改。谢谢，现在它工作正常（愚蠢的错误）。然而，现在我有另一个问题。我实现了一个带有“全部缩放”功能的按钮。除了相机的位置、宽度和高度之外，我是否应该从控制中改变一些东西？当我平移对象，然后单击上面提到的按钮时，它一直在做奇怪的事情。