Skip to content
← Back to Community
Voxel Painter 2: Minecraft-style building on the web
Profile icon
GingerIndustries

VERSION 1.2.0: Voxel Gallery! Share your models with the world! Just use the Post to Gallery button or go to https://voxel-gallery.gingerindustries.repl.co (ALL EXAMPLE FILES ARE NOW HERE)

VERSION 1.1.0: Augmented Reality! Use the View in AR button or go to https://VoxelAr.gingerindustries.repl.co

Voxel Painter 2 is a souped-up version of the three.js demo that includes such wonderful features as a rectangle tool, saving and loading, colored blocks and exporting to glb.
Features:
Web-based
Save and load builds as VXM files
Export to GLTF
Paintable blocks

Example VXM files

Voters
Profile icon
MikeRedmond
Profile icon
ChristineMoore
Profile icon
LordPython404
Profile icon
TurtleAndrew
Profile icon
ArianaGZ
Profile icon
tussiez
Profile icon
VihaanM1
Profile icon
ruiwenge2
Profile icon
MrVoo
Profile icon
GingerIndustries
Comments
hotnewtop
Profile icon
ChristineMoore

Hi, Thank you for sharing this great information about Minecraft-style building by Voxel Painter. I am also very glad to be familiar with such wonderful features like rectangle tool, colored block, etc of this tool, Actually, I am a student of computer science and I took my programming assignment writing support from this resource https://youressayreviews.com/review-of-edubirdie-com-services/ that's why I have lots of time to learn this type of things and programming. I want to be a programmer and established my career in this IT sector. So I appreciated this inspirational post.

Profile icon
GingerIndustries

@ChristineMoore so. You just commented to advertise that service?

Profile icon
Ironbrodiet

That's what I was [email protected]

Profile icon
GingerIndustries

Voxel Painter's down because somone at THREE.js screwed up their Skypack repo

Profile icon
GingerIndustries
Profile icon
LordPython404

I have a hard time accessing the panel on the left, but otherwise I like it!

image

Profile icon
GingerIndustries

@LordPython404 This is a known problem. On Chrome, go to chrome://flags and enable #overlay-scrolling. I'm working on a fix.

Profile icon
LordPython404

@GingerIndustries I'm using microsoft-edge.

Profile icon
GingerIndustries

@LordPython404 There's not much I can do now, then. I'm working on a fix, so stay tuned i guess

Profile icon
LordPython404
Profile icon
i10

@LordPython404 you can use chrome flags on ms edge edge://flags#overlay-scrolling additionally urls like chrome://flags will auto redirect to edge://flags

Profile icon
GingerIndustries

@i10 good to know

Profile icon
tussiez

Pretty cool!
I think you should post this as a project on the three.js website itself - replacing/updating the original version.

Reminds me of https://sortacraftmodelmaker.sortagames.repl.co/ :)

Profile icon
GingerIndustries

@tussiez What's the format? Maybe I can make Voxel Painter export to it ;)

Profile icon
tussiez

@GingerIndustries Model Maker uses a Uint8Array with a length of 64 cubed. IIRC, to get an individual block: ‘arr[“x,y,z”]’ and the value of that element is the UV index (texture). For storing it, this is converted to a string and saved in LocalStorage. On mobile, will write some example code for this in a moment :)

Profile icon
tussiez

@GingerIndustries
The app uses a simple voxel engine:

// Import script import VoxelWorld from 'https://sortacraftmodelmaker.sortagames.repl.co/VoxelWorld.js'; // Voxel world setup let world = new VoxelWorld({ cellSize: 64, // world size tileSize: 16, // Texture data tileTextureWidth: 768, tileTextureHeight: 48, }); // Adding/deleting blocks world.setVoxel(x,y,z,TYPE); // Export world.cells["0,0,0"] // Array, can be saved as TXT file (JSON.stringify)
Profile icon
GingerIndustries

@tussiez I've put it on the forum, now we wait and see.

Profile icon
tussiez
Profile icon
GingerIndustries
Profile icon
tussiez
Profile icon
GingerIndustries

@tussiez added AR

Profile icon
tussiez
Profile icon
GingerIndustries

@tussiez version 1.2.0 is out. would you believe Voxel Gallery took 1/8th of the time of Voxel Painter to make?

Profile icon
tussiez

Doesn't seem to be working? @GingerIndustries

Profile icon
tussiez

@GingerIndustries None of the save functions are working

Profile icon
GingerIndustries

@tussiez In Voxel Painter? Checking now

Profile icon
GingerIndustries

@tussiez idk everything seems fine. What did you mean?

Profile icon
tussiez

@GingerIndustries Nothing happens when I click "Save to GLB" or "Post to Gallery".

Profile icon
GingerIndustries

@tussiez Both are working fine for me. Did you try clearing the cache? Your browser might have a bugged version

Profile icon
GingerIndustries

@tussiez If it helps, the site doesn't show you as having created a user

Profile icon
tussiez

@GingerIndustries Chromebook, latest. Can’t check Inspect, blocked

Profile icon
GingerIndustries

@tussiez hMMMMMMMMMMMMMM
idk :( the only advice I have is clear the cache and/or Ctrl-F5, but I assume you already tried that

Profile icon
tussiez

@GingerIndustries Where do I join, and does not having an account prevent me from downloading a save file? I'm confuzled

Profile icon
tussiez

@GingerIndustries The downloader is working again, did you make any changes?

Profile icon
GingerIndustries

@tussiez i did nothing
idk what happened maybe repl was having a bad hair day

Profile icon
ruiwenge2

wow this is cool!

Profile icon
MrVoo

Nice! You should add more simple tools, like a line and maybe a circle

Profile icon
GingerIndustries

@MrVoo Good idea, I'll work on it soon

Profile icon
GingerIndustries

@MrVoo For the line tool, just use Rectangle. Sadly, I am too square-brain to add circles