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而不是创建全新的材质，因为您不想丢失GLTF中的所有材质属性。

另外，MeshBasicMaterial总是看起来平坦，因为it is not affected by lights。