WebGL - Interactive Cube

Привет, ambitные программисты! Сегодня мы отправимся в увлекательное путешествие в мир WebGL. Мы создадим interactieve куб, который вы можете вращать мышью. Не волнуйтесь, если вы никогда раньше не программировали - я проведу вас через каждый шаг с терпением мудрой старой черепахи. Погружаемся!

WebGL - Interactive Cube

Понимание основ

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

Что такое WebGL?

WebGL (Web Graphics Library) - это API на JavaScript, который позволяет нам render 3D-графику в веб-браузере. Это как дать вашим веб-страницам суперсилы для создания потрясающих визуальных эффектов!

Что нам нужно

Текстовый редактор (например, Notepad++ или Visual Studio Code)
Веб-браузер (Chrome, Firefox или любой современный браузер)
Немного любопытства и капелька упорства!

Пример - Нарисовать interactieve Cube

Шаг 1: Настройка HTML

Сначала создадим каркас нашей веб-страницы. Откройте текстовый редактор и создайте новый файл под названием interactive_cube.html. Скопируйте и вставьте следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL Interactive Cube</title>
    <style>
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Наш код WebGL пойдет сюда
    </script>
</body>
</html>

Этот код устанавливает структуру HTML и включает библиотеку Three.js, которая упростит нашу работу с WebGL.

Шаг 2: Создание сцены

Теперь добавим немного JavaScript для создания нашей 3D-сцены. Замените комментарий в теге script следующим кодом:

// Настройка сцены, камеры и рендера
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// Создание куба
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

Давайте разберем это:

Мы создаем сцены, которая похожа на сцену для наших 3D-объектов.
Камера определяет наш точку зрения.
Рендерер отвечает за рисование нашей сцены.
Мы создаем куб с помощью BoxGeometry и даем ему зелёный цвет.
Наконец, мы устанавливаем камеру на расстоянии 5 единиц от центра.

Шаг 3: Анимация куба

Чтобы наш куб вращался,我们需要 добавить анимационный цикл. Добавьте следующий код после предыдущего блока:

function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

Эта функция будет вызываться повторно, вращая куб немного на каждой рамке и перерисовывая сцену.

Шаг 4: Добавление interactieve

Теперь добавим interactieve, чтобы мы могли вращать куб мышью. Добавьте следующий код перед функцией animate():

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        const deltaMove = {
            x: e.offsetX - previousMousePosition.x,
            y: e.offsetY - previousMousePosition.y
        };

        cube.rotation.y += deltaMove.x * 0.01;
        cube.rotation.x += deltaMove.y * 0.01;
    }

    previousMousePosition = {
        x: e.offsetX,
        y: e.offsetY
    };
});

Этот код добавляет обработчики событий для мышиных действий, позволяя нам вращать куб, щелкая и таща.

Шаг 5: Добавление изюминки

Давайте сделаем наш куб немного интереснее, дав каждому лицу разные цвета. Замените строку создания материала следующим кодом:

const materials = [
    new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Red
    new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // Green
    new THREE.MeshBasicMaterial({ color: 0x0000ff }), // Blue
    new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Yellow
    new THREE.MeshBasicMaterial({ color: 0xff00ff }), // Magenta
    new THREE.MeshBasicMaterial({ color: 0x00ffff })  // Cyan
];
const cube = new THREE.Mesh(geometry, materials);

Теперь каждое лицо нашего куба будет иметь разный цвет!

Заключение

Поздравляю! Вы только что создали interactieve 3D-куб с помощью WebGL. Это только вершина айсберга, когда речь идет о программировании 3D-графики. Продолжая свое путешествие, вы откроете для себя еще больше удивительных вещей, которые можно создать.

помните, что учиться программировать как учиться ездить на велосипеде. Сначала это может казаться неустойчивым, но с практикой вы быстро научитесь zooming around!

Вот таблица, резюмирующая основные методы, которые мы использовали:

Метод	Описание
`THREE.Scene()`	Создает новую 3D-сцену
`THREE.PerspectiveCamera()`	Настраивает камеру
`THREE.WebGLRenderer()`	Обеспечивает рендеринг сцены
`THREE.BoxGeometry()`	Создает геометрию куба
`THREE.MeshBasicMaterial()`	Определяет материал для куба
`THREE.Mesh()`	Комбинирует геометрию и материал
`requestAnimationFrame()`	Вызывает анимационный цикл

Продолжайте экспериментировать, продолжайте учиться и, что самое главное, получайте удовольствие! Мир WebGL - это ваш, и вы теперь equipped, чтобы начать исследовать его. Счастливого кодирования!

Credits: Image by storyset

Предыдущий учебник:

WebGL - Поворот куба