3D Дизайн на Three.js: Быстрый старт

Настройка проекта

Создайте файл index.js для кода Three.js и импортируйте библиотеку:

import * as THREE from 'three';

В файле index.html подключите index.js:

<script type="module" src="index.js"></script>

Установите vite и настройте проект:

npm install vite

Добавьте в package.json:

"scripts": {
  "dev": "vite"
}

Запустите локальный сервер:

npm run dev

Создание сцены, камеры и рендера

Создайте сцену, камеру и рендер в index.js:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Параметры камеры:

75: угол обзора (Field of View).
window.innerWidth / window.innerHeight: соотношение сторон экрана.
0.1: ближайшая граница видимости.
100: дальняя граница видимости.
camera.position.z = 5;: позиция камеры по оси Z.

Создание и отображение 3D-объекта

Создайте куб:

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); // Красный цвет
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Отобразите куб с помощью анимации:

function animate() {
trequestAnimationFrame( animate );
tcube.rotation.x += 0.01;
tcube.rotation.y += 0.01;
trenderer.render( scene, camera );
}

animate();

animate использует requestAnimationFrame для плавной анимации, вращая куб.

Удаление отступов

Создайте style.css:

* {
  margin: 0;
  padding: 0;
}

Подключите style.css к index.html.

В этом руководстве описано создание сцены, камеры, рендера и простого куба в Three.js с использованием анимации. Это позволит вам начать создавать более сложные 3D-сцены.