Введение
Когда ты слышишь о 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:
ссылка на оригинал статьи https://habr.com/ru/articles/847410/
Добавить комментарий