I entered the #js13k games competition this year. It involves creating a game which when zipped is 13k or less! I entered the webxr category that allows you to use one of several 3d libraries. I used threejs. Targeting such a small file size means you can’t use external assets. You effectively have to create the assets in code. I found myself making use of ExtrudeGeometry which uses a ThreeJS Shape and creates a 3D model by converting the shape to a tripled planar model then extruding this down the z axis. ThreeJS Shapes extend the Path class which is similar to the HTML5 Canvas 2d context drawing commands: moveTo, lineTo, quadraticCurveTo etc.
I found myself drawing and guessing the coordinates. Once I delivered the game, I decided that a Path Editor would be useful. So I created one and it is available for anyone to use or download the source code and adapt. You can work on multiple paths, copy paths. Edit positions, show the 3d model and export as code to add to your project.
Thanks for sharing. It could be really useful for a lot of people!
Here are a few suggestions:
the listboxes show only the current item (in the video they look OK)
it took me some time to figure out I have to select a tool in order to start a path
panning and zooming might be more intuitive (and interactive)
exported code does not need values with such precision: shape.lineTo( 1.6011224320742217, 0.9275337557985427) is practically identical to shape.lineTo(1.601, 0.928) in most cases
snap-to-grid might be useful when one needs well aligned segments
is it possible to define holes in a shape? (holes are just other paths)
All excellent ideas. I’ve just added udo, which was my top prority. My next is ghosting another path or bitmap to trace. Not sure about holes. The UI gets so complicated. I prefer the ghosting route. That way you can see another path and create a path that can become a hole.
