Перейти к контенту

Three.js библиотека 3D на JavaScript

Цель проекта — создать простую в использовании, легкую трехмерную библиотеку с рендерером WebGL по умолчанию. Библиотека также предоставляет Canvas 2D, SVG и CSS3D рендеры в примерах.

Three.js часто путают с WebGL, поскольку чаще всего, но не всегда, three.js использует WebGL для рисования 3D. WebGL — это очень низкоуровневое api, рисующее только точки, линии и треугольники. Чтобы сделать что-нибудь полезное с WebGL, как правило, требуется немало кода, и именно здесь приходит Three.js. Он обрабатывает такие вещи, как сцены, источники света, тени, материалы, текстуры, 3D-математику, все, что вам нужно было бы написать самостоятельно, если бы вы использовали WebGL напрямую.

 

Three.js позволяет создавать ускоренную на GPU 3D графику, используя язык JavaScript как часть сайта без подключения проприетарных плагинов для браузера. Это возможно благодаря использованию технологии WebGL. Поддерживает трёхмерные модели формата Collada.

Особенности

  • Рендереры: Canvas, SVG или WebGL
  • Сцена: добавление и удаление объектов в режиме реального времени; туман
  • Камеры: перспективная или ортографическая
  • Анимация: каркасы, быстрая кинематика, обратная кинематика, покадровая анимация
  • Источники света: внешний, направленный, точечный; тени: брошенные и полученные
  • Шейдеры: полный доступ ко всем OpenGL шейдерам (GLSL)
  • Объекты: сети, частицы, спрайты, линии, скелетная анимация и другое
  • Геометрия: плоскость, куб, сфера, тор, 3D текст и другое; модификаторы: ткань, выдавливание
  • Загрузчики данных: двоичный, изображения, JSON и сцена
  • Экспорт и импорт: утилиты, создающие Three.js-совместимые JSON файлы из форматов: Blender, openCTM, FBX, 3D Studio Max, и Wavefront .obj файл
  • Поддержка: документация по API библиотеки находится в процессе постоянного расширения и дополнения, есть публичный форум и обширное сообщество
  • Примеры: на официальном сайте можно найти более 150 примеров работы со шрифтами, моделями, текстурами, звуком и другими элементами сцены

Библиотека Three.js работает во всех браузерах, которые поддерживают технологию WebGL; также может работать с «чистым» интерфейсом элемента CANVAS, благодаря чему работает и на многих мобильных устройствах. Three.js распространяется под лицензией MIT license.

Документация по ссылке https://threejs.org/docs/

Использование Three.js

Этот код создает сцену, камеру и геометрический куб, а также добавляет куб в сцену. Затем он создает средство визуализации WebGL для сцены и камеры и добавляет этот видовой экран к элементу document.body. Наконец, он оживляет куб в сцене для камеры.

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;

	scene = new THREE.Scene();

	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();

	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	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 );

}

Если все прошло хорошо, вы должны увидеть вот это https://jsfiddle.net/8kubjpL5/

Клонирование репозитории со всей его историей приводит к загрузке ~ 2 ГБ. Если вам не нужна вся история, вы можете использовать параметр глубины, чтобы значительно уменьшить размер загрузки.

git clone --depth=1 https://github.com/mrdoob/three.js.git

Для лучшего понимания javascript, выбирайте и изучайте js книги.

Оцени статью

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим - напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

 

Пока нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

СайдбарКомментарии (0)