如何更改网格纹理？

Question

我正在使用 React 开发一个项目，我正在尝试更改正在使用的网格的纹理，但我无法访问 material 属性。每当我将对象记录到控制台时，我都可以看到 material 属性但我无法通过 'mesh.material' 访问它。有人熟悉这个问题吗？

import React, { useMemo } from 'react';
import { useGLTF, useTexture } from 'drei';
import modelConfig from '../../config/model.config';

    const gltfModel = useGLTF(modelConfig.path.meshes, true);
    gltfModel.scene.castShadow = true;
    gltfModel.scene.receiveShadow = true;
    const mesh = gltfModel.scene.getObjectByName("Floor")
    console.log(mesh);

Answer 1

useGLTF 是异步的，因此您必须在反应状态回调中访问它，例如 useEffect

尝试添加

useEffect(() =>{
 gltfModel.scene.castShadow = true;
 gltfModel.scene.receiveShadow = true;
 const mesh = gltfModel.scene.getObjectByName("Floor")
});

虽然 useGLTF 在 useEffect 之前还在外面

Answer 2

在互联网上的大多数示例中，我发现人们使用 mesh.material 访问 material 属性。出于某种原因，这对我来说不是一个选择，所以我就是这样做的：

import { useGLTF, useTexture } from 'drei';
import * as THREE from "three";


const gltfModel = useGLTF(modelConfig.path.meshes, true);
const mesh = gltfModel.scene.getObjectByName("Floor")
const texture = new THREE.TextureLoader().load(img);
const material = new THREE.MeshBasicMaterial({ 
            map: texture, 
        });
mesh['material'] = material;
mesh['material'].needsUpdate = true;

如何更改网格纹理？

How do I change mesh textures?

three.js

reactjs

react-three-fiber