Почему ничего не отображается в сайте с three.js?

Question

kvellou @kvellou

Почему ничего не отображается в сайте с three.js?

Вот сайт:

Вот код:
Код animation.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Three.js Animation</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
    <canvas></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="animation.js"></script>
</body>
</html>

Код animation.js:

// Получение ссылки на элемент canvas
const canvas = document.querySelector('canvas');

// Инициализация сцены
const scene = new THREE.Scene();

// Инициализация камеры
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Инициализация источника света
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(0, 0, 5);
scene.add(light);

// Инициализация геометрии фигур
const triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3(-1, -1, 0));
triangleGeometry.vertices.push(new THREE.Vector3(0, 1, 0));
triangleGeometry.vertices.push(new THREE.Vector3(1, -1, 0));
triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
triangleGeometry.computeFaceNormals();

const squareGeometry = new THREE.Geometry();
squareGeometry.vertices.push(new THREE.Vector3(-1, -1, 0));
squareGeometry.vertices.push(new THREE.Vector3(-1, 1, 0));
squareGeometry.vertices.push(new THREE.Vector3(1, 1, 0));
squareGeometry.vertices.push(new THREE.Vector3(1, -1, 0));
squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
squareGeometry.faces.push(new THREE.Face3(0, 2, 3));
squareGeometry.computeFaceNormals();

const pentagonGeometry = new THREE.Geometry();
pentagonGeometry.vertices.push(new THREE.Vector3(0, 1, 0));
pentagonGeometry.vertices.push(new THREE.Vector3(-0.95, 0.31, 0));
pentagonGeometry.vertices.push(new THREE.Vector3(-0.59, -0.81, 0));
pentagonGeometry.vertices.push(new THREE.Vector3(0.59, -0.81, 0));
pentagonGeometry.vertices.push(new THREE.Vector3(0.95, 0.31, 0));
pentagonGeometry.faces.push(new THREE.Face3(0, 1, 2));
pentagonGeometry.faces.push(new THREE.Face3(0, 2, 3));
pentagonGeometry.faces.push(new THREE.Face3(0, 3, 4));
pentagonGeometry.computeFaceNormals();

const hexagonGeometry = new THREE.Geometry();
hexagonGeometry.vertices.push(new THREE.Vector3(-0.5, 0.87, 0));
hexagonGeometry.vertices.push(new THREE.Vector3(-1, 0, 0));
hexagonGeometry.vertices.push(new THREE.Vector3(-0.5, -0.87, 0));
hexagonGeometry.vertices.push(new THREE.Vector3(0.5, -0.87, 0));
hexagonGeometry.vertices.push(new THREE.Vector3(1, 0, 0));
hexagonGeometry.vertices.push(new THREE.Vector3(0.5, 0.87, 0));
hexagonGeometry.faces.push(new THREE.Face3(0, 1, 2));
hexagonGeometry.faces.push(new THREE.Face3(0, 2, 3));
hexagonGeometry.faces.push(new THREE.Face3(0, 3, 4));
hexagonGeometry.faces.push(new THREE.Face3(0, 4, 5));
hexagonGeometry.computeFaceNormals();

const circleGeometry = new THREE.CircleGeometry(1, 32);

// Создание материала для фигур
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });

// Создание объектов Mesh для фигур
const triangle = new THREE.Mesh(triangleGeometry, material);
const square = new THREE.Mesh(squareGeometry, material);
const pentagon = new THREE.Mesh(pentagonGeometry, material);
const hexagon = new THREE.Mesh(hexagonGeometry, material);
const circle = new THREE.Mesh(circleGeometry, material);

// Группировка фигур
const shapesGroup = new THREE.Group();
shapesGroup.add(triangle);
shapesGroup.add(square);
shapesGroup.add(pentagon);
shapesGroup.add(hexagon);
shapesGroup.add(circle);
scene.add(shapesGroup);

// Переменные состояния анимации
let currentShapeIndex = 0;
let zoomIn = false;
let zoomOut = false;
let particles = [];
let particleMaterial = new THREE.PointsMaterial({ color: 0x00ff00, size: 0.05 });

// Функция для создания частиц
function createParticles(geometry) {
    const particleCount = geometry.vertices.length;

    for (let i = 0; i < particleCount; i++) {
        const particle = new THREE.Vector3(geometry.vertices[i].x, geometry.vertices[i].y, geometry.vertices[i].z);
        particles.push(particle);
    }
}

// Функция для анимации распада и формирования новых фигур
function animateParticles() {
    if (zoomIn) {
        const currentShape = shapesGroup.children[currentShapeIndex];

        if (currentShape.scale.x < 2) {
            currentShape.scale.x += 0.01;
            currentShape.scale.y += 0.01;
            currentShape.scale.z += 0.01;
        } else {
            zoomIn = false;

            // Распад текущей фигуры на частицы
            createParticles(currentShape.geometry);
            scene.remove(currentShape);
        }
    } else if (zoomOut) {
        const nextShapeIndex = (currentShapeIndex + 1) % shapesGroup.children.length;
        const nextShape = shapesGroup.children[nextShapeIndex];

        if (nextShape.scale.x > 1) {
            nextShape.scale.x -= 0.01;
            nextShape.scale.y -= 0.01;
            nextShape.scale.z -= 0.01;
        } else {
            zoomOut = false;
            currentShapeIndex = nextShapeIndex;

            // Формирование следующей фигуры из частиц
            const nextShapeParticles = particles.splice(0, nextShape.geometry.vertices.length);
            const nextShapeParticleGeometry = new THREE.Geometry();
            nextShapeParticleGeometry.vertices = nextShapeParticles;
            const nextShapeParticleMesh = new THREE.Points(nextShapeParticleGeometry, particleMaterial);
            shapesGroup.add(nextShapeParticleMesh);
        }
    }
}

// Функция анимации
function animate() {
    requestAnimationFrame(animate);

    animateParticles();

    renderer.render(scene, camera);
}

// Инициализация рендерера
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

// Обработчик событий прокрутки
window.addEventListener('wheel', function (event) {
    if (event.deltaY < 0) {
        zoomIn = true;
    } else {
        zoomOut = true;
    }
});

// Вызов функции анимации
animate();