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

【问题标题】：Dynamically Edit Material on GLTF Model in React-three-fiber在 React-three-fiber 的 GLTF 模型上动态编辑材料
【发布时间】：2021-03-05 21:29:38
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs three.js gltf react-three-fiber

【解决方案1】：

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

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

【讨论】：

感谢您的提示，但我希望更改地图的值。有没有办法专门编辑地图的值？这是一个在鼠标拖动光标 cineshader.com 时更改地图位移值的示例；我想知道 jsx 是否可以做到这一点。
Cineshader 演示使用自定义着色器。我想你可以try learning GLSL and custom shader creation 复制这种行为。或者，here's an example 使用 2D <canvas> 上下文动态创建的纹理。只需在右上角的方块上画，您就会在立方体上看到它。
谢谢！这是一个很好的学习例子。

【解决方案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

【讨论】：

看来我做错了什么。我将包含材质的“meshStandardMaterial”添加到颜色图中。我也试过“MeshStandardMaterial.”codesandbox.io/s/patient-framework-3holn?file=/src/Moon.js；我收到 Object.defineProperty 错误。
我也直接在网格上做了“material-transparent material-opacity={0.5}”；它有效，但它显示了球体拓扑的轮廓。就好像每个三角形的不透明度值都不同。