如何在three.js中将纹理应用到导入的GLTF模型?

huangapple go评论74阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年4月11日 06:37:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/75981237.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定