与THREE.js的等距相机

时间:2014-05-03 22:42:20

标签: three.js

如何将摄像机角度设置为isometric projection

2 个答案:

答案 0 :(得分:38)

要获得等轴测视图,您可以使用OrthographicCamera。然后,您需要正确设置相机的方向。有两种方法可以做到这一点:

方法1 - 使用camera.lookAt()

var aspect = window.innerWidth / window.innerHeight;
var d = 20;
camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );

camera.position.set( 20, 20, 20 ); // all components equal
camera.lookAt( scene.position ); // or the origin

方法2 - 设置camera.rotation

的x分量
camera.position.set( 20, 20, 20 );
camera.rotation.order = 'YXZ';
camera.rotation.y = - Math.PI / 4;
camera.rotation.x = Math.atan( - 1 / Math.sqrt( 2 ) );

Isometric View Using Orthographic Camera

小提琴:http://jsfiddle.net/q3m2kh5q/

three.js r.73

答案 1 :(得分:1)

你需要使用轨道和跟踪控件,如下所示:

http://codepen.io/nireno/pen/cAoGI

编辑:

你也可以考虑使用ortho camera这篇文章可以帮到你:

Three.js - Orthographic camera

这里可以看到一个例子:

http://threejs.org/examples/canvas_camera_orthographic.html

这是一个解释用法的链接(udacity):

https://www.udacity.com/course/viewer#!/c-cs291/l-158750187/m-169414761