Изометрическая камера с 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