[Question] Replacing or removing geometry/material of a mesh.

[srcnalt]

Hi, I am rather new to typescript/react and having difficulty with making things work 😄

I am trying to construct a 3D model with multiple replaceable parts as components. In debugger I can see messages that the values changed but cant observe any visual changes or errors.

My code is pretty much like this and I expect the sub model to change upon clicking the buttons.

import THREE, { BufferGeometry, MeshStandardMaterial } from 'three'
import { useMemo, useEffect, useState, Suspense } from 'react'
import { useLoader, Canvas } from 'react-three-fiber'

let GLTFLoader: any

export function SubModel(props: any) {
  const gltf: any = useLoader(GLTFLoader, props.url)

  const geo: BufferGeometry = useMemo(() => gltf.__$[1].geometry, [])
  const mat: MeshStandardMaterial = useMemo(() => gltf.__$[1].material, [])

  return (
    <mesh>
      <bufferGeometry attach="geometry" {...geo} />
      <meshStandardMaterial attach="material" {...mat} />
    </mesh>
  )
}

export function MainModel(props: any) {
  const gltf: any = useLoader(GLTFLoader, props.url)

  const geo: BufferGeometry = useMemo(() => gltf.__$[1].geometry, [])
  const mat: MeshStandardMaterial = useMemo(() => gltf.__$[1].material, [])

  const texture = useLoader(THREE.TextureLoader, props.texture)

  return (
    <group>
      <scene name="Scene">
        <mesh>
          <bufferGeometry attach="geometry" {...geo} />
          <meshStandardMaterial attach="material" {...mat} map={texture} />
        </mesh>
        <SubModel url={props.url} />
      </scene>
    </group>
  )
}

export default function ModelViewPage(props: any) {
  useEffect(() => {
    GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader').GLTFLoader
  }, [])

  let [sub_model_url, ChangeSubModel] = useState(props.sub_model_url)

  return (
    <>
      <Canvas camera={{ position: [0, 0, -0.4] }}>
        <ambientLight intensity={0.5} />
        <pointLight position={[20, 20, -20]} />
        <Suspense fallback={null}>
          <MainModel texture={props.data.texture} url={sub_model_url} />
        </Suspense>
      </Canvas>
      <button onClick={() => ChangeSubModel(`assets/submodel_1.gltf`)}>Sub Model 1</button>
      <br />
      <button onClick={() => ChangeSubModel(`assets/submodel_2.gltf`)}>Sub Model 2</button>
    </>
  )
}

[drcmda]

the way you import the gltf loader is very strange. this is how it should be:

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"

check out this tool https://github.com/react-spring/gltfjsx it extracts the model graph, if you have that it's easy to exchange materials, colors, etc

[srcnalt]

I am using typescript and import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader" did not work for me. This was the only was I was able to get the loader work.

And I will need to load the models on the fly, they all same structure. So far what I do works for the first model I load but then I cannot replace/change meshes and materials. That is the problem I need help with.

[srcnalt]

Also incase I get help with that importing GLTFLoader in typescript Nextjs project with the line above gives this error message:

SyntaxError: Cannot use import statement outside a module

Edit: Made this work, loading the component which had import in it later. If it's in the main page you load it fails. If component is loaded later it works.

[drcmda]

On the next repo there are solutions to this. It happens because gltfloader has import statements. Next has something that makes it work

[drcmda]

you probably didnt do dispose={null} r3f will otherwise dispose geometry/materials on unmount. if you happen to come back to it the data is destroyed. useLoader is cached. if you switch off disposal it will not touch it.

  return (
    <group>
      <scene name="Scene" dispose={null}>

btw, the $__ stuff is outdated, better use gltfjsx again, it will use nodes and materials instead. next version $__ will be removed.

[srcnalt]

Thank you for the tips. dispose={null} on scene component did not really help but I tried this and seems to work now. Just assigning different keys to the sub-model component to force unmounting the component.
https://stackoverflow.com/questions/52260258/reactjs-destroy-old-component-instance-and-create-new/52260535#52260535

[drcmda]

doesnt seem right, keying stuff just like that - there's an underlying bug. if you have a reduced codesandbox i could point you to it

[srcnalt]

I will prepare one first thing tomorrow 👍

[PascalPixel]

You're looking for

import dynamic from "next/dynamic";
dynamic(() => import("./file.gltf"));

in nextjs