带 THREE.js 的等距相机答案

【问题标题】：Isometric camera with THREE.js带 THREE.js 的等距相机
【发布时间】：2014-06-20 11:06:47
【问题描述】：

如何将相机角度设置为isometric projection 之类的东西？

【问题讨论】：

【解决方案1】：

要获得等轴测视图，您可以使用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 ) );

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

three.js r.73

【讨论】：

如果您将相机位置设置为 Z 轴上的 100，那么您将保持将防止使用相机上的近剪裁平面剪裁网格。为了保持相同的等轴测视图，您还需要更新 X Y 位置以匹配。第 44 行camera.position.set( 100, 100, 100 );

【解决方案2】：

你需要使用轨道和轨道控制，就像这里：

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

编辑：

您也可以考虑使用正射相机，这里的这篇文章可能会对您有所帮助：

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

【讨论】：

我想要一个固定的角度，而不是控件。
是的，我知道，控件将帮助您指定所需的角度，然后您可以将相机设置为您想要的角度。相机有rotationx、rotationy和rotationz，还有positionx、positiony和positionz
它实际上并没有帮助我，因为当我调试相机旋转时，它在欧拉对象而不是正常的弧度中。
也许我可以帮忙，如果你摆弄你想要的对象，以及你想要显示的确切视图。
没有对象，什么都没有。我需要将相机旋转到等距角度。就这么简单。