Предисловие
Thre.JS - это библиотека 3DJS, одна из самых превосходных фреймворков с открытым исходным кодом WebGL. В дополнение к Webgl, Thre.js также предоставляет рендеринг на основе тегов Canvas и SVG. Рекомендуется использовать Chrome или Firefox для отладки.
1. Камера
Камера в графике определяет, как проецируется трехмерное пространство для двухмерных экранов.
Для методов проекции камеры делятся на ортогональные проекционные камеры и перспективные проекционные камеры.
2. Разница и объем применения двух камер
Ортогональная проекция:
Перспективная проекция:
Ортогональная проекция похожа на изображение в классе математики; В то время как перспективная проекция имеет основную точку, то есть объекты на расстоянии меньше, чем объекты в ближайшем и больше и меньше в ближайшем.
Для программного обеспечения для рисования и моделирования обычно используется ортогональная проекция; Для большинства других приложений обычно используется прогрессивная проекция.
3. Ортогональная проекционная камера
Конструктор ортогональной проекционной камеры:
Three.othographicCamera (слева, справа, вверху, внизу, рядом, далеко)
Шесть параметров представляют позиции шести грани, захваченных ортогональной проекционной камерой.
Среди них рядом представляет вертикальное расстояние между ближней плоскостью и центральной точкой камеры ; FAR представляет вертикальное расстояние между дальней плоскостью и центральной точкой камеры .
Чтобы поддерживать горизонтальное и вертикальное соотношение камеры , соотношение (правого левого) к (верхней части) должно соответствовать соотношению сторон холста.
Как видно из рисунка, значения ближнего и дальнего должны быть положительными и почти близкими . Если последние два значения составляют (0, 0), то есть значения, близкие и далеко, одинаковы, глубина просмотра тела исчезла, и все просмотр корпуса прижимается в плоскость, дисплей будет неверным.
4. Пример ортогональной проекционной камеры
Исходный код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <Title> 3.JS Test 2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </canvas> <script type = "javascript" src = "js/try.min. type = "text/javascript"> function init () {var renderer = new Three.WebGlenderer ({canvas: document.getElementById ('maincanvas')}); renderer.setClearcolor (0x0000000); var scene = new Three.Scene (); // Установить камеру VAR Camera = new Three.othographicCamera (-2, 2, 1,5, -1,5, 1, 10); Camera.position.Set (0, 0, 5); //camera.lookat(new three.vector3 (0, 0, 0)); Scene.add (камера); // Создать куб VAR Cube = new Three.mesh (new Three.cubegeometry (1, 1, 1), New Three.meshbasicmaterial ({color: 0xff0000, каркас: true})); Scene.add (куб); // render renderer.render (сцена, камера); } </script> </body> </html> Где, если свойство каркаса THREE.MeshBasicMaterial верно , материал будет оказаться в каркасе.
Вы можете видеть, что край за текущим положением полностью совпадает с тем, что впереди:
4.1 Измените длину и соотношение ширины вида
Здесь соотношение сторон холста составляет 4: 3, горизонтальное расстояние камеры составляет 4, а вертикальное расстояние - 3, поэтому соотношение длины и ширины остается неизменным (1: 1).
Если горизонтальное расстояние камеры уменьшено до 2,
var Camera = new Three.othographicCamera (-1,1,1,5, -1,5,1,10);
Объекты будут удлинены:
Поле зрения камеры стало уже, что привело к увеличению боковой доли куба в поле зрения, которое проявляется как расширение куба.
4.2 Измените положение камеры
Положение камеры в примере (0,0,5). Поскольку камера по умолчанию помещается в негативном направлении оси Z, вы можете увидеть куб на начале координат.
Переместите положение камеры на 1 блок справа:
var Camera = new Three.othographicCamera (-2,2,1,5, -1,5,1,10); Camera.position.Set (1,0,5);
Камера обращается к объекту, поэтому камера движется вправо, а освещенный объект движется влево:
4.3 Измените положение вида
Установите представление вправо:
var Camera = new Three.othographicCamera (-1,3,1,5, -1,5,1,10); Camera.position.Set (1,0,5);
Так же, как перемещение камеры правильно.
4.4 Измените угол камеры
Camera.position.Set (4, -3,5); Camera.lookat (новый три. Vector3 (0, 0, 0));
Но теперь камера наблюдает вдоль негативного направления оси Z, поэтому куб не может быть замечен, можно увидеть только кусок черного. Мы можем указать направление происхождения через функцию общения:
Camera.lookat (новый три. Vector3 (0, 0, 0));
Обратите внимание, что функция lookAt принимает экземпляр THREE.Vector3 , не пишите ее как camera.lookAt(0, 0, 0)
Хорошо, вышеупомянутое содержимое трех.js обучающей ортогональной проекционной камеры. Я надеюсь, что для всех будет полезно изучить три. Редактор сообщит статьи о трех. JS один за другим. Пожалуйста, продолжайте обращать внимание на wulin.com.