I am trying to export this https://www.dropbox.com/s/zz1g38xaci2ibod/sailor.blend?dl=1 Blender model using exporter from Three.js 73 (from github master branch).
But when I load it I see no texture:
var loader = new THREE.JSONLoader();
loader.load("assets/sailor.json",
function (geom, mat) {
console.log(mat);
var model = new THREE.Mesh(geom, mat[0]);
model.castShadow = true;
scene.add(model);
});
The model has two meshes (body and eyes) but looks like this exporter can export only one mesh... So for now I exported without eyes.
Exporter settings:
Exporter output file: sailor.json
io_three.export.log is empty with any logging level.
I'm not sure this will solve your problem but it might atleast give you a hint of where the problem is.
I compared my converted JSON files and compared to yours, and noticed that the JSON file that you use does not specify what texture the object should use.
Add:
"mapDiffuse" : "nameoftexture.png",
to your
"materials: [{
...,
...,
...
}]"
array.
Good luck.
EDIT
Your model seems to work with textures for me when I added this line to the materials property array.
Related
I change a PNG texture of a GLTF file to Basis Universal and try to read it through the GLTFLoader of Three.js.
I use basisu executale from https://github.com/BinomialLLC/basis_universal.
Loading a texture which was converted using -mipmap option of basisu executable is successful. The textures looks well.
But when a GLTF file with a basis texture which was converted without -mipmap option is loaded, it looks all black. I would like to load also texture not having mipmap.
Am I missing something? Or is mipmap required to load Basis texture in Three.js ?
I learned how to use BasisTextureLoader and GLTFLoader from Three.js documents. And my initialize code is like the attached code.
https://threejs.org/docs/?=GLTF#examples/en/loaders/GLTFLoader
https://threejs.org/docs/#examples/en/loaders/BasisTextureLoader
let basisLoader = new BasisTextureLoader()
.setTranscoderPath('examples/js/libs/basis/');
.detectSupport(viewer.renderer);
THREE.DefaultLoadingManager.addHandler(/\.basis$/i, basisLoader);
let dracoLoader = new DRACOLoader().setDecoderPath( 'examples/js/libs/libs/draco/' );
let gltfLoader = new GLTFLoader()
.setCrossOrigin('anonymous')
.setDRACOLoader( dracoLoader );
To use Basis Universal compression in a glTF file, don't use the .basis format or BasisTextureLoader – the standardized way to do that is with a .ktx2 file. There's an artist guide for updating a glTF asset to use .ktx2 textures available, which includes some details on mipmaps. You'll almost always need mipmaps, unless you know enough about mipmap filtering to be sure you can disable it without causing rendering issues (this is rare).
three.js provides an example of how to load these files, which would look something like this:
const ktx2Loader = new KTX2Loader()
.setTranscoderPath( 'path/to/basis/transcoder/' )
.detectSupport( renderer );
const loader = new GLTFLoader();
loader.setKTX2Loader( ktx2Loader );
loader.load( 'path/to/model.glb', function ( gltf ) {
...
}, undefined, console.error );
Goal
I'm stuck since yesterday with an issue on modifying a JeelizFilterFace example. My goal is to create my own filters, so I started the the luffy's hat tutorial, which explains that : https://jeeliz.com/blog/creating-a-snapchat-like-filter-with-jeelizs-facefilter-api-part-1-creating-your-first-filter/
Quick description of the problem
My problem is simple : I can't have the glTF example working with glTF models. It always show me a black shape, without the texture.
Details of the problem
The tutorial explains that the model have to be generated with a Blender exporter addons, in order to create the json file which is the model. But the Blender exporter is not supported anymore.
This is why I try to use ThreeJS with the GLTF loader (which is the best solution according to all the tutorials).
My problem is that I can't see any texture on any of my models, when I load it with JeelizFaceFilter/Threejs. I only have the black shape.
Here is what I did :
First, I did all the tutorial to be sure I can run the FilterFace tool, except for the exporting model from Blender part. So, I just copied the exported resources from the Jeeliz repo. The FilterFace works well : the hat is visible, with the texture and I can play with the THREEJS params.
Because I couldn't export the JSON from blender, i wanted to try to use the GLTF 2.0 model, I tried this model, which is working in the gltf-viewer tool (see picture below) : https://s3.eu-west-3.amazonaws.com/com.julianlecalvez/LuffysHat.zip
So far everything seems ok, but when I try to use this glTF loader example in the glTF demos (https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/gltf_fullScreen), it displays my hat in black. I have the good shape, but no texture (or no light?). I just replaced the model URL in this file. And I'm not even sure that the default model (the helmet) is displaying any texture.
I tried with a model from SketchFab, and I have the same : Black shape, no texture.
I put here the code to init the view, when I was trying to redo it outside of the demo file :
let init_view = function(spec) {
const threeStuffs = THREE.JeelizHelper.init(spec, null);
const SETTINGS = {
gltfModelURL: 'objects/luffys_hat_gltf/luffys_hat.gltf',
offsetYZ: [1,0],
scale: 2.2
};
// const loader = new THREE.GLTFLoader();
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load( SETTINGS.gltfModelURL, function ( gltf ) {
gltf.scene.frustumCulled = false;
// center and scale the object:
const bbox = new THREE.Box3().expandByObject(gltf.scene);
// center the model:
const centerBBox = bbox.getCenter(new THREE.Vector3());
gltf.scene.position.add(centerBBox.multiplyScalar(-1));
gltf.scene.position.add(new THREE.Vector3(0,SETTINGS.offsetYZ[0], SETTINGS.offsetYZ[1]));
// scale the model according to its width:
const sizeX = bbox.getSize(new THREE.Vector3()).x;
gltf.scene.scale.multiplyScalar(SETTINGS.scale / sizeX);
// dispatch the model:
threeStuffs.faceObject.add(gltf.scene);
});
// CREATE THE CAMERA
THREECAMERA = THREE.JeelizHelper.create_camera();
}
I am loading a 3D model using 3 files I've been provided with:
example.obj
example.mtl
example.jpg
I am loading them in my Three.js script with this snippet:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('./');
mtlLoader.load('example.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('./');
objLoader.load('example.obj', function(obj) {
scene.add(obj);
}, onProgress, onError);
});
The model is displayed on screen and the textures applied, but incorrectly (textures are not properly assigned to each face, look rotated, etc). Looks like the texture mapping is incorrect. Since the snippet is so simple and everything seems to be set automatically I'm not sure what I could do to try to fix it. Any idea?
BTW, the files were exported from Zbrush.
Thanks in advance
Thanks for the comments but I finally found out what the problem was: Zbrush was exporting the textures upside down. I corrected them and the issue was fixed. Thanks again.
I'm trying to add a lightmap to some mesh after loading them from a GLTF file.
All my objects have 2UV channel.
I'm waiting 'object3dset' and here is my code :
const mesh = this.el.getObject3D('mesh');
var textureLoader = new THREE.TextureLoader();
textureLoader.load("lightmap.png", function(lmap){
mesh.traverse((node) => {
if (!node.isMesh) return;
node.material.lightMap = lmap;
lmap.flipY = node.material.map.flipY; //needed to flip the texture
node.material.needsUpdate = true;
});
});
If I replace the material with a new one and set the lightmap, it's working.
But I want to find a way without recreating all materials.
The lightmap was loaded, but not easy to see.
By default metalness from Khronos Blender Exporter converted in threejs after loading GLTF result to a level 1.0. With this configuration, the lightmap is hard to see and is not corresponding to what we see in Blender.
I hope my mistake can help someone else losing too much time.
I have seen plenty of examples on how to export a mesh or a whole scene from ThreeJS to an OBJ file. Starting from MrDoob example here:https://threejs.org/examples/#misc_exporter_obj
But since a marching cube like this : https://threejs.org/examples/webgl_marchingcubes.html is not an instance of THREE.Mesh, what would be the workaround to export its current geometry into an Obj file? And by extension its material into an mtl file as explained in this question : Export a three js textured model to a .OBJ with .MTL file
EDIT
As far as I understand, it is possible to export a copy of the current state of the metaballs by using the generateGeometry() function provided by marching cubes. Below is an example using filesaver.js and JSZip.js to export the geometry and material as two files in a zip. THREE.OBJExporter comes from the modified version of the original obj exporter of threeJS done as mentionned above (Export a three js textured model to a .OBJ with .MTL file):
function exportToObj(the_object){
var zip = new JSZip();
var the_exporter = new THREE.OBJExporter();
var result = the_exporter.parse(the_object);
zip.file("Blob.obj", result.obj);
zip.file("Blob.mtl", result.mtl);
zip.generateAsync({type:"blob"}).then(function (blob) {
saveAs(blob, "Blob.zip");
});
}
$(document).on('keyup',function(e) {
if (e.which == 13){ // enter key to export to OBJ
var TempMesh = new THREE.Mesh(effect.generateGeometry(),effect.material);
//effect is of the type: new THREE.MarchingCubes()
exportToObj(TempMesh);
}
});
In that way, if a color is provided to the material, it will be exported in the .mtl file. But the last missing piece is probably how to properly convert a shaderMaterial for example? Save it as a texture maybe?