Создание 3D сцен с помощью библиотеки Three.js

Управление камерой с помощью OrbitControls

Описание:

Добавление интерактивного управления вращением и масштабированием сцены.

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

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // плавное движение
controls.dampingFactor = 0.05;
controls.screenSpacePanning = true;

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // необходимо для damping
  renderer.render(scene, camera);
}
animate();

Теперь пользователь может вращать сцену мышью, приближать и отдалять колесом. Damping добавляет инерцию.

Система частиц (Points)

Описание:

Создание анимированного облака из 5000 частиц.

const particleCount = 5000;
const positions = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount * 3; i += 3) {
  positions[i] = (Math.random() - 0.5) * 20;
  positions[i+1] = (Math.random() - 0.5) * 20;
  positions[i+2] = (Math.random() - 0.5) * 20;
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

const material = new THREE.PointsMaterial({
  color: 0x88aaff,
  size: 0.1,
  transparent: true,
  opacity: 0.8
});

const particles = new THREE.Points(geometry, material);
scene.add(particles);

// Анимация вращения
function animateParticles() {
  requestAnimationFrame(animateParticles);
  particles.rotation.y += 0.001;
  renderer.render(scene, camera);
}
animateParticles();

На экране медленно вращается звёздное поле из голубых точек.

Вариации:

Можно задать текстуру частицы через material.map, использовать PointsMaterial для имитации дыма, огня.

Простой шейдер с uniform time

Описание:

Написание собственного Material с ShaderMaterial и анимацией цвета во времени.

const vertexShader = `
  varying vec3 vPosition;
  void main() {
    vPosition = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  uniform float uTime;
  varying vec3 vPosition;
  void main() {
    vec3 color = 0.5 + 0.5 * cos(uTime + vPosition.xyz * 2.0);
    gl_FragColor = vec4(color, 1.0);
  }
`;

const material = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0 }
  },
  vertexShader: vertexShader,
  fragmentShader: fragmentShader
});

const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material);
scene.add(sphere);

// Обновление времени в анимации
function animateShader() {
  requestAnimationFrame(animateShader);
  material.uniforms.uTime.value += 0.01;
  renderer.render(scene, camera);
}
animateShader();

Сфера переливается радужными цветами, изменяющимися со временем.

Примечание:

Шейдеры позволяют создавать уникальные эффекты, не достижимые стандартными материалами.