Оценок пока нет 1. WEB — графика с Three.js. Общий принцип создания графики на Three.js

Three.js — это легкая библиотека для создания кроссбраузерных графических WEB приложений. Данная библиотека для отображения графики может использовать как Canvas из HTML5, как SVG для отображения 2D графики, так и WebGL для отображения 3D графики.

Примечание. Что плохо, так это то, что раз WebGL работает не во всех браузерах и типичным примером этого является отсутствие поддержки WebGL в JDK, посредством которых можно было бы создавать 3D программы на HTML5, из-за чего моя любимая платформа JavaFX не удовлетворяет меня в некоторых моих проектах 🙂 , но есть Canvas и SVG.

Последнюю версию Three.js можно скачать с репозитории GitHub или на официальном сайте Three.js. После распаковки архива у вас есть целый набор примеров и вспомогательных инструментов для работы с графикой. Следует отметить, что для работы некоторых примеров потребуется сервер, без которого они, наверняка не заработают в браузере, а так для начала достаточно обычного текстового редактора и навыков работы на HTML/JavaScript. Библиотека Three.js сама по себе кроссбраузерна, но если мы будем писать на голом JavaScript необходимо помнить, что пользовательский код на JavaScript должен быть оптимизирован под каждый браузер, а можно сделать еще легче — использовать кроссбраузерную библиотеку, такую как jQuery, но для простых примеров сойдет и обычный JavaScript 🙂 .

Прежде чем идти дальше, давайте разберем общую архитектуру построения Three.js — приложений и обозначим основные моменты, на которых следует акцентировать внимание. Ниже приведен рисунок, который отражает основной принцип. Все, что отображает Threejs — это либо объекты Canvas, либо SVG или WebGL, а JavaScript выступает связующим звеном между DOM HTML — интерфейса страницы — 6 и элементами сцены — 1 Three.js. В простейшем случае сцена может состоять из самой области вывода — 1, она так и называется — сцена(Scene), из камеры — 2, из объектов, которых мы хотим отобразить — 3 и освещения — пока этого всего нам достаточно, чтобы рассмотреть простейшие примеры. После окончания построения сцены начинается этап рендеринга(прорисовки) — 4 и приема пользовательских команд для изменения состояния элементов сцены — 1.

threejs-1

Итак, что нам нужно сделать для того, чтобы отобразить простой объект в окне браузера:

  • создать сцену;
  • создать рендер;
  • создать освещение;
  • создать камеру;
  • создать объекты;
  • добавить освещение, камеру и объекты на сцену;
  • добавить сцену на рендер;

Давайте теперь приступим к процессу кодирования и для этого нам, в первую очередь, будет необходимо создать скелет пустого HTML с названием index.html

<html lang="ru">
        <head>
            <meta charset="utf-8" />
            <title>Графика на Three.js</title>
            <script src="js/three.min.js"></script>
            <script src="js/script.js"></script>
        </head>
    <body>
    </body>
</html>

В разделе head мы подключаем библиотеку Three.js и наш рабочий скрипт, который мы назвали script.js, обеих закинули в папку js, из которого мы их читаем. Библиотека Three.js находиться в скачанном архиве в папке build, причем есть компрессивная и полная версия, разницы нет, кроме как в размере файла. В компрессивном отсутствуют лишние пробелы и символы. Итак, мы подключили файлы библиотеки и нашего рабочего скрипта, теперьпосмотрим на наш файл script.js

 

window.onload = init;
function init(){
	//--------------Создаем в дереве DOM элемен для вывода на экран-------
	container = document.createElement("div");//Создаем тег контейнера для вывода
	document.body.appendChild(container);//Добавляем в DOM HTML - документа
	
	//--------------Общие переменные объектов--------------
	var scene, camera, render;
	
	//--------------Инициализация общих переменных---------
	scene = new THREE.Scene();//Сцена
	camera = new THREE.PerspectiveCamera(65, window.innerWidth/window.innerHeight, 0.1, 2000);//Перспективаная проекция камеры. Принимает 3 параметра(масштаб, пропорция, точка 0 в близи, точка 0 в дали
    camera.position.x = 150;//Позиция камеры по x
	camera.position.z = 600;//Позиция камеры по y
	render = new THREE.WebGLRenderer();//Рендеринг
	render.setSize(window.innerWidth, window.innerHeight);//Инициализация рендерера
	
	//--------------Создаем объекты-------------------
	var cubeGeometry = new THREE.BoxGeometry(100, 100, 100);//Производная фигура. Первые 3 параметра - размеры, вторые - количество сегментов по 3-м граням. Последние параметры нужны для исключения деформации вывода текстуры при перспективе
	var cubeMaterial = new THREE.MeshNormalMaterial();//Устанавливаем материал
	var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);//Создаем линию из созданной геометрии
	scene.add(cube);//Добавляем объект на сцену
	
	var cylinderGeometry = new THREE.CylinderGeometry(50, 50, 200);//Производная фигура
	var cylinderMaterial = new THREE.MeshNormalMaterial();//Устанавливаем материал
	var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);//Создаем линию из созданной геометрии
	cylinder.position.x = 200;//Перемещаем от начала координат по оси X
	scene.add(cylinder);//Добавляем объект на сцену
	
	//--------------Добавление вывод-----------------
	render.render(scene, camera);//Добавляем сцену и камеру в рендер после каждого цикла вызова
	
	container.appendChild(render.domElement);//Добавляем рендер в DOM для вывода на экран
}

В итоге должен получиться вот такой вот результат

Threejs-1-screen-1Пример вы можете скачать вот здесь.

Пожалуйста, оцените материал

WebSofter

Web - технологии