javascript - 在 React-three-fiber 的 GLTF 模型上动态编辑材料

Question

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

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

我知道这可能很简单，但我不知道。谢谢！

Answer 1

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

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

Answer 2

要么这样做：

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

或这个：

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

dash case 可以穿透任意深度，您也可以修改纹理值：

<mesh ... material-map-flipY>

见：https ://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#piercing-into-nested-properties