Ще предложа това с отказ от отговорност: това ръководство е създадено за клас креативни личности, които знаят много малко за разработката на софтуер. Така че започва от самото начало (навигация в терминала) и предлага бърз начин да стартирате нещо, без да бъдете затрупани от инструментите на javascript заешката дупка. Ако търсите само спецификата на Three.js, можете да пропуснете първите няколко параграфа.
Започнете, като отворите OSX терминала (можете да го отворите, като натиснете cmd+space, напишете терминал и изберете приложението Терминал). Това е приложение, което ви позволява да навигирате във вашата файлова система и да стартирате програми без GUI. За да започнем, ще отидем на работния плот. За да направите това, въведете:
cd ~/Desktop
Също така трябва да се уверите, че сте инсталирали npm/node (програма, която ви позволява да изпълнявате javascript във вашия терминал и да изтегляте други javascript програми). Можете да го изтеглите, като отидете на този уебсайт и следвате инструкциите за инсталиране. След като възелът е готов и работи, можем да стигнем до изграждането на действителното приложение.
„Създаване на приложение React“ в момента е най-бързият, най-чистият, най-простият и най-малко разочароващият начин за стартиране на javascript уеб проект с всички функции на разумен език за програмиране (който се свежда най-вече до импортиране и пакети на трети страни). Независимо дали използвате React или не, няма особено значение; това е шаблонът на проекта, който представлява интерес тук. За да започнете, изпълнете тази команда от вашия терминал:
npm install -g create-react-app
Това ще инсталира програмата, която изгражда вашия уеб проект. След като изтеглянето приключи, въведете тази команда, за да създадете приложението си:
create-react-app my-cool-app
Ще се изтеглят куп неща. Ще се почувствате като сериозен хакер. След като приключите, трябва да има нова папка на вашия работен плот, наречена my-cool-app. Тъй като в момента не се интересуваме от React (дори смятаме, че е страхотна библиотека и парадигма), ще използваме нашия терминал, за да навигираме в новата папка на приложението и да изтрием шаблонния код, който е генериран. След това ще създадем наш собствен модел. За да направите всичко това, въведете тези команди в ред:
cd my-cool-app rm -rf src mkdir src touch src/index.js
Страхотен! сега отворете директорията в любимия си текстов редактор (моето goto в момента е Atom). Ако използвате Atom, можете просто да въведете:
atom .
Сега сме почти готови да се заемем с Three.js. Има само още няколко стъпки: изтегляне на пакета Three.js и настройка на функциите init и render. За да изтеглим Three.js, всичко, което трябва да направим, е да напишем:
npm install --save three
Това е! Сега можем да започнем да го използваме! Вече можем да напишем някакъв ДЕЙСТВИТЕЛЕН код, за да изобразим някои готини 3D thingymabobs. За да направим това, ще отворим файла, който създадохме, src/index.js, и ще преминем към хакване (за бързо отваряне на файл в Atom, можете да използвате прекия път cmd+t, въведете src/index.js, и изберете файла от резултатите).
Можете също така да стартирате вашия сървър за разработка на този етап, като отворите друг раздел във вашия терминал (натиснете cmd+t) и напишете npm start. Във вашия браузър трябва да се отвори празна уеб страница. Ако не стане, можете ръчно да го отворите, като отидете на http://localhost:3000/.
За да започнем, ще трябва да напишем две функции. Първата функция, която ще наречем init, което е съкращение от initialize. Това е мястото, където отива целият код за настройка и се изпълнява само веднъж. Втората функция се нарича animate и се извиква отново и отново. Това е мястото, където изобразяваме нашата сцена, актуализираме позициите на обектите и други страхотни неща като тези.
За да настроите тези две функции, копирайте този код в src/index.js:
function init() {
}
function animate () {
}
init();
animate();
Тази програма декларира нашите две функции, след което казва на браузъра да изпълни тези функции, когато посетим страницата. Все още няма нищо във функциите, така че нищо няма да се случи. За да се случат нещата, трябва да импортираме библиотеката Three.js и да подготвим всичко. За да направите това, променете кода си, така че да изглежда така:
var THREE = require('three');
var scene, camera, renderer;
var geometry, material, mesh;
function init () {
}
function animate () {
}
init();
animate();
Нашето приложение все още няма да направи нищо, но Three.js вече е готов за използване и сме подготвили програмата да инициализира някои променливи. Сега можем да започнем да пишем действителния код, за да видим нещо на екрана. Първо трябва да изградим нашата сцена, камера и рендер във функцията init. Променете функцията, така че да изглежда така:
function init () {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
Уеб страницата вече трябва да има черен фон! Това е нашата сцена. В него обаче все още нищо не се случва и времето е замръзнало. За да поправим това, нека създадем кутия и добавим малко околна светлина. Актуализирайте вашата init функция, така че да изглежда така:
function init () {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
geometry = new THREE.BoxGeometry(1, 1, 1);
material = new THREE.MeshLambertMaterial({color: 'hsl(0, 50%, 50%)'});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
scene.add(new THREE.AmbientLight('hsl(0, 100%, 100%)'));
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
Сега създадохме кутия, но не можем да я видим, защото не изобразяваме нашата сцена във функцията animate. За да направите това, променете функцията animate да изглежда така:
function animate () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
Ура, имаме кутия! Но не прави нищо. Можем да го накараме да се върти, като увеличаваме въртенето му при всяко извикване на animate. За да направите това, променете функцията animate, така че да изглежда така:
function animate () {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
и ето го! Въртяща се кутия!
След всичко казано и направено, вашият код трябва да изглежда така:
var THREE = require('three');
var scene, camera, renderer;
var geometry, material, mesh;
function init () {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
geometry = new THREE.BoxGeometry(1, 1, 1);
material = new THREE.MeshLambertMaterial({color: 'hsl(0, 50%, 50%)'});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
scene.add(new THREE.AmbientLight('hsl(0, 100%, 100%)'));
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate () {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
init();
animate();
Добре, започнахме страхотно, но има някои проблеми. Първо, има малко бяло пространство в горната и лявата част на страницата. Нека се отървем от него.
Има няколко начина да коригирате това бяло поле с помощта на css. Традиционно бихте започнали с „написване на <link> в главата на вашия index.html файл“, но ние сме по-хипстърски от това, така че първо ще създадем нов файл, като напишем това в конзолата:
touch src/index.css
след това отворете този файл във вашия текстов редактор (помнете трика cmd+T!) и копирайте и поставете това там:
body {
margin: 0;
background: black;
}
върнете се към src/index.js и добавете този ред в началото на файла:
import './index.css';
Сега вижте вашата уеб страница. Бялото поле трябва да изчезне. Уау!
Към следващия проблем: опитайте да преоразмерите прозореца на браузъра си. Не изглежда много хубаво, нали? Има обаче проста корекция. Отворете файла src/index.js и добавете тази функция в края на файла, точно след функцията animate, но преди реда, който казва init();
function onResize () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
след това добавете този последен ред код в края на вашата init функция:
window.addEventListener('resize', onResize);
Опитайте да промените размера на прозореца. Много по-добре!
Това е всичко за шаблонния код. Сега е време да вземете творчески решения. Първият проблем вероятно е осветлението. Нашият куб изглежда доста куц. За да коригираме това, ще добавим насочена светлина. Започнете с деклариране на променлива за вашата светлина в горната част на файла (ред 4 или 5) така:
var dirlight;
След това добавете този фрагмент към вашата функция init. Точно след мястото, където добавите AmbientLight, вероятно би било добро място за това:
dirlight = new THREE.DirectionalLight('hsl(0, 0%, 100%)');
dirlight.position.set(1,1,1);
scene.add(dirlight);
Страхотно, сега имаме малко дълбочина! Вижте тази 3D кутия, давай!
Но кутиите са доста скучни.
Мисля, че лисиците са по-готини от кутиите, така че нека сменим нашата кутия с лисица! Тази част става малко объркана, но ме потърпете.
В Three.js можете да импортирате 3D модели като .json файлове. За този урок ще използвам този модел тук. Просто създайте акаунт на уебсайта, щракнете върху изтегляне и изберете ThreeJS(.json). След като файлът се изтегли, разархивирайте го и преместете съдържанието на папката в директорията /src на вашето приложение. Също така ще преименувам файла на foxy-model.json, защото оригиналното име е доста дълго. Добре, сега имаме модел. Време е да го заредите!
в горната част на вашия js файл добавете:
var FoxScene = require('./foxy-model.json');
Моделът, който изтеглихме, всъщност беше цяла сцена, така че ще трябва да извлечем лисицата от нея. Във функцията init след първия ред, който казва scene = new THREE.Scene(), добавете този код:
var loader = new THREE.ObjectLoader(); var foxy = loader.parseGeometries(FoxScene.geometries); foxy = foxy[Object.keys(foxy)[0]]
Добре, тази Object.keys част е забавна, но тя просто казва на нашето приложение да получи първия обект в сцената (което е лисицата, защото това е единственият обект в сцената). След това изтрийте реда, който казва geometry = new THREE.BoxGeometry(1, 1, 1); и променете реда, който казва mesh = new THREE.Mesh(geometry, material); на:
mesh = new THREE.Mesh(foxy, material);
Ако погледнем прозореца на нашия браузър, трябва да има гигантска розова лисица, която се носи наоколо! Вероятно трябва да му дадем малко място, като преместим камерата малко назад. За да направите това, променете ред camera.position.z = 5; на camera.position.z = 200;
Много по-добре!
Това е доста готино, но какво забавление е една програма, ако не можете да взаимодействате с нея? За да научим за взаимодействието, ще променим цвета на лисицата в зависимост от това къде е мишката. Можем да направим това в две прости стъпки. Подобно на функцията onResize, която написахме по-рано, ще добавим друга функция точно над нея, която изглежда така:
function onMouseMove (ev) {
if (!mesh) { return }
var r = ~~(ev.clientX / 2) % 255;
var g = ~~(ev.clientY / 2) % 255;
var b = ~~(Math.abs(ev.movementX * ev.movementY)) % 255;
mesh.material.color = new THREE.Color(`rgb(${r}, ${g}, ${b})`);
}
Изкривените линии просто казват на javascript да премахне десетичната запетая в числото.
След това ще добавим още един ред към нашата init функция, точно под слушателя за преоразмеряване, за да регистрираме движението на мишката:
window.addEventListener('mousemove', onMouseMove);
И това е! Сега получавате луда диско парти лисица, когато движите мишката си!
Преди да свържем това, има едно последно нещо, което трябва да разберем: как да споделите своята красива диско лисица със света. Като начало вероятно трябва да дадем истинско име на нашето приложение, така че разделът на браузъра да не казва просто React App с неуместно лого. Това все пак е вашето приложение — не просто някакво общо приложение React.
За да промените това, отворете файла public/index.html и променете текста на ред 16, където се казва <title>React App</title> на името на вашето приложение. За да промените иконата, разменете файла public/favicon.ico с вашия собствен файл favicon.ico. Свършен! Вече сте готови да публикувате в мрежата. Започнете, като въведете това в терминала си:
npm install -g surge
изчакайте surge да се изтегли, след което въведете:
npm run build
Терминалът ще изглежда супер хакерски и ще ви каже, че изграждането е завършено. Сега просто напишете:
surge build
и следвайте инструкциите. Ще ви даде уникален URL адрес със забавно име, което след това можете да споделите със света. Ето я моята:
Това вероятно е достатъчно за една стъпка, но бих предложил да разгледате „glsl shaders“ и „physics libraries“, ако желаете да научите повече. Изникват и много страхотни проекти, които правят изграждането на сцени с THREE.js дори по-лесно от този урок. Една от библиотеките, от които аз лично се вълнувам, е WhitestormJS, която намалява много шаблони и има вградена физика. Както и да е, надявам се този урок да е достатъчен, за да започнете да правите интересни 3D сцени в мрежата. Ако направите нещо страхотно, публикувайте линк към него в коментарите!
