Alex

camera.position.set(10, 20, 15);

// Рендерер
renderer.shadowMap.enabled = true;

// Контролы для вращения камеры
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// Сложный фон - галактика
const galaxyGeometry = new THREE.SphereGeometry(50, 64, 64);
const galaxyMaterial = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/2294472375_24a3b8ef46_o.jpg'),
    side: THREE.BackSide
});
const galaxy = new THREE.Mesh(galaxyGeometry, galaxyMaterial);
scene.add(galaxy);

// Освещение
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 20, 10);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
scene.add(directionalLight);

const pointLight = new THREE.PointLight(0xff0000, 2, 20);
pointLight.position.set(0, 5, 0);
scene.add(pointLight);

// Сложные объекты
const torusGeometry = new THREE.TorusKnotGeometry(3, 1, 100, 16);
const torusMaterial = new THREE.MeshPhysicalMaterial({
    color: 0x00ffff,
    metalness: 0.9,
    roughness: 0.1,
    clearcoat: 1,
    clearcoatRoughness: 0.1,
    transmission: 0.9,
    ior: 1.5,
    thickness: 1.0
});
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
torus.position.y = 8;
torus.castShadow = true;
scene.add(torus);

// Парящие кристаллы
const crystals = [];
const crystalGeometry = new THREE.ConeGeometry(0.5, 2, 4);
const crystalMaterial = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shininess: 100,
    transparent: true,
    opacity: 0.8,
    emissive: 0x00ffff,
    emissiveIntensity: 0.5
});

for (let i = 0; i < 10; i++) {
    const crystal = new THREE.Mesh(crystalGeometry, crystalMaterial);
    crystal.position.x = (Math.random() - 0.5) * 20;
    crystal.position.y = Math.random() * 10;
    crystal.position.z = (Math.random() - 0.5) * 20;
    crystal.rotation.x = Math.random() * Math.PI;
    crystal.rotation.z = Math.random() * Math.PI;
    crystal.castShadow = true;
    scene.add(crystal);
    crystals.push(crystal);
}

// Парящая платформа
const platformGeometry = new THREE.CylinderGeometry(5, 5, 0.5, 32);
const platformMaterial = new THREE.MeshStandardMaterial({
    color: 0x333333,
    metalness: 0.7,
    roughness: 0.3
});
const platform = new THREE.Mesh(platformGeometry, platformMaterial);
platform.position.y = -1;
platform.receiveShadow = true;
scene.add(platform);

// Частицы
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 5000;
const posArray = new Float32Array(particlesCount * 3);

for (let i = 0; i < particlesCount * 3; i++) {
    posArray[i] = (Math.random() - 0.5) * 50;
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));

const particlesMaterial = new THREE.PointsMaterial({
    size: 0.05,
    color: 0x00ffff,
    transparent: true,
    opacity: 0.8,
    blending: THREE.AdditiveBlending
});

const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particlesMesh);

// Анимация
function animate() {
    requestAnimationFrame(animate);

// Вращение объектов
    torus.rotation.x += 0.005;
    torus.rotation.y += 0.01;

// Плавное перемещение кристаллов
    crystals.forEach((crystal, i) => {
        crystal.position.y += Math.sin(Date.now() * 0.001 + i) * 0.01;
        crystal.rotation.y += 0.01;
    });

// Мерцание частиц
    particlesMesh.rotation.y += 0.0005;

// Обновление контролов
    controls.update();

renderer.render(scene, camera);
}

animate();

Three.js: космическая фантазия с анимациями и эффектами

Погрузитесь в мир 3D-графики с этой впечатляющей сценой, созданной на Three.js! Здесь вы найдете:

🌌 Реалистичный космический фон с текстурой галактики (космическое жилище)

🛸 Парящий тор с эффектом стекла и металлическим блеском

💎 Мерцающие кристаллы, плавно двигающиеся в пространстве

✨ Систему частиц, создающую иллюзию звёздной пыли

☄️ Динамическое освещение с тенями и цветными источниками света

🎮 Интерактивность — вращайте камеру мышкой для полного обзора

Технологии:

Three.js (WebGL)

GLTFLoader для работы с 3D-моделями

Физические материалы (стекло, металл)

Сложные анимации и шейдерные эффекты

Идеально для:

Изучения возможностей Three.js

Вдохновения для собственных 3D-проектов

Демонстрации современных веб-технологий