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); // Плохо понимаю значение этого, но везуализируем

});


Цилиндр легко переделывается в конус.

Думаю на этом можно закончить первый пост. Потом поговорим о материалах, моделированию посредством создания новых вершин, освещению, анимации и так далее.

Доброй ночи, друзья!


345 0 850 1
3
2015-01-15
Я не знаю что за ад с HTML-кодом происходит, но вот
2015-01-16
Всегда не любил программирование - куча непонятной писанины, для меня китайский понятнее будет.
2015-01-18
Ну тогда давай знакомиться ) Для начала сразу несколкьо замечаний из личной жизни: 1. Threejs — это. По сути это библиотека позволяющая создать 3D в браузере. - Threejs - во первых это синтаксический сахар для WebGL. WebGL 1 это абсолютный клон OpenGL ES 2. Если освоить WebGL сможешь писать на OpenGL, даже на С++. Во вторых это библиотека содержащая большое количество объектов для работы со сценой. Что очень приятно сделано в Threejs так это свойства объектов, т.е. любой максист или майщик не знакомый с программированием лучше любого программиста поймет что это за свойства у объектов и как лучше выстрить сцену. 2. Не используй JQuery. Потому что это морально устарелая, дико тормозная, подверженная утечкам библиотека. Да и старые браузеры тебе незачем поддерживать, WebGL все таки. 3. Уместить весь код в один файл у тебя никак не получится, поэтому его придеться разбивать на на десятки более мелких файлов, согласно принципам ООП. Для взаимодействия этих кусков между собой советую использовать Namespaces. 4. Что бы не мучаться с поиском багов после 
(function () {
всегда пиши "use strict"
RENDER.RU