Hey guys, I am quite annoyed at this, but I am trying to change the texture of my model but I cannot see the chnage on the model, I am not getting any error or any issue in my console and even the console.log gives me the correct response so has anyone ever dealt with this issue before?
Can you try moving the gltf loading Inside the loaded callback of the texture?
new THREE.TextureLoader('./texture/Tile.jpg',(tex)=>new THREE.GLTFLoader().load('Buggy.gltf',(gltf)=>gltf.scene.traverse(e=>e.isMesh&&(e.material.map=tex)));
Or the async variant:
let tex = await (new THREE.TextureLoader()).loadAsync(“./texture/Tile.jpg”);
let glb = await (new THREE.GLTFLoader()).loadAsync(“Buggy.gltf”);
Instead of using Vanilla GLTFLoader and TextureLoader provided by three.js use useGLTF from react three drei.
First you should convert your model into a jsx component to make it compatible and work better with React-Three-Fiber to do that just follow the steps on the gltfjsx site.
When you will convert the model using gltfjsx the jsx compnent will have all the seperate children and parent objects, making them all individually customisable. There you can easily attach the texture you are trying to apply on to your model using useTexture which will make it easier to load and use the textures.
Does your model have UVs? You’ll need UV layouts to add textures to models, usually the model and the texture are designed to be used together – if not, you’ll probably want to use something like Blender to do the UV layout.
Also, make sure the scene has lighting. A demo may be helpful if you still can’t see any result.
Can you share any JSFiddle, codepen or codesandbox so that we can see in detail what the problem in your code really is? If not what about the model and the part where you want to apply the texture.
UVs define how a texture wraps onto a model. Without UVs (or something like them), the texture cannot be wrapped on the model — you may just be seeing pixel 0,0 from the texture here.
If the model is just a box or plane, you can use built-in three.js geometries, which come with basic UVs. To add UVs and a texture to your model, you would want to use something like Blender I think. Or something like a triplanar projection, which is (currently) more difficult to do in three.js.
First of all since you are making your project in R3F and not in three.js instead of using GLTFLoader you can use gltfjsx to convert the model into a React component, that would make modification of children nodes easier. Also you should take a look at React-Three-Drei an awesome R3F component library that could save you loads of time, and I would prefer you to specially take a look at the Texture / useTexture helper of drei
Currently, there are only 2 possible solution for applying this texture on your geometry.
To is to define the UVs to the texture as already stated by @donmccurdy that would make the texture to wrap on the model just as you want in a customised manner.
To convert the geometry into a jsx component using the gltfjsx cli that would give you the component of the model containing all the geometry nodes that can be modified separately and if the geometry have all the faces of the floor as a separate node you can easily map the texture on each node using the Texture / useTexture helper
There is also an online gltfjsx converter that can instantly convert the model as well as provide the code: Poimandres gltf
Correct me if I am wrong cause I am still learning too, but I worked on a project in which I had a roof model which was made in SketchUp by the client and he wanted a texture on it, so I imported the model in blender and observed that the model had its all nodes separated, what I did instead of defining the UVs I applied the same texture on all the separate nodes and it did the work just fine.
I tried transforming it but it was already in a glb format so I decided no to transform,it I played around with the lights and yet no changes. Thus I have provided my entire functions and material in hopes that someone can tell me what else I need to do. Thank you all again so very much!!!