Different behavior between development and production

[Lucascuibu]

Hi, I am writing a project using react, three/fiber, and vite.
I am trying to use Zustand to manage the state.

type NormalStoreType = {
    useBasicMaterial: boolean,
    normalsType: string,
    setNormalsType: (type: string) => void,
    plotType: string,
    setPlotType: (type: string) => void,
    meshLoaded: boolean,
    setMeshLoaded: (loaded: boolean) => void,
    showNormals: boolean,
    toggleNormals: () => void,
    showWireframe: boolean,
    toggleWireframe: () => void

}

const useNormalStore = create<NormalStoreType>()(set => ({
    useBasicMaterial: false,
    normalsType: 'Equally Weighted',
    setNormalsType: (type) => set(() => ({ normalsType: type })),
    plotType: 'Shaded',
    setPlotType: (type) => set(() => ({ plotType: type })),
    meshLoaded: false,
    setMeshLoaded: (loaded) => set(() => ({ meshLoaded: loaded })),
    showNormals: false,
    toggleNormals: () => set((state) => ({ showNormals: !state.showNormals })),
    showWireframe: false,
    toggleWireframe: () => set((state) => ({ showWireframe: !state.showWireframe }))
}));

By default I want both normal and wireframe are hidden until we turn them on via leva, thus they are set false.
Everything works fine in development. But after I run vite build, these two boolean are set true.
such behavior can be checked in the second line of the following function.

function SceneContent() {
    const { normalsType, plotType, showNormals, showWireframe, useBasicMaterial } = useNormalStore();
    console.log( showNormals, showWireframe);
    const { scene } = useThree();
    let polygonSoup = MeshIO.readOBJ(bunny);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    let mesh = new Core.Mesh();
    const materialSettings = useMemo(() => ({
        vertexColors: true,
        polygonOffset: true,
        polygonOffsetFactor: 1,
        polygonOffsetUnits: 1,
        side: THREE.DoubleSide
    }), []);
    mesh.build(polygonSoup);
    let geometry = useMemo(() => new Core.Geometry(mesh, polygonSoup!['v']), [mesh, polygonSoup]);
    const { threeMesh, normalsHelper, wireframe } = useMemo(() => initThreeMesh(mesh, geometry, materialSettings), [geometry, mesh, materialSettings]);
   
    useEffect(() => {
        scene.add(threeMesh);
        return () => {
            scene.remove(threeMesh);
            threeMesh.geometry.dispose();
            threeMesh.material.dispose();
        };
    }, [scene, threeMesh]);
        
    useEffect(() => {
        threeMesh.geometry.setAttribute('normal', new THREE.BufferAttribute(updateNormals(mesh, geometry, normalsType), 3));
        threeMesh.geometry.attributes.normal.needsUpdate = true;
        normalsHelper.update();
    }, [normalsType, threeMesh.geometry, normalsHelper, mesh, geometry]);

    useEffect(() => {
        let { colors, nowuseBasicMaterial } = updatePlot(plotType, mesh, geometry, useBasicMaterial);
        threeMesh.material = nowuseBasicMaterial ? new THREE.MeshBasicMaterial(materialSettings)  : new THREE.MeshPhongMaterial(materialSettings) ;
        threeMesh.geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
        threeMesh.geometry.attributes.color.needsUpdate = true;
    }, [plotType, useBasicMaterial, geometry, materialSettings, threeMesh, mesh]);

    
    useEffect(() => {
        if (showNormals) scene.add(normalsHelper);
        else scene.remove(normalsHelper);
        if (showWireframe) threeMesh.add(wireframe);
        else threeMesh.remove(wireframe);

       
    }, [scene, showNormals, showWireframe,normalsHelper,threeMesh,wireframe]);
    return null
}

Also after I built, I can turn off the wire frame, but I fail to turn off the normals. Both functionality works fine in the development.

The full code can be found in my repo.
https://github.com/Lucascuibu/homepage/blob/main/src/Graphicses/Bunny.tsx

I am new to React and Zustand thus I am not very familiar about them. Please let me know if there's some inappropriate usage in my code. I am very amazed by not only zustand but also fiber/drei/three eco system. Those elegant libs make my code much simpler and easy to organize. Thank you for all you guys work.

[dbritto-dev]

Sure let me check it out

Ref: https://github.com/Lucascuibu/homepage/

[dbritto-dev]

@Lucascuibu as far I see, you are using nextjs, you should follow our nextjs guide. Apart from that everything looks except that I would be careful of creating/re-creating instances on components, for instance this: https://github.com/Lucascuibu/homepage/blob/main/src/Graphicses/Bunny.tsx#L183