Update Complex Mesh after condition is satisfied #1827

ThomLVieira · 2021-11-16T20:51:12Z

ThomLVieira
Nov 16, 2021

Good evening, I am new to react-three-fiber, and I am facing a problem to update / render a complex mesh after a previous function returns a true boolean variable. The logic is:

draw a polyline by clicking on the canvas: once the polyline is closed the boolean variables: profileTrigger becomes false and facadeTrigger becomes true.
Once these conditions are met, the component's DrawFacade should update the mesh attributes (count and array) using the return values from the setMesh function. The logic seems to work fine, I console.log the array and the counter and it is right, but I still can't render the mesh on the screen.

Here is the code:

`function setMesh () {
// slice init array -> keep only coordenate points used
const positionsFinal = House[0].positions.slice(0, (House[0].drawCount) * 3 );

//triangules the points to create mesh
const triangles = earcut(positionsFinal, null, 3);
const positionsMesh = new Float32Array( triangles.length * 3 );
const triangulationCounter = triangles.length * 3;

for (let i = 0; i < triangles.length; i++) {
    positionsMesh[i * 3    ] =  positionsFinal[triangles[i] * 3];       //x 
    positionsMesh[i * 3 + 1] =  positionsFinal[triangles[i] * 3 + 1];   //y
    positionsMesh[i * 3 + 2] =  positionsFinal[triangles[i] * 3 + 2];   //z            
}

return [triangulationCounter, positionsMesh]

}

export const DrawBackFacade = () => {
const [active, setActive] = useState(false);

useFrame(() => {
    if (House[0].profileTrigger == false && House[0].facadeTrigger == true) { setActive(true) 
        console.log(active)
        console.log("num", setMesh()[0])
        console.log("vertices", setMesh()[1])
    }

})
return (
    <mesh>
        <bufferGeometry 
            attach="geometry"
        >
            <bufferAttribute
                attachObject={["attributes", "position"]}
                count={active ? setMesh()[0] : 100 }
                itemSize={3}
                array={active ? setMesh()[1] : new Float32Array(500)}
                drawrangle={(0, 0)}
            />
        </bufferGeometry>
        <meshBasicMaterial 
            attach = "material"
            color = "white"
            transparent = { true }
            opacity = { 0.75 }
            side = "DoubleSide"
        />
    </mesh>
)

}`

Any thoughts would be helpful!
Thanks!

Answered by drcmda

Nov 16, 2021

i believe in threejs you cant change buffergeometry like that. see: https://threejs.org/docs/#manual/en/introduction/How-to-update-things

you need to give it a buffer and then you can mutate it inside a useLayoutEffect. you can't increase the size of the buffer.

View full answer

drcmda · 2021-11-16T22:44:30Z

drcmda
Nov 16, 2021
Maintainer

i believe in threejs you cant change buffergeometry like that. see: https://threejs.org/docs/#manual/en/introduction/How-to-update-things

you need to give it a buffer and then you can mutate it inside a useLayoutEffect. you can't increase the size of the buffer.

3 replies

ThomLVieira Nov 17, 2021
Author

@drcmda you are right. Can you provide a small example? I am new in react and still getting more familiar with hooks.
Another solution (more general) that I tried was: As I don't need to init the bufferGeometry at component initialization. I tried to create 2 returns: The initial one returning null and the second return where I built the bufferGeometry to return the mesh. But react seems to not identify the change. Can we force the rendering update?

drcmda Nov 17, 2021
Maintainer

you can either give the buffer enough space and then scale back (drawCount) or re-create the whole thing. you can force elements in react to re-create by giving them a [changing] key.

ThomLVieira Nov 18, 2021
Author

I got the logic, but I am still struggling to implement it...
I tried something like this: 1- I put all geometry creation on a separate function 2- create the component (below) to read the change of props.profileTrigger and call the setMesh function if the active state changes. It is not working yet, but what do you think? Could it work?

export const DrawBackFacade = (props) => { const [active, setActive] = useState(Draw Profile Facade: ${props.profileTrigger}`);

useEffect(() => {
    console.log("render mesh")
    setMesh ()
}, [active])

return ( 

    <Html onChange = {() => {setActive(`Draw Profile Facade: ${props.profileTrigger}`)}}> {active} </Html>

    // < onchange={ setActive(e => House[0].profileTrigger) } />
 )

}`

ThomLVieira · 2021-11-18T14:48:58Z

ThomLVieira
Nov 18, 2021
Author

Hello @drcmda and others. I found a solution following the suggestion of mutating the bufferGeometry + useFrame hook to check for updates. Below you can see the solution. Hope it could be useful for others.

` export const DrawMesh = (props) => {
const meshRef = useRef();
useFrame(() => {
if (props.profileTrigger === false) {

        // slice init array -> keep only coordenate points used
        const positionsFinal = House[0].positions.slice(0, (House[0].drawCount) * 3 );

        //triangules the points to create mesh
        const triangles = earcut(positionsFinal, null, 3);
        const triangulationCounter = triangles.length * 3;

        // mutating bufferGeometry
        for (let i = 0; i < triangles.length; i++) {
            props.positionsMesh[i * 3    ] =  positionsFinal[triangles[i] * 3];       //x 
            props.positionsMesh[i * 3 + 1] =  positionsFinal[triangles[i] * 3 + 1];   //y
            props.positionsMesh[i * 3 + 2] =  positionsFinal[triangles[i] * 3 + 2];   //z            
        }

        // setting range of array + updating attributes
        meshRef.current.setDrawRange(0, triangulationCounter);
        meshRef.current.attributes.position.needsUpdate = true;
    }
});

return (
    <mesh>
        <bufferGeometry 
            ref={meshRef}
            attach="geometry"
        >
            <bufferAttribute
                attachObject={["attributes", "position"]}
                count={props.positionsMesh.length / 3}
                itemSize={3}
                array={props.positionsMesh}
                drawrangle={(0, 0)}
            />
        </bufferGeometry>
        <meshBasicMaterial 
            attach = "material"
            color = "white"
            transparent = { true }
            opacity = { 0.75 }
            side = "DoubleSide"
        />
    </mesh>
);

};
`
Thank you for the help @drcmda

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Update Complex Mesh after condition is satisfied #1827

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Update Complex Mesh after condition is satisfied #1827

Uh oh!

ThomLVieira Nov 16, 2021

Replies: 2 comments · 3 replies

Uh oh!

drcmda Nov 16, 2021 Maintainer

Uh oh!

Uh oh!

ThomLVieira Nov 17, 2021 Author

Uh oh!

Uh oh!

drcmda Nov 17, 2021 Maintainer

Uh oh!

ThomLVieira Nov 18, 2021 Author

Uh oh!

ThomLVieira Nov 18, 2021 Author

ThomLVieira
Nov 16, 2021

Replies: 2 comments 3 replies

drcmda
Nov 16, 2021
Maintainer

ThomLVieira Nov 17, 2021
Author

drcmda Nov 17, 2021
Maintainer

ThomLVieira Nov 18, 2021
Author

ThomLVieira
Nov 18, 2021
Author