Journey into the world of a 3D editor on Three.js

Introduction

When you hear about 3D graphics, an image of complex programs that require high qualifications and powerful computers comes to mind. But I decided to prove the opposite! In this article I will tell you about my 3D shape editor created using the library Three.js. And to make it not boring, I will add code examples and interesting facts about how I transformed a simple cube into a full-fledged 3D editor.

What happened: The birth of the cube

1. Cube – how cute it is!

In the first version of my editor, you could only encounter one single cube. Yes, exactly the same cube that we all loved as children! It was green, like freshly cut grass, and absolutely motionless. All in all, it was the perfect piece to remember my childhood dreams of 3D modeling.

Here's the simple code to create the cube:

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. Anxiety, boredom and immobility!

When you saw this cube, mixed feelings arose: “Cool! Cube! …And what next?” The figure rotated at a fixed speed, which was so slow that even a turtle could bypass it.

3. Sad interactivity

Unfortunately, interactivity was prohibited. There were no color pickers or sliders – just a cube and silence. It seems like I was trying to create something cool, but what I ended up with was dead water.

What happened: The evolution of the 3D editor

1. Meet: a variety of figures!

Now my editor is not just a cube, but a real 3D gallery! You can choose among cube, sphere, octahedron and pentagram. I created a whole set of figures so that you can realize your ideas.

Here's what the code for adding different shapes looks like:

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. Paint the world in your colors!

Now you can choose the color of any shape by simply clicking on the color picker. Here's a small example of how to implement this:

<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. Spin with the breeze

The rotation speed can now be adjusted! By moving the slider, you can set the speed you like.

<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. Pause and start – game with the mouse!

Tap the screen to pause or start the rotation. It's so easy that even your cat can do it (as long as he's awake)! Ideal for bragging to your friends that you made “the thing” and now you can stop it at any stage.

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. Export to rule the world!

You can now export the selected shapes. It's simple – click the “Export Shape” button, and your code will already be on the clipboard.

6. FAQ is not about football!

My editor now has a “FAQ” button that prompts me to download a file with instructions. This way you can figure out what to do, even if you are a beginner.

Conclusion: The journey continues

Updated 3D editor based on Three.js – this is not just a program, it is a real platform for creativity! I'm confident that with the new features and improvements, your experience using the app will become much more fun and interactive.

So, if you want to get a little creative, play with colors and shapes, or just take a break from your daily routine, my editor is waiting for you!

I look forward to your ideas and suggestions, and remember: every cube was once just a square!

Contact me

If you want to follow project updates, as well as ask questions or share your ideas, feel free to visit my GitHub and Telegram: