Введение

Когда ты слышишь о 3D-графике, в голове возникает образ сложных программ, требующих высокой квалификации и мощных компьютеров. Но я решил доказать обратное! В этой статье я расскажу тебе о своем 3D-редакторе фигур, созданном с использованием библиотеки Three.js. А чтобы было не скучно, я добавлю примеры кода и интересные факты о том, как я преобразил простейший куб в полноценный 3D-редактор.

Что было: Рождение куба

1. Куб — как это мило!

В первой версии моего редактора ты мог встретить только один-единственный куб. Да, именно тот самый куб, который все мы любили в детстве! Он был зеленым, как свежескошенная трава, и абсолютно неподвижным. В общем, это был идеальный экземпляр, чтобы вспомнить детские мечты о 3D-моделировании.

Вот простой код для создания куба:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

animate();

2. Тревога, скука и неподвижность!

Когда ты увидел этот куб, возникли смешанные чувства: «Класс! Куб! … И что дальше?» Вращение фигуры происходило с фиксированной скоростью, которая была настолько медленной, что даже черепаха могла бы её обойти.

3. Грустная интерактивность

К сожалению, интерактивность была под запретом. Не было ни цветовых выборщиков, ни ползунков — только куб и тишина. Вроде бы пытался создать нечто крутое, а в итоге получилась мертвая вода.

Что стало: Эволюция 3D-редактора

1. Встречай: многообразие фигур!

Теперь мой редактор — это не просто куб, а настоящая 3D-галерея! Ты можешь выбрать среди куба, сферы, октаэдра и пентаграммы. Я создал целый набор фигур, чтобы ты мог реализовать свои идеи.

Вот как выглядит код для добавления различных фигур:

function createShape(geometry, color) {
    const material = new THREE.MeshBasicMaterial({ color: color });
    return new THREE.Mesh(geometry, material);
}

// Создание фигур
const shapes = {
    cube: createShape(new THREE.BoxGeometry(1, 1, 1), 0x00ff00),
    sphere: createShape(new THREE.SphereGeometry(1, 32, 32), 0xff0000),
    octahedron: createShape(new THREE.OctahedronGeometry(1), 0x0000ff),
};

// Добавление куба по умолчанию
scene.add(shapes.cube);

2. Покрась мир в свои цвета!

Теперь ты можешь выбрать цвет любой фигуры, просто кликнув на цветовой выборщик. Вот небольшой пример, как это реализовать:

<input type="color" id="colorPicker" value="#00ff00" />

<script>
const colorPicker = document.getElementById('colorPicker');
colorPicker.addEventListener('input', (event) => {
    const color = event.target.value;
    for (const shape in shapes) {
        shapes[shape].material.color.set(color);
    }
});
</script>

3. Вращение с ветерком

Скорость вращения теперь можно настраивать! Перемещая ползунок, ты сможешь установить скорость, которая тебе нравится.

<label for="rotationSpeed">Скорость вращения:</label>
<input type="range" id="rotationSpeed" min="0" max="0.1" step="0.01" value="0.01">

<script>
let rotationSpeed = 0.01;

const rotationSpeedSlider = document.getElementById('rotationSpeed');
rotationSpeedSlider.addEventListener('input', (event) => {
    rotationSpeed = parseFloat(event.target.value);
});
</script>

4. Пауза и старт — игра с мышкой!

Нажми на экран, чтобы приостановить или запустить вращение. Это так просто, что даже твой кот сможет это сделать (если он не спит)! Идеально, чтобы похвастаться друзьям, что ты сделал «вещь», и теперь можешь её останавливать на любой стадии.

let isRotating = true;

window.addEventListener('mousedown', () => {
    isRotating = !isRotating;
});

function animate() {
    if (isRotating) {
        for (const shape in shapes) {
            shapes[shape].rotation.x += rotationSpeed;
            shapes[shape].rotation.y += rotationSpeed;
        }
    }
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

5. Экспортируй, чтобы править миром!

Теперь ты можешь экспортировать выбранные фигуры. Это просто — нажми кнопку "Экспортировать фигуру", и твой код уже будет в буфере обмена.

6. FAQ — это не про футбол!

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

Заключение: Путешествие продолжается

Обновленный 3D-редактор на базе Three.js — это не просто программа, это настоящая площадка для творчества! Я уверен, что с помощью новых функций и улучшений, твой опыт использования приложения станет намного более увлекательным и интерактивным.

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

С нетерпением жду твоих идей и предложений, и помни: каждый куб когда-то был просто квадратом!

Связаться со мной

Если ты хочешь следить за обновлениями проекта, а также задать вопросы или поделиться своими идеями, не стесняйся посетить мой GitHub и Telegram:

• GitHub

• Telegram