How to render MMD Model?

[chocoshop]

How can I render MMD Model?
I'm trying to render MMD Model like this

function LoadModel({url}) {
        const [nodes, setNodes] = useState();
        useMemo(() => new MMDLoader().load(url, setNodes), [url]);
        return nodes ? <primitive object={nodes} /> : null;
    }

const MmdModel = () => {
        return(
            <Suspense fallback={null}>
                <LoadModel url="PATH_TO_PMX_FILE" />
            </Suspense>
        )
    }

return (
    <Canvas>
        <MmdModel />
    </Canvas>
 )

But this is not working
・error message
THREE.WebGLProgram: shader error: 1281 35715 false gl.getProgramInfoLog invalid shaders THREE.WebGLShader: gl.getShaderInfoLog() vertex

[drcmda]

If you do it like this suspense makes no sense, it does nothing. But it's almost correct, useMemo should be a useEffect.

function MmdModel({ url }) {
  const [nodes, set] = useState()
  useEffect(() => void new MMDLoader().load(url, set), [url])
  return nodes ? <primitive object={nodes} dispose={null} /> : null
}

<Canvas>
  <MmdModel url="PATH_TO_PMX_FILE"/>
</Canvas>

Not that this solves your issue, it's probably a wrong path or the file is broken. the path either has to be "/file.pmx" if it's located in /public, or, if it's withing /src you have to import fileUrl from "./file.pmx" to get a hashed url.

I would suggest suspense + useLoader,

function MmdModel({ url }) {
  const nodes = useLoader(MMDLoader, url)
  return <primitive object={nodes} dispose={null} />
}

<Canvas>
  <Suspense fallback={null}>
    <MmdModel url="PATH_TO_PMX_FILE"/>
  </Suspense>
</Canvas>

but as I said, your problem is something else.

btw, it looks like you are creating component functions inside a component:

function App() {
  function LoadModel({url}) { ... }
  const MmdModel = () => ...
  return (

this is an anti pattern: https://twitter.com/0xca0a/status/1269562072725098501 if that's the case it could even be the reason why you run into issues, because that pattern unmounts/remounts the components on every single render. unmount in r3f disposes objects (as in, it destroys geometries and materials, hence the dispose={null}).

[chocoshop]

Thank you so much for your help.
The problem was maybe pmx file...
It worked when I used different pmx file.
And I rewrote with "suspense" and "useLoader".

btw, it looks like you are creating component functions inside a component:

I fixed here too.

Finally my code is like:

const MmdModel = ({ url }) => {
    const nodes = useLoader(MMDLoader, url);
    return <primitive object={nodes} dispose={null} scale={[0.25 ,0.25, 0.25]} position={[0, -3, 0]} />;
}

<Canvas>
    <Sky distance={450000} sunPosition={[1, 1, 1]} />
    <ambientLight intensity={0.4} />
    <spotLight position={[0, -1, -1]} intensity={0.4} />
    
    <Suspense fallback={null}>
        <MmdModel url="./Alicia_solid.pmx" />
    </Suspense>
    <OrbitControls />
</Canvas>

I recently started using r3f but i think that it is very nice library and I want to learn more.
(I'm sorry my first question was lucking of infomation about my problem..)