three.js正交摄影机:将所有物体缩放为具有透视图的多维数据集 [英] three.js orthographic camera: zoom all for a cube with perspective
问题描述
我已经开发了一个简单的three.js应用程序，该应用程序呈现一个多维数据集.我创建了三个文件:index.html，viewer_style.css和viewer.js.
I have developed a simple three.js application that renders a cube. I have created three files: index.html, viewer_style.css and 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>
viewer.js的内容如下:
// 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();
我打算使用立方体的边界球的半径以一定的边距将立方体适合场景.如下图所示，它似乎可以正常工作:
I intend to fit the cube to the scene with a certain margin using the radius of the bounding sphere of the cube. It seems to work correctly, as it can be seen in the following image:
但是，我将viewer.js中的相机位置更改为以下位置:
However, I changed the camera position in viewer.js to the following:
camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;
在这种情况下，我得到这样的信息:
In this situation, I get something like this:
在这种情况下，多维数据集未安装到屏幕上.我认为这是由于我在错误的参考系统中测量边界球的半径这一事实.但是，我无法找到解决此问题的方法.
In this case, the cube is not fitted to the screen. I think this is due to the fact that I am measuring the radius of the bounding sphere in the wrong reference system. However, I have not been able to find a solution to this issue.
有人知道我在做什么错吗?我使用正确的方法吗?预先感谢.
Does anyone know what I am doing wrong? Am I using the right approach? Thanks in advance.
推荐答案
如果按照建议将aspect < 1更改为aspect > 1，则您的代码正确.这是一个带有您的代码的jsfiddle来演示此操作: https://jsfiddle.net/holgerl/kk5h39qa/
Your code is correct if you change aspect < 1 to aspect > 1, as suggested. Here is a jsfiddle with your code that demonstrates this: https://jsfiddle.net/holgerl/kk5h39qa/
这篇关于three.js正交摄影机:将所有物体缩放为具有透视图的多维数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
