Voxel Painter 2: Simple, Minecraft-style 3d building for the web

Showcase
1

UPDATE 1.0.4: Fancy Graphics and sounds! (volume control is broken) as well as scrollbar fix and more materials

Voxel Painter 2 is a souped-up version of the THREE.js Voxel Painter demo, with such features as:

  • Rectangle and paint tools
  • Movable camera
  • Save and load models
  • Export models to GLB
  • PWA support

Make art here:
https://voxel-painter-2.gingerindustries.repl.co/

Screenshots:

blank
blank1366×728 24.4 KB

fountain
fountain1366×728 168 KB

gcube
gcube1366×728 175 KB

6 Likes
2

Looks nice :+1:

One issue is all the controls are cut off for me so I can’t change anything.

cutoff

3

This is actually a problem I’ve been trying to fix. Sadly, I suck at web design so I don’t know how to do it.

4

If you’re on Chrome, a temporary fix is to go to chrome://flags and enable #overlay-scrollbars.

5

Nice job GingerIndustries!
To fix your css, just add:

#toolbar div {
    margin-left: 30px!important;
}
#toolbar .helplink{
 margin-left:20px;
}

What do you think, how would one add animations to the voxels and be able to save and load them? (translation, rotation) as a group… for example to open a door. hmm

6

you can use this for a quick fix:

div#toolbar {
    width: 20%;
}

this not the cleanest solution but it’ll do temporarily

7

Fix implemented. I’m not sure about animations, mainly because I’m too lazy to figure out how to select multiple voxels and transform them. Maybe I’ll do it at some point.

8

glad.
And the other question I have is; isn’t it getting very quickly very slow if you have a lot of cubes with 8 vertices? I am asking in the round, is the solution for performance improvement somehow to merge all the cubes into one big mesh? are there any articles about this? Or is it still going to work well if you have a whole landscape of cube geometries with 8 vertices in the scene?

image
image1920×1080 182 KB

if you have a scene like this entirely built upon voxels (box geometries)^

9

Possibly. The GLB Exporter feature does sort of do what you’re talking about (it optimizes material usage so that there is only one material for each block type), but that’s it. Voxel Painter 2 was never really designed for large-scale builds, but I’m open to suggestions to make that possible.