Changing mesh texture/color on props reloading model #1825

ulisescarreonalvarez · 2021-11-12T17:01:48Z

ulisescarreonalvarez
Nov 12, 2021

Describe the bug
We have a model made on 3d Max with some Meshes, we have a RGB color picker, when we change the color we need to update the color texture of certain meshes, we have the color picker and the 3D Viewer on different components.

When we change the color state we pass the props to the component, our main issue is that for each change we made it appears that we model is loading multiple times so out memory goes up and then too slow.

Enviroment (please complete the following information):

OS: Mac OS Big Sur
Browser : Firefox 94.0.1
Library Version: 7.0.15

Additional context

Code example:

Our main component:

return <ThumbnailScene colorSelection={props.others} size={'100%'}/>;

Our ThumbnailScene Component:

import { object } from "prop-types";
import React, { useState, useEffect } from 'react';
import * as THREE from "three";
import { Environment, OrbitControls } from "@react-three/drei";
import { Html, useProgress } from "@react-three/drei";
import { models } from '../../models';
import { useLoader } from "@react-three/fiber";
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { Canvas } from '@react-three/fiber';
import { TextureLoader } from 'three/src/loaders/TextureLoader';
import { Suspense } from "react";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import { unmountComponentAtNode } from '@react-three/fiber';

export default function ThumbnailScene(props) {

    const TextureEffect = (Color, Texture, TextureMap, Rough, Metalness) => {
        const texturing = useLoader(TextureLoader, Texture);
        const texturingGreenChanel = useLoader(TextureLoader, TextureMap);
        const texturingColor = new THREE.Color(Color);
        texturing.wrapS = THREE.RepeatWrapping;
        texturing.wrapT = THREE.RepeatWrapping;
        texturing.repeat.set(2, 2);
        return new THREE.MeshStandardMaterial({ color: texturingColor, map: texturing, roughnessMap: texturingGreenChanel, roughness: Rough, metalness: Metalness });
    }

    function Scene() {
        const materials = useLoader(MTLLoader, "MTL URL");
        const obj = useLoader(OBJLoader, "OBJ URL", (loader) => {
            materials.preload();
            loader.setMaterials(materials);
        });
        const model = Object.create(models['BaseConfigurator']);
        const [meshMatrix, setConfigurator] = useState(model.getMeshing());
        const childrenObj = obj.children;
        const { colorSelection } = props;
        
        Object.keys(colorSelection['SelectedColors']).forEach((element, index) => {
            if (meshMatrix.hasOwnProperty(element)) {
                const childrenMatrix = Object.keys(meshMatrix[element]);
                const filtered = childrenObj.filter(item => childrenMatrix.includes(item.name));
                filtered.forEach((elementFiltered, index) => {
                    if (meshMatrix.hasOwnProperty(element)) {
                        if (meshMatrix[element][elementFiltered.name].hasOwnProperty('Materials')) {
                            const Materials = meshMatrix[element][elementFiltered.name]['Materials'];
                            const { Texture, Color, Rough, Metalness, TextureMap } = Materials;
                            elementFiltered.material = TextureEffect(colorSelection['SelectedColors'][element], Texture, TextureMap, Rough, Metalness);
                            elementFiltered.material.needsUpdate = true;
                        }
                    }
                });
            }
        });
        return <primitive object={obj} scale={0.4} />;
    };

    const { progress } = useProgress();
    return (
        <div className="Suspense">
            <Canvas mode="concurrent">
                <Suspense fallback={<Html center>{progress} % loaded</Html>}>
                    <Scene />
                    <OrbitControls />
                </Suspense>
                <directionalLight position={[0, 200, 0]} intensity={0.5} />
                <directionalLight position={[100, 200, 100]} intensity={0.5} />
                <directionalLight position={[-100, -200, -100]} intensity={0.5} />
            </Canvas>
        </div>
    );
}

Are we missing something to avoid the performance issue, we read the documentation.

https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls

drcmda · 2021-11-13T00:26:46Z

drcmda
Nov 13, 2021
Maintainer

moving this into a discussion for now. i think it is unlikely this is a bug.

useLoader is cached, there is no way it can double load unless the url changes. but the render function is full of side effects, and that is not good.

no idea what this is, but create sounds like it creates something, not good (looks like it needs to be inside useMemo)

const model = Object.create(models['BaseConfigurator']);

this executes "getMeshing()" on every render, not good. better make that useState(() => model.getMeshing())

const [meshMatrix, setConfigurator] = useState(model.getMeshing())

this looks like you're re-creating materials every render (needs to be inside a useMemo or useLayoutEffect)

Object.keys(colorSelection['SelectedColors']).forEach((element, index) => {
  ...

and this is probably your root issue

return <primitive object={obj} scale={0.4} />;

r3f won't touch primitives, it won't dispose of it after the component unmounts, because it is an external. it couldn't possibly reach into externals and destroy them. if you use primitive the object is yours to manage. keep in mind though, if you dispose (for instance in a useEffect) the cached item will still be there. useLoader has a clear() function that allows you to remove that, too.

i would recommend not using primitive and not obj/mtl. use gltf and gltfjsx, if possible.

use useMemo if you need to memoize data
use useState(() => xyz) if you need local state
use useLayoutEffect for side-effects that affect the model/view

0 replies

drcmda · 2021-11-13T00:35:26Z

drcmda
Nov 13, 2021
Maintainer

another one, and this could be the worst

function App() {
  function Scene() { ... }
  return <Scene />
}

this is an anti pattern. since Scene is not a stable reference it will mount/unmount every render. in reacts eyes you're giving it a new component, it has practically no permanent lifecycle. this is a massive memory waste since you're basically destroying and re-creating the entire scene on every render.

this is how you form components:

function App() { ... }
function Scene() { ... }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Changing mesh texture/color on props reloading model #1825

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

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!

Select a reply

Uh oh!

Uh oh!

Changing mesh texture/color on props reloading model #1825

Uh oh!

ulisescarreonalvarez Nov 12, 2021

Replies: 2 comments

Uh oh!

Uh oh!

drcmda Nov 13, 2021 Maintainer

Uh oh!

Uh oh!

drcmda Nov 13, 2021 Maintainer

ulisescarreonalvarez
Nov 12, 2021

drcmda
Nov 13, 2021
Maintainer

drcmda
Nov 13, 2021
Maintainer