Question

我正在 React 中处理一个项目，我正在尝试更改正在使用的网格的纹理，但无法访问材料属性。每当我将对象记录到控制台时，我都可以看到材料属性，但我无法通过“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 来访问材料属性。出于某种原因，这对我来说不是一个选择，所以我就是这样做的：

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;

如何更改网格纹理？

2 个答案: