在React三纤维中动态编辑GLTF模型上的材料

Question

我正在尝试动态更改"的纹理贴图值；。gltf"；模型在一个简单的反应三纤维场景中。如果我理解正确，你必须在材质上添加纹理文件，然后将材质添加到模型中？在我的场景中，纹理文件被烘焙到"中；。gltf"；文件我想用jsx更改一些值，比如alphaMap的不透明度。

这是我的沙盒：https://codesandbox.io/s/patient-framework-3holn?file=/src/App.js

我知道这可能真的很简单，但我一无所知。谢谢

Answer 1

要么这样做：

<mesh geometry={...}>
<meshStandardMaterial color={materials.Moon.color} transparent opacity={0.5} />

或者这个：

<mesh geometry={...} material={materials.Moon} material-transparent material-opacity={0.5} >

破折号大小写可以穿透到你想要的深度，你也可以修改纹理值：

<mesh ... material-map-flipY>

请参阅：https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#piercing-插入嵌套属性

Answer 2

无论原始对象是否烘焙到GLTF文件中，都可以轻松地操纵场景中对象的属性。例如，您可以在您的GLTF加载后更改材质的主要纹理，如下所示：

var texLoader = new THREE.TextureLoader();
var newTexture = texLoader.load("my/new/texture.jpg");
object.material.map = newTexture;