ВЪВЕДЕНИЕ
Three js е JS библиотека и API за различни браузъри, които позволяват създаването на красиви анимации. Three js разчита на WebGL, а не на конвенционалните добавки за браузър.
Чрез своите библиотечни помощни програми разработчиците могат да включват сложни 3D анимации в своите уебсайтове без много усилия.
Three.js включва много функции като геометрия, светлини, материали, шейдъри, ефекти, сцени, зареждащи данни, анимация и много други.
Всеки проект three.js се нуждае от поне един HTML файл, за да дефинира уеб страницата, и JavaScript файл, за да изпълни вашия код three.js.
ИНСТАЛАЦИЯ
Инсталирайте с NPM
Инсталирайте three.js и инструмент за изграждане, Vite, като използвате терминал в папката на вашия проект. Vite ще се използва по време на разработката, но не е отделна част от окончателната уеб страница.
# three.js npm install --save three # vite npm install --save-deb vite
Импортиране от CDN
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "https://unpkg.com/[email protected]/build/three.module.js", "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/" } } </script>
Поддръжка на браузър
Всички съвременни браузъри на настолен компютър, както и на мобилни устройства, в момента поддържат WebGL. Единственият браузър, за който трябва да се погрижите, е мобилният браузър Opera Mini. За IE 10 и по-стари версии има приставката IEWebGL, която можете да получите от https://github.com/iewebgl/iewebgl./ Можете да намерите подробна информация за поддръжката на браузъра WebGL тук.
Създаване на сцената
За да можем действително да покажем каквото и да било с three.js, имаме нужда от три неща: сцена, камера и рендър, за да можем да изобразим сцената с камера.
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Вече сме настроили сцената, нашата камера и рендера.
Първият атрибут е field of view е степента на сцената, която се вижда на дисплея във всеки даден момент. Стойността е в градуси.
Вторият е aspect ratio.
Следващите два атрибута са near и far изрязващата равнина. Това означава, че обекти, които са по-далеч от камерата от стойността на far или по-близо от near, няма да бъдат изобразени.
Следващият е рендерът. В допълнение към създаването на екземпляра за изобразяване, ние също трябва да зададем размера, на който искаме да изобразява нашето приложение. Добра идея е да използвате ширината и височината на областта, която искаме да запълним с нашето приложение – в този случай ширината и височината на прозореца на браузъра.
Ако искате да запазите размера на приложението си, но да го изобразите с по-ниска разделителна способност, можете да го направите, като извикате setSize с false като updateStyle (третият аргумент).
добавяме елемента renderer към нашия HTML документ.
BoxGeometry
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x005E99 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
За да създадем куб, имаме нужда от BoxGeometry. Това е обект, който съдържа всички точки (vertices) и запълване (faces) на куба.
В допълнение към геометрията ни трябва материал, за да го оцветим. Three.js идва с няколко материала, но засега ще се придържаме към MeshBasicMaterial.
Третото нещо, от което се нуждаем, е Mesh. Мрежата е обект, който взема геометрия и прилага материал към нея, който след това можем да вмъкнем в нашата сцена и да се движим свободно.
По подразбиране, когато извикаме scene.add(), нещото, което добавяме, ще бъде добавено към координатите (0,0,0). Това би накарало камерата и кубът да бъдат един в друг.
Изобразяване на сцената
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
Това ще създаде цикъл, който кара програмата за изобразяване да рисува сцената всеки път, когато екранът се опреснява (на типичен екран това означава 60 пъти в секунда).
Анимиране на куба
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
Това ще се изпълнява на всеки кадър (обикновено 60 пъти в секунда) и ще даде на куба хубава ротационна анимация.
КРАЕН РЕЗУЛТАТ
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x005E99 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
добавки
Извън кутията three.js включва основите на 3D двигател. Други компоненти на three.js — като контроли, зареждащи устройства и ефекти за последваща обработка — са част от директорията addons/. Добавките не е необходимо да се инсталират отделно, но трябва да се импортират отделно.
# three-addons
npm i three-addons
// Addons usage
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const controls = new OrbitControls( camera, renderer.domElement );
const loader = new GLTFLoader();
Можете да инсталирате три добавки с помощта на npm, както е споменато по-горе.
Приятно кодиране 😊
