Как настроить угол камеры на что-то вроде изометрической проекции?
Изометрическая камера с THREE.js
Ответ 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 - установить x-компоненту camera.rotation
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
Ответ 2
вам нужно использовать элементы управления орбитой и дорожкой, например здесь:
http://codepen.io/nireno/pen/cAoGI
Edit:
Также вы можете рассмотреть возможность использования ортокамеры. Этот пост может помочь вам:
Three.js - Орфографическая камера
можно увидеть пример:
http://threejs.org/examples/canvas_camera_orthographic.html
и вот ссылка (udacity), объясняющая использование:
https://www.udacity.com/course/viewer#!/c-cs291/l-158750187/m-169414761