Find User here you can look for a user

.vpp Loader for three.js

3y
#1
This script is a .vpp file loader for using 3d voxel models created with Voxel Paint in your three.js projects. This loader is used by projects such as My Empire and My Colony 2. The loader takes your vpp file and converts it into a mesh object that you can add to a threejs scene. In some instances if special features are used in your model, it may return a Group object instead of a single mesh. You can learn more about how to use threejs here: https://threejs.org/

You can download the javascript file below, and this thread will be kept up to date with the latest release of the loader.

Last Updated: 11/30/2023

Basic Usage Instructions:

In your HTML:
<script src="vpploader.js"></script>

In your Javascript, .vpp models can be loaded from either a URL or from a Javascript Object. Here are examples for both:
let options = {
callback: onModelLoaded,
path: "mymodel.vpp"
};

vppLoader.getMesh(options);

function onModelLoaded(mesh) {
scene.add(mesh);
}
The options object requires at least the path or obj parameter and the callback parameter. The callback should be a function that accepts the completed three.js mesh as it's argument.

Here are the currently supported parameters for the options object:

callback: function. the function that will receive the completed three.js mesh

path: string. the relative URL of the .vpp file you want to load.

obj: object. instead of setting the path, you can specify a javascript object containing the vpp data.

color: string. if color is specified, every voxel that is set as the color #ff00ff will be swapped with the specified color.

color2: string. if color2 is specified, every voxel that is set as the color #00ffff will be swapped with the specified color.

scale: number. the scale/size of the returned mesh.

opacity number. the opacity of the returned mesh (from 0 to 1)

makeLights: boolean. if set to true, will add a three.js PointLight object to the returned model for all lights in the .vpp object that have a glow radius set.

useBasic: boolean. if set to true, model will be created using the MeshBasicMaterial, meaning it will not react to scene lighting. Better on performance, but also can be used to make a model that glows in the dark.

The vpploader script will automatically take care of reusing geometries for you when appropriate, in the event that you are adding multiple instances of the same object to your project.

If you have any questions or suggestions for the loader, feel free to leave them in this thread! I will be adding features and improvements as I add them to the .vpp file format, so if you are using this script, make sure you check back to ensure that you have the latest version of the loader.
Owner of Ape Apps, LLC
3y
#2
Nice, thanks!
I don't have access to a computer rn but would it be possible to provide the contents of the .vpp file rather than an url? That would be helpful. Like when an user selects a file from the filesystem (no upload- no url)
Creator of Coloniae
Admin of the MC2 translation project
3y
#3
My apologies @Sobeirannovaocc as the loader already contains that ability, I just didn't document it! Oops. I will update the original post with the information.
Owner of Ape Apps, LLC
Welcome
Ape Apps, LLC is an independent software development company founded in 2010 by Brandon Stecklein. Over the years, Ape Apps has published over 400 apps and games across various platforms. You can get in touch with Brandon on Twitter or by leaving a post on his wall @bastecklein
App of the Day