Threejs (Здравствуйте, давайте знакомиться)
Не так давно заинтересовался интерактивной 3D графикой в Web. Хочется посвятить себя презентациям. После разных блужданий выбор пал на Three.js. Сейчас я нахожусь как раз в стадии обучения и у меня жуткое желание по ходу обучения делиться информацией, тем самым закрепляя усвоенное. Подчеркну сразу что я не профессионал ни в threejs и скорее просто знаком с javascript, нежели могу претендовать на звание "гуру".
Я — 3D-дизайнер, который большую часть своего времени занимается web. Прогресс не стоит на месте и настало время дизайнерам постигать программирование. Знаю как трудно найти годную информацию по threejs на русском языке. Сейчас прохожу курс на английском, а так же попадаются годные статьи на хабре.
Threejs — это. По сути это библиотека позволяющая создать 3D в браузере.
Начнём с создание стартовой сцены, потом добавим объекты, а в следующем посте поговорим о ручном создании полигонов и так далее разбирая каждый пункт.
Шаблон
Шаблон HTML-странички
Код пустой сцены
$(function () {
var scene = new THREE.Scene(); // Мы оперделили сцену
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // Задали камеру
var renderer = new THREE.WebGLRenderer(); // Выбрали визуализатор (в данном случае WebGL)
renderer.setClearColorHex(0xEEEEEE); // Цвет фона
renderer.setSize (window.innerWidth, window.innerHeight); // Размер окна
var axes = new THREE.AxisHelper (20); // Мы создали вспомогательные оси (их можно и не добавлять)
scene.add(axes); // Важная строчка! Тут мы добавили объект в сцену. Не забывайте добавлять объеты в сцену
camera.position.x = -30; // Устанавливаем местоположение камеры
camera.position.y = 40; // Устанавливаем местоположение камеры
camera.position.z = 30; // Устанавливаем местоположение камеры
camera.lookAt(scene.position); // Камера смотрит на сцену
$("#Name").append(renderer.domElement); // Всё это мы запихнули в наш контейнер
renderer.render(scene, camera); // Плохо понимаю значение этого, но везуализируем
});
Практика показывает что лучше тестить в Mozilla firefox
Примитивы
Познакомимся с примитивами и их настройками. Но сначала логика всего что происходит с объектами:
1. Создаём геометрию;
2. Создаём материал;
3. Запихиваем 1 и 2 в один массив;
4. Добавляем массив в сцену scene.add(название массива);
Куб
var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //Создаём геометрию с размерами (x,y,z) var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); //Создаём материал var cube = new THREE.Mesh( geometry, material ); //Массив с геометрией и материалом scene.add( cube ); // добавили в сцену
Сфера
var geometry = new THREE.SphereGeometry(5,32,32); //Создаём геометрию (масштаб, число полигонов) var material = new THREE.MeshBasicMaterial({color:0xffff00}); //Задаём материал var sphere = new THREE.Mesh( geometry, material ); //Массив scene.add( sphere ); //Добавляем в сцену
Цилиндр
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 ); // Геометрия (радиус вверху, радиус внизу, длина, число сегментовvar material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); // Материал var cylinder = new THREE.Mesh( geometry, material ); // Массив scene.add( cylinder ); // Добавляем в сцену
Плоскость
var geometry = new THREE.PlaneGeometry( 5, 20, 32 ); //Геометрия (размеры) var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );//Материал var plane = new THREE.Mesh( geometry, material );//Массив scene.add( plane ); //Добавляем в сцену
А теперь давайте посмотрим как будет смотреться в сцене. Добавляя объект важно указать его местоположение. Иначе он появится в центре. На зебывайте:
name.position.x = 10;
name.position.y = 10;
name.position.z = 10;
$(function () {
var scene = new THREE.Scene(); // Мы оперделили сцену
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // Задали камеру
var renderer = new THREE.WebGLRenderer(); // Выбрали визуализатор (в данном случае WebGL)
renderer.setClearColorHex(0xEEEEEE); // Цвет фона
renderer.setSize (window.innerWidth, window.innerHeight); // Размер окна
var axes = new THREE.AxisHelper (20); // Мы создали вспомогательные оси
scene.add(axes); // Важная строчка! Тут мы добавили объект в сцену. Не забывайте добавлять объеты в сцену
var geometry = new THREE.BoxGeometry( 10, 10, 10); //Создаём геометрию с размерами (x,y,z)
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); //Создаём материал
var cube = new THREE.Mesh( geometry, material ); //Массив с геометрией и материалом
cube.position.x = 15;
cube.position.y = 5;
cube.position.z = -10;
scene.add( cube ); // добавили в сцену
var geometry = new THREE.CylinderGeometry( 2, 5, 20, 32 ); // Геометрия (радиус вверху, радиус внизу, длина, число сигментов)
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); // Материал
var cylinder = new THREE.Mesh( geometry, material ); // Массив
cylinder.position.x = -3;
cylinder.position.z = -5;
scene.add( cylinder ); // Добавляем в сцену
camera.position.x = -30; // Устанавливаем местоположение камеры
camera.position.y = 40; // Устанавливаем местоположение камеры
camera.position.z = 30; // Устанавливаем местоположение камеры
camera.lookAt(scene.position); // Камера смотрит на сцену
$("#Name").append(renderer.domElement); // Всё это мы запихнули в наш контейнер
renderer.render(scene, camera); // Плохо понимаю значение этого, но везуализируем
});
Цилиндр легко переделывается в конус.
Думаю на этом можно закончить первый пост. Потом поговорим о материалах, моделированию посредством создания новых вершин, освещению, анимации и так далее.
Доброй ночи, друзья!