CODEWITHSUNDEEP
javascriptnode.jsreactjs3dbabylonjs
kentaur
kentaur

Reputation: 11

how to use dynamic texture in react-babylonjs

For example apply it on a plane:

const ref = useCallback((node) => {
    const myDynamicTexture = new DynamicTexture("fire", 256, scene);

    const dynamicMaterial = node.hostInstance; //node undefined

    dynamicMaterial.diffuseTexture = myDynamicTexture;
    let ctx = myDynamicTexture.getContext();
}, []);

<plane size={20}>
   <standardMaterial
      ref={ref}
      rotate={[new Vector3(1.0, 1.0, 0.5), Math.PI / 3.0, Space.Local]}
   />
</plane>

The problem is, that the property hostInstance in the node object is not defined, but needed to draw on the plane.

Upvotes: 0

Views: 605

Answers (1)

kentaur
kentaur

Reputation: 11

You don't need the hostInstance property at all. Just import DynamicTexture from babylonjs with

import { DynamicTexture } from '@babylonjs/core'

Then create an instance and apply it on the node object.

const ref = useCallback((node) => {
    const myDynamicTexture = new DynamicTexture("fire", 256, scene);
    let ctx = myDynamicTexture.getContext();
    
    //draw here with the context (ctx)

    //update if necessary
    myDynamicTexture.update();

    node.diffuseTexture = myDynamicTexture;
    node.opacityTexture = myDynamicTexture;
}, []);

Upvotes: 1

Related Questions