Change Model Mesh with only Part Loading #2880

yinxiangshi · 2023-06-11T03:18:59Z

yinxiangshi
Jun 11, 2023

Hi there, I am a beginner in the WebGL world. I have a question based on my developing experience.

Basically, when we load a model, we will have the following:

function Model({ ...props }) {
    const gltf = useLoader(GLTFLoader, "g17.glb");

    return (
        <mesh {...props}>
            <primitive object={gltf.scene} scale={1.0} />
            <OtherComponents/>
        </mesh>
    )
}

The issue is I want to add markers (e.g. buttons) to the model itself. By clicking on the button, we can update a part of the model's mesh.

For example:

function GetComponents(props) {
    if (props.sights === "1"){
        return (
            <group position={[0, 1.2, 0]}>
            <Components1 />
            </group>
        );
    } else if (props.sights === "2") {
        return (
            <group position={[0.5, 0.7, 0]}>
                <Components2 />
            </group>
        );
    }
}
function Model({ ...props }) {
    const gltf = useLoader(GLTFLoader, "g17.glb");
    const [sights, setSights] = useState("1");

    const handleClick = (e) => {
        setSights(e.target.value);
    };
    return (
        <mesh {...props}>
            <primitive object={gltf.scene} scale={1.0} />
            <Html>
              <Button onClick={()=>handleClick("2")}></Button>
            </Html>
            <GetComponents sights={sights}/>
        </mesh>
    )
}

But the problem is that this will reload the whole model, so I would like to ask if it is possible to update the components without reloading the whole model. For example, when I click on the button, only the components are reloaded.

Thanks for all the help.

CodyJasonBennett · 2023-06-11T06:33:00Z

CodyJasonBennett
Jun 11, 2023
Maintainer

I'd see https://github.com/pmndrs/gltfjsx, it lets you get granular control over the structure of your models and make them immutable.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Change Model Mesh with only Part Loading #2880

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Change Model Mesh with only Part Loading #2880

Uh oh!

yinxiangshi Jun 11, 2023

Replies: 1 comment

Uh oh!

CodyJasonBennett Jun 11, 2023 Maintainer

yinxiangshi
Jun 11, 2023

CodyJasonBennett
Jun 11, 2023
Maintainer