Что было, что стало: Путешествие в мир 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. Покрась мир в свои цвета!

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

<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