reactjsthree.jsreact-three-fiber

Load models from remote URL with ThreeJS/FIber


I've started learning Threejs and I was wondering if it is possible to load 3d models using a remote URL, when I was reading drei's documentation, I noticed a URL parameter though the storybook seems to load the 3d model from a local resource and I haven't found an example which uses a remote resource.

It defaults to CDN loaded draco binaries (https://www.gstatic.com/draco/v1/decoders/) which are only loaded for compressed models.

Ideally I would like to include a URL to a 3d model in a JSON field for an object I would like to rendering my react application.


Solution

  • I uploaded my model into an AWS bucket and enabled CORS, I was scared alot of config would have been needed, but this seems to work fine:

    function Model(props: any) {
      const { scene } = useGLTF(
        "https://s3.amazonaws.com/model.foo/bar.glb"
      );
      return <primitive object={scene} {...props} />;
    }