How to make a 3d graphics web editor like https://threejs.org/editor/?

[El_comunista_2.0]

How to make a 3d graphics web or 3d game editor editor like three.js editor ?

If you can assesore me, thanks aniway.

[Usnul]

@El_comunista_2.0

If you can assesore me, thanks aniway.

it’s okay, I think everyone’s “assesore” sometimes. Too much sitting I reckon.

As for the editor, it’s all right here:

three.js/editor at dev · mrdoob/three.js

three.js is under MIT license, so go nuts. Clone it, change it, make it into whatever you want.

Just to set the expectation though - it’s not going to help with the “assesore”.

[El_comunista_2.0]

I made something like this:

[dubois]

I like the retro look.

[El_comunista_2.0]

index60.html (5.2 KB)
For some reasons the code bugs into my computer and i cant send it…

The bug is this:

[MadDrFrank]

Yesterday it works, today not, its the most annoying fact of my f***** computer.

The code is the same, but the result is different. Its so annoying… x_x

[MadDrFrank]

I dont know, but its solved???

[MadDrFrank]

Its shows me normal now… idk why (And i added the console)

The doubt is how to make cube rotate or move itself.

camera.lookAt(0,0,0)
camera.position.set(0,0,5)

And that 2 commands falls inmediatly.

EDIT 2:

With commands:

camera.position.set(1,1,1)
camera.lookAt(new THREE.Vector3(0,0,0));

It moves good.

But the doubt is => how to make the update part of the file…

Now i did the update function with animate(), the doubt now is how to export the html file… x_x

EDIT 5:

let contenido = `

Export Sandbox let threejs = document.createElement("script"); threejs.src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"; threejs.onload = () => { // Aquí ya está cargado y puedes usar THREE scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); eval(${codigoUsuario}) }; document.body.appendChild(threejs); `;

I want this work, but it doesnt…

EDIT 6:

Three.js Sandbox con Consola

Its appears working…

[dubois]

Your url variable is either undefined or something other than a string, or an object with that method. You are trying to call a method that doesn’t exist. If you wrap it in a try catch block, you could proceed executing the code.

[MadDrFrank]

Y now need physics with my cubes. What could i do? The code is this:

index.html (10.5 KB)

[MadDrFrank]

I made some physics on my editor:

Editor 3d con Físicas - CCCPMadDrFrank

Check it.

[dubois]

I only see some rectangles with words in Spanish I believe.

[MadDrFrank]

Oh, ok. Now this is the most recent version:

index.html (13.2 KB)

And you can translate with google translator or something?

…or i should put it in english languaje?

The code and the files that this file “compile” are entirely html files which no needs more than 1 file to work properly. The textures are from imgbb.

[dubois]

Ah, now I can’t run it it just wants to download the file. Yeah English might have a wider reach, but don’t really know who your audience is.

[MadDrFrank]

Editor 3d con Físicas - CCCPMadDrFrank

I implemented the joint function for making blocks of many squares, like in unity. The last 2 steps for make my editor very very useful same as unity is: The Skybox and all shadows of ambient, point and directional lights. But the impossible things are impossible. I know i made a huge effort doing this engine with gemini, copilot and chatgpt.

My official channel showing this editor is here:
CCCPMadDrFrank - YouTube

[trusktr]

@MadDrFrank

My official channel showing this editor is here:
CCCPMadDrFrank - YouTube

I don’t see any videos showing the editor on your YouTube.

When I go to the editor, it is empty, doesn’t seem to do anything, I don’t see any 3D content:

An explanation would be helpful.