How do i change texture of ".fbx" model in three js library at runtime?
The main problem with applying a texture to an .FBX model, is that the .FBX is loaded as a group of sub-models, each with their own materials. The way to replace these textures is to traverse the model structure:
// FBX loader returns a group containing a multiple sub-objects. Traverse and apply texture to all.
group.traverse(function (child) {
if (child instanceof THREE.Mesh) {
// apply texture
child.material.map = texture
child.material.needsUpdate = true;
}
});
For a working sample, I've modified the default three.js FBX example to demonstrate this:
http://www.eponalabs.com/experiments/FBXReplaceTexture/fbx_replace_texture.html
When you press the button, the code fragment above is used to replace the textures with a placeholder image from Unsplash.it.
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 am loading a .glb model into Three.js. All the materials get turned into MeshStandardMaterial. How can I convert them to MeshBasicMaterial?
The goal is to get the exact colors that I used in Blender without having to use any lights in the Three.js scene.
Attempts
(1) I have tried the following code, based on https://stackoverflow.com/a/61717988/795016, but the problem is that this approach appears not to work when going from a more complex to a less complex material.
// For each child in the group
loadedGroup.traverse((child) => {
// If this child has a mesh standard material
if (
child instanceof THREE.Mesh
&& child.material instanceof THREE.MeshStandardMaterial
) {
var prevMaterial = child.material;
child.material = new THREE.MeshBasicMaterial();
THREE.MeshStandardMaterial.prototype.copy.call(child.material, prevMaterial);
console.log("child.material", child.material);
}
});
(2) I have also tried to use the gltf-transform tool to change the materials in the model to be unlit, but Three.js still shows them as MeshStandardMaterial.
gltf-transform unlit model-in.glb model-out.glb
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();
}
In my scene I have loaded a .gltf model and it is rendered just fine.. It has a .png texture that is rendered on the surface of the 3d model. Is it possible to swap the texture programmatically? I'm using aframe (a-asset-item and a-entity to load the gltf asset)
Once you’ve loaded a model in A-Frame or three.js, it doesn’t matter much what format it was before1. For A-Frame, you can use JS to modify the model after it loads.
var tex = new THREE.TextureLoader().load('diffuse.png');
tex.flipY = false; // for glTF models.
el.addEventListener('model-loaded', function (e {
e.detail.model.traverse(function(node) {
if (node.isMesh) node.material.map = tex;
});
});
See docs on THREE.MeshStandardMaterial to learn what properties there are to edit, although this could vary depending on the model you’re loading.
1 One exception is the tex.flipY=false setting above — you'll (probably) only need that for glTF, where the UVs have a different orientation than the three.js default.
I try to load a converted collada model (obj -> collada [opens without a problem in max, including working uvs]) with the three.js collada loader. The model was converted using assimp, an open source 3d model converter.
A thing I noticed is that the converted collada model has children inside children but I heard that would be no problem. However if I change the material to something with a texture, I get an error: "TypeError: uv2i is undefined".
As long as I do not use a texture the model loads.
https://dl.dropbox.com/u/2705276/bachelorShowcases/001/webGL_museum_wire.html
Model not loading when specifying a texture:
https://dl.dropbox.com/u/2705276/bachelorShowcases/001/webGL_museum.html
Is this a bug or am I doing something wrong?
function load( model ){
loader.load( 'https://dl.dropbox.com/u/2705276/bachelorShowcases/001/xerox404_webglCONV.dae', createScene1 );
}
function createScene1( geometry ) {
dae = geometry.scene;
mesh = dae.children[0].children[0];
mesh.material = new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture('https://dl.dropbox.com/u/2705276/bachelorShowcases/001/xeroxD.png')});
}
If you check the console you'll see this error:
webGL_museum.html:461
Uncaught TypeError: Cannot read property 'u' of undefined three.js:17814
That basically means that your model doesn't have UVs. In order to use a texture with a model it needs to have UVs.