Viaje al mundo de un editor 3D en Three.js / Sudo Null IT News

Introducción

Cuando escuchas hablar de gráficos 3D, te viene a la mente la imagen de programas complejos que requieren altas calificaciones y computadoras potentes. ¡Pero decidí demostrar lo contrario! En este artículo te contaré sobre mi editor de formas 3D creado usando la biblioteca. Tres.js. Y para que no sea aburrido, agregaré ejemplos de código y datos interesantes sobre cómo transformé un simple cubo en un editor 3D completo.

Qué pasó: El nacimiento del cubo

1. Cubo: ¡qué lindo es!

En la primera versión de mi editor, solo podías encontrar un cubo. Sí, ¡exactamente el mismo cubo que a todos nos encantaba cuando éramos niños! Estaba verde, como hierba recién cortada, y absolutamente inmóvil. En definitiva, fue la pieza perfecta para recordar mis sueños de infancia sobre el modelado 3D.

Aquí está el código simple para crear el cubo:

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. ¡Ansiedad, aburrimiento e inmovilidad!

Cuando viste este cubo surgieron sentimientos encontrados: “¡Genial! ¡Cubo! … ¿Y ahora qué?” La figura giraba a una velocidad fija, tan lenta que incluso una tortuga podía evitarla.

3. Interactividad triste

Lamentablemente, la interactividad estaba prohibida. No había selectores de color ni controles deslizantes: solo un cubo y silencio. Parece que estaba tratando de crear algo genial, pero terminé con agua muerta.

Qué pasó: La evolución del editor 3D

1. Conoce: ¡una variedad de figuras!

¡Ahora mi editor no es solo un cubo, sino una verdadera galería 3D! Puedes elegir entre cubo, esfera, octaedro y pentagrama. Creé todo un conjunto de figuras para que puedas realizar tus ideas.

Así es como se ve el código para agregar diferentes formas:

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. ¡Pinta el mundo con tus colores!

Ahora puedes elegir el color de cualquier forma simplemente haciendo clic en el selector de color. Aquí hay un pequeño ejemplo de cómo implementar esto:

<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. Gira con la brisa

¡La velocidad de rotación ahora se puede ajustar! Al mover el control deslizante, puede establecer la velocidad que desee.

<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. Pausa y comienza: ¡juego con el mouse!

Toque la pantalla para pausar o iniciar la rotación. ¡Es tan fácil que hasta tu gato puede hacerlo (siempre que esté despierto)! Ideal para presumir ante tus amigos de que hiciste “la cosa” y que ahora puedes detenerla en cualquier momento.

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. ¡Exporta para gobernar el mundo!

Ahora puede exportar las formas seleccionadas. Es simple: haga clic en el botón “Exportar forma” y su código ya estará en el portapapeles.

6. ¡Las preguntas frecuentes no tienen que ver con el fútbol!

Mi editor ahora tiene un botón “Preguntas frecuentes” que me solicita que descargue un archivo con instrucciones. De esta manera podrás saber qué hacer, incluso si eres un principiante.

Conclusión: el viaje continúa

Editor 3D actualizado basado en Tres.js – ¡Esto no es sólo un programa, es una verdadera plataforma para la creatividad! Estoy seguro de que con las nuevas funciones y mejoras, tu experiencia al usar la aplicación será mucho más divertida e interactiva.

Entonces, si quieres ser un poco creativo, jugar con colores y formas, o simplemente tomarte un descanso de tu rutina diaria, ¡mi editor te está esperando!

Espero sus ideas y sugerencias, y recuerde: ¡cada cubo alguna vez fue solo un cuadrado!

Contáctame

Si desea seguir las actualizaciones del proyecto, así como hacer preguntas o compartir sus ideas, no dude en visitar mi GitHub y Telegram: