CODEWITHSUNDEEP
javascriptreactjsthree.jsgltfreact-three-fiber
user14440113
user14440113

Reputation:

Dynamically Edit Material on GLTF Model in React-three-fiber

I'm attempting to dynamically change texture map values of a ".gltf" model in a simple react-three-fiber scene. If I'm understanding this correctly, you must add the texture files on a material and then add the material to the model? In my scenario, the texture files are baked into the ".gltf" file. I would like to change values such as the opacity of the alphaMap with jsx.

Here's my sandbox: https://codesandbox.io/s/patient-framework-3holn?file=/src/App.js

I know this is probably really simple, but I have not a clue. Thanks!

Upvotes: 1

Views: 8331

Answers (2)

hpalu
hpalu

Reputation: 1435

either do this:

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

or this:

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

dash case can pierce as deep as you want, you can modify texture values as well:

<mesh ... material-map-flipY>

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

Upvotes: 1

M -
M -

Reputation: 28507

You can easily manipulate the properties of the objects in your scene, regardless of whether the original one was baked into your GLTF file. For example, you can change the material's main texture like this after your GLTF has loaded:

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

Upvotes: 1

Related Questions