Мини-проект и что дальше

Финал: собираем изученное в цельный каркас приложения и намечаем, куда двигаться дальше.

Почти любое Three.js-приложение — это один и тот же скелет: три кита + цикл с delta, на который навешиваются объекты, свет, управление и взаимодействие.

Структура мини-проекта

Соберём всё из курса в одну сцену: вращающийся объект, свет и тени, управление мышью, адаптивность и честная анимация по времени. Это рабочий шаблон, от которого можно отталкиваться.

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// — три кита —
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x15151a);

const camera = new THREE.PerspectiveCamera(
  60, window.innerWidth / window.innerHeight, 0.1, 100
);
camera.position.set(3, 3, 6);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

// — управление —
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// — свет —
scene.add(new THREE.AmbientLight(0xffffff, 0.4));
const sun = new THREE.DirectionalLight(0xffffff, 1);
sun.position.set(5, 8, 5);
sun.castShadow = true;
scene.add(sun);

// — объекты —
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1.5, 1.5, 1.5),
  new THREE.MeshStandardMaterial({ color: 0x44aa88, roughness: 0.4 })
);
cube.castShadow = true;
scene.add(cube);

const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(20, 20),
  new THREE.MeshStandardMaterial({ color: 0x333333 })
);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -1.5;
floor.receiveShadow = true;
scene.add(floor);

// — цикл с delta —
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  cube.rotation.y += 0.6 * delta;   // честная скорость на любом FPS
  controls.update();
  renderer.render(scene, camera);
}
animate();

// — адаптивность —
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Разберите его по блокам — каждый мы проходили: три кита, OrbitControls, рецепт света Ambient + Directional с тенями, Standard-материал, пол как Plane, цикл с delta и обработчик resize. Это и есть «скелет» 90% сцен.

Куда расти дальше

Главный совет

Не пытайтесь выучить всё сразу. Возьмите шаблон выше и доведите до конца один маленький проект: конфигуратор, мини-игру, визуализацию. Завершённый крошечный проект учит больше, чем десяток недочитанных туториалов. А Three.js — отличный фундамент: те же идеи сцены, камеры и материалов работают и в больших движках.

Итог

• Каркас любого приложения: три кита + цикл с delta + свет + управление.
• Дальше — физика, шейдеры, постобработка, react-three-fiber, WebXR.
• Лучший способ закрепить — довести до конца один маленький проект.