У меня есть несколько объектов (z-координаты можно игнорировать) в мире, и Orthographi c камера , инициализированная с фиксированными параметрами (слева, справа, сверху, снизу рядом, далеко). Я хочу, чтобы все выбранные объекты были видны с приблизительной изометрии c для камеры, поэтому я выбрал нормализованный вектор (0.5, 0.5, 0.707) в качестве forward (см. Также переднюю ось на Размещение камеры: направление LookAt ) камеры, а затем вычислили проекцию на плоскость, вектор нормали которой является нормализованным вектором forward. Я вычислил масштабное значение между нормализованной плоскостью обзора и целевым боксом, а затем положил камеру и установил ее в правильное положение.
Однако я рассчитал результат пересчета. Так что не так? Как мне реализовать точку зрения isometri c, используя 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] в верхнем левом углу).
