ThreeJs 将纹理添加到 GLTF 对象表面

Question

我正在尝试在 gltf 加载的网格上动态应用图像。

加载模型的代码如下所示：


const gltfLoader = new GLTFLoader();
  const url = 'resources/models/mesh.gltf';
  gltfLoader.load(url, (gltf) => {
    const root = gltf.scene;
    scene.add(root);
  })

从顶部看，元素看起来像一个圆角矩形：

检查导入的网格时，我可以看到 BufferGeometry 的计数为 18.000 点：

一切正常，但是如果我像这样应用纹理：

const texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
const material = new THREE.MeshBasicMaterial( { map: texture } );
root.children[0].material = material;

图像不可见，但网格现在用一种颜色着色。

是否可以只在矩形的顶面上应用图像？

Answer 1

如果没有看到生成的图像，很难判断问题出在哪里。但是，我会像这样分配一个新纹理：root.children[0].material.map = texture 而不是创建一个全新的 material，因为您不想丢失 GLTF 中的所有 material 属性.

此外，MeshBasicMaterial 总是看起来很平淡，因为 it is not affected by lights。

ThreeJs 将纹理添加到 GLTF 对象表面

ThreeJs add Texture to a GLTF object surface

textures

mesh

three.js