For my project I’d like to add a Sketchup-like editor, for users to create their own shapes. I am looking for some examples how to do this. Did anyone do something like this with ThreeJS?
You can take a look at the editor of THREE which is open source
I can’t even remember if i tried Sketchup before so i don’t know if it’s about some specific fancy modelling feature, but THREE offers all basic geometry primitives as well as splines for shape extrusion as well as spline sweep extrusion. A CSG lib is included too to perform boolean ops like subtracting shape B from shape A.
Personally i use a own implementation of such components in order to avoid memory cluttering, to generate geometry in realtime without creating objects, disposing or reallocating all buffers each time again. Doing this excessively can lead to huge GC hickups or a crash, but otherwise you should be fine.
This is certainly not comparable to Sketchup, but it shows an easy way to convert two 2D designs into one 3D frame.
@Fyrestar
The ThreeJS Editor does not even remotely share the same approach with Sketchup - I really want to find out how to achieve that specific way of editing.
For instance, Sketchup always seem to know which faces are in the same plane. It is very much more aware of the human perception of a shape than an editor like Sketchup is.
And I would lave to get my head around it how they do that.
I see it’s more kind of a CAD construction direction then, i only remembered it with people sticking primitives into each other to place in google maps 
This is quite more complicated, i think i’m doing something similar with the geometry construction tools in my IDE with is similar to Blender or C4D (cut, extrude, edges etc). However i’m not aware of some kind of
not heavy weight open source tool for this and if you don’t narrow it down to once specific feature i think this is a bit too broad and unclear question.
Narrowing it down might help indeed, I do not need everyting in Sketchup. Just some basic editing features. So let’s have try.
First: I am developing a 3D Model railroad layout editor, it is the new version of traxeditor.com - a web based layout tool used by over 30 thousand people around the world.
In this 3D version, I want people to be able to create complex benchwork for their layout.
They start out with a rectangular box:
They can divide the longer edge in two and extrude one part to make it more L-shaped:
Then they make a ramp, by dividing one leg and pull it up:
For users this works very intuitive, but from a ThreeJS Geometry perspective the code needs to know far more about the shape than the bunch of unrelated triangles ThreeJS/OpenGL is used to.
That would be regular face extrusion that is one of the most common modelling techniques (box modelling) besides sculpting, can be also a stage before sculpting.
I can only give some rough description, you might consider opening a job offer if you need a full implementation. Asides of all the basic stuff like maintaining the vertices, triangles edges etc, you basically detach the selected face when extruding and add triangle quads to the edges it has been detached from, extrusion can be just along the pulling direction or scale accordingly to the face normals.
Regarding paths or railroads it’s a bit more complicated as you’re
- working with a repeating geometry rather than shape
- intersections need to be handled if you don’t want just overlaps
- without a proper LOD system it won’t scale well
Here’s some post about such node networked based paths, it’s just road decals in this case but i use the same for on-the-fly geometry parts like railroads or fences in my game, and in distance railroads are just flat decals again like roads Wall building in a level-editor
Otherwise memory grows quickly in large tracks or becomes expensive to construct or render.
1 Like
Thanks for the thoughts, the railroad stuff I have tackled: trax3d.com
This is purely for benchword now… I think keeping track of trangles that form a face is key here. Maybe I just need to start…
Ok, I mocked up a PoC to see if the aproach I am taking will work. It’s just a start but it looks promising.
What I did is create an object that holds metadata about the shape. It takes a ThreeJS mesh and calculates all information necessary. The most important lists are:
- a list of all unique vectors and a hash to translate vertices in the buffer to their vector. Vertices with the same coords share a vector.
- a list of faces, with the triangles they consist of, their normal, the path of vectors that make up their border and the faces that are connected to this face.
- a hash table with the buffer triangle index to the face they belong to.
This first stage editor can do two things to selected faces: move them along their normal or extrude them, creating new side faces.
Try it yourself: https://trax3d.com/test/_metamesh.html
@Fedor_van_Eldijk hello, looks like you deleted files on the server, Meta Mesh testing is not working any more (lots of 404 errors on scripts). Do you have it on GitHub to learn from the source?