Что было, что стало: Путешествие в мир 3D-редактора на Three.js
Введение
Когда ты слышишь о 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. Покрась мир в свои цвета!
Теперь ты можешь выбрать цвет любой фигуры, просто кликнув на цветовой выборщик. Вот небольшой пример, как это реализовать:
3. Вращение с ветерком
Скорость вращения теперь можно настраивать! Перемещая ползунок, ты сможешь установить скорость, которая тебе нравится.
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:
