我在世界上有一些对象(可以忽略z坐标),并且使用固定参数(左,右,上,下,近,远)初始化了Orthographic camera。我希望所有选择的对象都可以在相机的近似isometric视角下看到,因此我选择了归一化向量(0.5, 0.5, 0.707)
作为forward
(另请参见{ {3}}的方向,然后计算在法线向量为归一化forward
向量的平面上的投影。我计算了归一化视图平面和目标Box之间的比例值,然后调整了摄影机的位置并将其设置为正确的位置。
但是,计算出来的结果正是我想要的。那怎么了我应该如何使用THREE.js实现等轴测视点?
const viewWidth = window.innerWidth, viewHeight = window.innerHeight;
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_camera.html
//https://stackoverflow.com/questions/10716632/camera-arguments-in-three-js
//https://www.script-tutorials.com/webgl-with-three-js-lesson-9/ https://docs.unity3d.com/ScriptReference/Transform.LookAt.html
//predefines the world space direction in which the camera is looking. Camera.getWorldDirection
const forwardDirection = new THREE.Vector3(0.5, 0.5, 0.707);
const objectSizes = bboxMap.getSize();
console.log('objectSizes', objectSizes);
//https://gamedev.stackexchange.com/questions/43588/how-to-rotate-camera-centered-around-the-cameras-position
//https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
//camera = new THREE.PerspectiveCamera(45, viewWidth / viewHeight, 0.1, 10000); //VIEW_ANGLE, ASPECT, NEAR, FAR
camera = new THREE.OrthographicCamera(viewWidth / -2, viewHeight / 2, viewWidth / 2, viewHeight / -2, 10, 1000);
//camera.position.copy(centerPoint); camera.position.z = 800; the camera starts at 0,0,0 so pull it back
//https://answers.unity.com/questions/799656/how-to-keep-an-object-within-the-camera-view.html
//https://www.studica.com/blog/isometric-camera-unity
//https://www.zhihu.com/question/285948251
objectSizes.projectOnPlane(forwardDirection);
const scaleX = viewWidth / objectSizes.x;
const scaleY = viewHeight / objectSizes.y;
//camera.position.copy(forwardDirection.multiplyScalar(Math.max(objectSizes.x, objectSizes.y)));
camera.position.copy(forwardDirection.multiplyScalar(Math.max(scaleX, scaleY)));
camera.up.set(1, 1, 2); //isometric camera
camera.lookAt(scene.position); //camera.lookAt(centerPoint) //camera.lookAt(centerPoint.x, centerPoint.y, 0);
控制台日志:
canvas: 625 375 , screen: 820 706
centerPoint Vector3 {x: 209, y: 65, z: 0}
Box3 {
min: Vector3 {x: -11, y: -11, z: -6}
max: Vector3 {x: 429, y: 141, z: 6}
}
objectSizes Vector3 {x: 440, y: 152, z: 12}
在以下使用3ds max的示例中,我可以沿固定方向(0.5, 0.5, 0.707)
移动相机,并将这些对象放置在左视口窗口内(请注意左上角的[OrthoCamera])。