Convert 3D models to compressed images ready for THREE JS
MIT License
[](https://www.npmjs.com/package/objimg)
Convert OBJ/MTL files (exported from a 3D soft) into a lightweight image ready for THREE JS (or native WebGL).
Ok, an OBJ file contains all informations about the 3D model: vertices, faces, normals, UVs, groups and materials... All these informations are translated into colours and stored into one single image.
First of all, for the fun!
Then cause it save disk space (the compression method can save up to 80% on the file size, or maybe more) and it reduce the files to load from 2 (OBJ and MTL) to only 1 (except textures).
This Lara Croft 3D model contains 74764 vertices, 48549 uvs, 74690 normals and 143290 faces dispatched in 12 differents groups. On the left, you can see the OBJ/MTL into Blender, at center, the compressed image containing all datas, and on the right, the THREE object builded from the image.
As you can see, the two rendered models looks similar but there is a huge difference, their sizes. The OBJ/MTL files weigh 13.4Mo and the compressed image only weigh 3.2Mo!
The OBJImg
Class contains both methods to parse and generate the images.
To import the model from an image, link the objimg.js
script to your html then do this:
new OBJImg({
image: "path/to/model.png",
onComplete: function( datas ){
console.log("If requested, THREE object has been created", datas);
}
});
Object3D
(require THREE-JS)Object3D
ignoring groups (require THREE-JS)var model = new OBJImg({
image: "path/to/model.png"
}).getObject3D();
scene.add(model);
To generate an image model, you can use the OBJImg
Class script or the Command Line Interface.
All informations are on the npm page.
It is very easy to implement, just link the objimg.js
script to your html then do this:
OBJImg.generateIMG({
obj: "path/to/file.obj",
useWorker: true,
onComplete: function( datas ){
var image = new Image();
image.src = datas;
},
onError: function( error ){
console.error(error);
}
});
When an image is created, you can access it in the developer tools over resources tab, or you can append it to the DOM to save it or drag it.
If the obj
parameter is a path, the script will parse the content for a MTL lib (path to the MTL).
Each pixel represent a precise number between 0 and 65280 (255 * 255 + 255 | red * green + blue) so if you compress the image with less, pixels color will be alterate and datas too... You cant use image compression except lossless compression like OptiPNG. (The objimg CLI already compress the image with the strongest method of OptiPNG).
src
for image and obj parameters, make it more common