Can i set a New path for All Textures, with FBXLoader ?
by default, textures should be located beside the FBX model file.
i want to place all textures in a different folder.
Try it with Loader.setResourcePath:
const loader = new THREE.FBXLoader();
loader.setResourcePath( 'path/to/my/textures/' );
three.js R108
Related
No matter what I do, I cannot get a texture to update after importing a GLTF model using react-three fiber.
const { nodes, materials } = useGLTF("/glb4.glb");
const newtexture = useLoader(TextureLoader, "texture1.jpg");
newtexture.flipY = false;
Now I can do
let newmaterial = new THREE.MeshPhysicalMaterial({ map: newtexture});
to import it into the scene with
<mesh
geometry={nodes.Body_Front_Node.geometry}
material={newmaterial}
/>
However it results in a grey material without the texture. Even modifying the original gltf material with the new texture gives the same result.
Is there a way to update the texture of a gltf mode dynamically? Here is the full codesandbox: https://codesandbox.io/p/github/Mazzz-zzz/fabrigen/main?file=%2Fsrc%2FApp.js
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 );
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?
I have a quite complex shape (dressed girl) that in Blender is broken down into different objects and it's loaded into Three.js with the JSON loader (with a little hack I made, that uses zipped files instead of just JSON files, as there are a lot of vertices).
As I want to change dynamically the style of the dress from a Web page, I was wondering how I can show/hide different pieces (e.g. sleeves) in the scene.
I tried traversing the THREE.Mesh, but there are no children.
When I export from Blender with the JSON exporter, I don't see anything referring to the names of the objects in the JSON. Is the structure lost?
If you are using meshes containing lots of vertices, I would advise you to use the openCTM webGL loader instead of zip hacking. Here is a link to the loader : http://threejs.org/examples/webgl_loader_ctm.html
This mesh compression tool uses LZMA compression method and can reduce the size of your files by 93%...
Concerning the JSONLoader, using an array might help:
var meshes = [];
...
var loader = new THREE.JSONLoader();
var onGeometry = function(geom)
{
var mesh = new THREE.SceneUtils.createMultiMaterialObject(geom, [material]);
meshes.push( mesh );
...
scene.add(mesh);
};
loader.load("yourfile.js", onGeometry);
Hope this helps
It is possible to load an entire scene with several meshes from a json file exported from Blender and handle them separately!
You can follow the complete process of exporting a entire scene from Blender and the right way of handling the exported meshes on my answer of this post.
So, you can get the different meshes and manipulate them separately using the getObjectByName method. But it is important to know that the loaded object isn't a Geometry anymore. It is labeled with the Scene type by now and it must be handled in a different way.
The loading code must look like this one:
loader = new THREE.JSONLoader();
loader.load( "obj/Books.json", function ( loadedObj ) {
var surface = loadedObj.getObjectByName("Surface");
var outline = loadedObj.getObjectByName("Outline");
var mask = loadedObj.getObjectByName("Mask");
scene.add(surface);
scene.add(outline);
scene.add(mask);
} );
Besides, you can handle the multiple materials of single mesh using THREE.MeshFaceMaterial like in the following code:
var mat1 = new THREE.MeshLambertMaterial( { map: texture1 } );
var mat2 = new THREE.MeshLambertMaterial( { map: texture2 } );
var materials = [mat1, mat2];
var faceMat = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh( geometry, faceMat );
scene.add( mesh );
Hope this helps :)