Three.js
– это JavaScript-библиотека для создания
3D-графики. Для создания начального
примера я отправился на официальный
сайт разработчиков (https://threejs.org/).
Первым делом я скачал библиотеку с
GitHub (https://github.com/mrdoob/three.js/archive/master.zip).
На компьютере я создал папку проекта с
именем web_p1. После
распаковки архива я скопировал папку
build в мой проект web_p1.
В этой папке находится файл three.module.js
– это и есть библиотека Three.js.
Затем в папке проекта web_p1
я создал стартовый файл index.html,
в который планировал подключить
библиотеку.
Как подключить библиотеку Three.js
в HTML-файле?
В документации на официальном сайте
предлагается установить среду выполнения
Node.js и библиотеку three.js через менеджер
пакетов npm. Этот вариант мне не подошел,
так как я уже скачал библиотеку вручную.
Также в документации указано, что
можно подключить библиотеку с помощью
HTML-тега <script> с
атрибутом типа importmap.
Этот вариант нам и подойдет.
Однако прежде чем привести код файла
index.html с примером
вращающегося зеленого куба на черном
фоне (смотрите рисунок 1) , важно понять, как правильно его
запустить.
Может показаться, что достаточно
просто открыть index.html
через проводник Windows, и он запустится в
браузере. Но это не так. Пример с
подключенной библиотекой Three.js не
заработает, потому что современные
браузеры из соображений безопасности
блокируют выполнение JavaScript-модулей,
загруженных напрямую с локального диска
(схема file://).
Чтобы файл index.html с
библиотекой Three.js работал корректно,
необходимо запустить его через локальный
веб-сервер. Для этого нужно установить
одну из сборок, например, XAMPP, Denwer, Open
Server или любой другой сервер на ваш вкус.
Порядок действий:
Установите и запустите выбранный
веб-сервер.
Переместите папку вашего проекта
web_p1 в корневую директорию
веб-сервера (часто это папки htdocs
или www).
В адресной строке браузера перейдите
по адресу локального хоста, указав путь
к вашему проекту (например,
http://localhost:8080/web_p1/ или
http://localhost/web_p1/). Точный
адрес зависит от конфигурации вашего
сервера.
Код проекта:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first three.js app</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "./build/three.module.js"
}
}</script>
<script type="module">
import * as THREE from "three";
console.log(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();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
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();
</script>
</body>
</html>
Рисунок 1. Пример работы библиотеки Three.js в браузере Firefox
