英文:
How to apply a texture to an imported GLTF model in three.js?
问题
I am currently trying to map a texture in three.js on an imported GLTF model. I tried the texture on a cube and the result is what I want, but when I try to apply the same texture to the imported model, the texture doesn't seem to apply and there is only a change in color without any of the texture's details.
Here is the code for the cube:
const textureLoader = new THREE.TextureLoader();
const tilesBaseColor = textureLoader.load('Fabric_Knitted_006_basecolor.jpg');
const plane2 = new THREE.Mesh(new THREE.BoxGeometry(3,3,3),
new THREE.MeshStandardMaterial(
{
map: tilesBaseColor,
}
));
plane2.position.y = 3;
plane2.rotation.x = 0;
scene add(plane2);
Here is the code for the vest:
const textureLoader2 = new THREE.TextureLoader();
const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg');
newTexture2.flipY = false;
const gltfLoader = new GLTFLoader();
gltfLoader.load('prom_suit/scene.gltf', (gltf) => {
gltf.scene.scale.set(0.1*gltf.scene.scale.x, 0.1*gltf.scene.scale.y,0.1*gltf.scene.scale.z);
const model = gltf.scene;
const mesh = gltf.scene.getObjectByName('Object_212');
mesh.material.map = newTexture2;
mesh.material.needsUpdate = true;
scene.add(model);
Thanks in advance. The code for the vest does make a change, since the color turns into the color of the texture, but the details don't seem to apply.
英文:
I am currently trying to map a texture in three.js on a imported GLTF model. I tried the texture on a cube and the result is what I want, but when I try to apply the same texture to the imported model, the texture doesn't seem to apply and there is only a change in color without any of the texture's details :
picture
.You can see on this picture that at the bottom, the cube has more details than the vest.
Here is the code for the cube :
const textureLoader = new THREE.TextureLoader();
const tilesBaseColor = textureLoader.load('Fabric_Knitted_006_basecolor.jpg');
const plane2 = new THREE.Mesh(new THREE.BoxGeometry(3,3,3),
new THREE.MeshStandardMaterial(
{
map: tilesBaseColor,
}
));
plane2.position.y = 3;
plane2.rotation.x = 0;
scene.add(plane2);
Here is the code for the vest :
const textureLoader2 = new THREE.TextureLoader();
const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg');
newTexture2.flipY = false;
const gltfLoader = new GLTFLoader();
gltfLoader.load('prom_suit/scene.gltf', (gltf) => {
gltf.scene.scale.set(0.1*gltf.scene.scale.x, 0.1*gltf.scene.scale.y,0.1*gltf.scene.scale.z);
const model = gltf.scene;
const mesh = gltf.scene.getObjectByName('Object_212');
mesh.material.map = newTexture2;
mesh.material.needsUpdate = true;
scene.add(model);
Thanks in advance
The code for the vest does make a change, since the color turns into the color of the texture, but the details don't seem to apply.
答案1
得分: 0
The cube has a simple UV mapping. Texture can be applied correctly.
然而,GLTF模型具有更复杂的UV映射。
UV source:
https://threejs.org/examples/?q=uv#misc_uv_tests
You can try to adjust the scale,
const textureLoader2 = new THREE.TextureLoader(); const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg'); newTexture2.wrapS = texture.wrapT = THREE.RepeatWrapping newTexture2.repeat.set(20, 20);
I strongly recommend to use Blender for handling the gltf model, instead of using three js function, eg. shader material etc.
英文:
The cube has a simple UV mapping. Texture can be applied correctly.
However, GLTF model have a more complex UV mapping.
UV source:
https://threejs.org/examples/?q=uv#misc_uv_tests
You can try to adjust the scale,
const textureLoader2 = new THREE.TextureLoader();
const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg');
newTexture2.wrapS = texture.wrapT = THREE.RepeatWrapping
newTexture2.repeat.set(20, 20);
I strongly recommend to use Blender for handling the gltf model, instead of using three js function, eg. shader material etc.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论