@needle-tools/gltf-progressive 1.2.0-alpha.2 → 1.2.0-alpha.3

package/CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this package will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-## [1.2.0-alpha] - 2023-06-06
+## [1.2.0-alpha.3] - 2023-06-06
 - add: automatically load the highest LOD first to show a slightly better quality level as soon as possible
 - fix: improve Texture LOD selection by taking LOD level height into account
 - fix: correctly assign LOD level information to initially loaded texture

package/README.md

@@ -2,6 +2,10 @@
 
 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
 
 
 ## Examples

package/examples/threejs/index.html

@@ -14,8 +14,7 @@
         "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"
+            "three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/"
         }
     }
     </script>

package/examples/threejs/main.js

@@ -2,7 +2,9 @@ import * as THREE from 'three';
 import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-import { useNeedleProgressive, } from "@needle-engine/gltf-progressive"
+import { useNeedleProgressive, getRaycastMesh } from "https://www.unpkg.com/@needle-tools/gltf-progressive@latest"
+import { Pane } from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/dist/tweakpane.min.js';
+
 
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x555555);
@@ -10,7 +12,7 @@ const renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 200);
 
 
 window.addEventListener('resize', () => {
@@ -20,10 +22,10 @@ window.addEventListener('resize', () => {
 });
 
 const orbit = new OrbitControls(camera, renderer.domElement);
-orbit.target = new THREE.Vector3(0, 14, 0);
-camera.position.x = 20;
-camera.position.y = 20.5;
-camera.position.z = 20.8;
+orbit.target = new THREE.Vector3(0, .5, 0);
+camera.position.x = .5;
+camera.position.y = 1.3;
+camera.position.z = 2;
 
 const grid = new THREE.GridHelper(50, 50, 0x444444, 0x666666);
 scene.add(grid);
@@ -54,23 +56,57 @@ new EXRLoader().load(environmentTextureUrl, texture => {
 
 
 
-// Integrate @needle-tools/gltf-progressive
-// This is the model we want to load
-const url = "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb";
-
-const gltfLoader = new GLTFLoader();
-
-/**
- * Call this method to register the progressive loader
- */
-useNeedleProgressive(url, renderer, gltfLoader)
+const modelUrls = [
+    "https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/robot/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb",
+    "https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb",
+]
+let currentUrl = "";
+/** @type {null | THREE.Scene} */
+let currentScene = null;
+
+function loadScene() {
+    let currentIndex = modelUrls.indexOf(currentUrl);
+    currentIndex += 1;
+    if (currentIndex >= modelUrls.length) {
+        currentIndex = 0;
+    }
+    const url = modelUrls[currentIndex];
+    currentUrl = url;
+
+
+    // Integrate @needle-tools/gltf-progressive
+    // Create a new GLTFLoader instance
+    const gltfLoader = new GLTFLoader();
+    /** Call this method to register the progressive loader */
+    useNeedleProgressive(url, renderer, gltfLoader)
+
+    // just call the load method as usual
+    gltfLoader.load(url, gltf => {
+        // we're basically just adding our glTF to the scene here
+        // the rest of the code is just for the demo
+        console.log(gltf)
+        if (currentUrl != url) return;
+        currentScene?.removeFromParent();
+        currentScene = gltf.scene;
+        scene.add(gltf.scene)
+        gltf.scene.position.y += .01;
+
+        // the church is huge - scaling it down so we don't have a big difference between the models
+        if (url.includes("church")) {
+            gltf.scene.scale.multiplyScalar(.1);
+        }
+    })
+}
+loadScene();
 
-// just call the load method as usual
-gltfLoader.load(url, gltf => {
-    console.log(gltf)
-    scene.add(gltf.scene)
-    gltf.scene.position.y += .95;
-})
 
 
+const pane = new Pane();
+const btn = pane.addButton({
+    title: 'Change Scene',
+});
 
+btn.on('click', loadScene);