@needle-tools/gltf-progressive
TypeScript icon, indicating that this package has built-in type declarations

1.2.1-alpha.3 • Public • Published

glTF progressive

Support for loading of glTF or GLB files with progressive mesh or texture data for three.js based engines.

Features

  • Automatic loading of mesh and texture LODs.
  • High quality LOD levels are loaded on demand based on screen density.
  • Use low-poly LOD meshes for raycasting which allows the usage of high-poly meshes with smooth interaction
  • Use cloud.needle.tools for processing glTF, GLB & VRM assets

Examples

Examples are in the /examples directory. Live versions can be found in the links below.

Interactive Examples: Stackblitz ⚡️


Usage

react three fiber

Full example in examples/react-three-fiber

function ChurchModel() {
  const { gl } = useThree()
  const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
  const { scene } = useGLTF(url, false, false, (loader) => {
    useNeedleProgressive(url, gl, loader as any)
  })
  return <primitive object={scene} />
}

threejs (CDN, no bundler)

The full example can be found at examples/threejs

<head>
    <!-- Add the threejs import map to your HTML head section -->
    <script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
            "three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
            "@needle-engine/gltf-progressive": "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
        }
    }
    </script>
</head>

In your script:

const gltfLoader = new GLTFLoader();

const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";

// register the progressive loader
useNeedleProgressive(url, renderer, gltfLoader)

// just call the load method as usual
gltfLoader.load(url, gltf => {
    console.log(gltf)
    scene.add(gltf.scene)
    gltf.scene.position.y += .95;
})

<model-viewer>

The example can be found in examples/modelviewer.html

<head>
    <!-- Include threejs import map -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three/build/three.module.js",
                "three/": "https://unpkg.com/three/"
            }
        }
    </script>
    <!-- Include gltf-progressive -->
    <script type="module" src="https://www.unpkg.com/@needle-tools/gltf-progressive@latest"></script>
    <!-- Include model-viewer -->
    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
</head>
<body>

    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" camera-controls auto-rotate></model-viewer>
    
</body>

Needle Engine

Needle Engine natively supports progressive loading of these glTF files! See docs.needle.tools for more information.

Contact ✒️

🌵 needle — tools for creatorsTwitterDiscordForum

Package Sidebar

Install

npm i @needle-tools/gltf-progressive

Homepage

needle.tools

Weekly Downloads

779

Version

1.2.1-alpha.3

License

none

Unpacked Size

343 kB

Total Files

34

Last publish

Collaborators

  • marwi123
  • herbst