@needle-tools/gltf-progressive 2.1.5 → 2.1.6-next.8d7f3c1

package/examples/react-three-fiber/package.json

@@ -1,34 +1,34 @@
-{
-  "name": "react-typescript",
-  "version": "1.0.0",
-  "main": "src/index.tsx",
-  "dependencies": {
-    "@needle-tools/gltf-progressive": "file:../..",
-    "@react-three/drei": "^9.0.1",
-    "@react-three/fiber": "^8.0.6",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "three": "0.162.0",
-    "typescript": "4.7.4"
-  },
-  "devDependencies": {
-    "@types/react": "18.0.15",
-    "@types/react-dom": "17.0.0",
-    "@types/three": "0.162.0",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-react": "^1.3.0",
-    "typescript": "4.1.3",
-    "vite": "<= 4.3.9",
-    "vite-plugin-compression": "^0.5.1"
-  },
-  "scripts": {
-    "start": "vite --host",
-    "build": "vite build"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
+{
+  "name": "react-typescript",
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "@needle-tools/gltf-progressive": "file:../..",
+    "@react-three/drei": "^9.0.1",
+    "@react-three/fiber": "^8.0.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "three": "0.162.0",
+    "typescript": "4.7.4"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.15",
+    "@types/react-dom": "17.0.0",
+    "@types/three": "0.162.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "4.1.3",
+    "vite": "<= 4.3.9",
+    "vite-plugin-compression": "^0.5.1"
+  },
+  "scripts": {
+    "start": "vite --host",
+    "build": "vite build"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

package/examples/react-three-fiber/src/App.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+/* eslint-disable */
+import * as React from 'react'
+import { Canvas, useThree } from '@react-three/fiber'
+
+import { useNeedleProgressive } from '@needle-tools/gltf-progressive'
+import { Environment, OrbitControls, useGLTF } from '@react-three/drei'
+
+function MyModel() {
+  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} />
+}
+
+
+export default function App() {
+  return (
+    <Canvas
+      frameloop="demand"
+      camera={{ position: [25, 15, 25] }}>
+      <OrbitControls target={[0 , 10, 0]} />
+      <ambientLight intensity={1} />
+      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
+      <pointLight position={[-10, -10, -10]} />
+      <Environment
+        files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/evening_road_01_2k.hdr"
+      // ground={{ height: 5, radius: 40, scale: 10 }}
+      />
+      <MyModel />
+    </Canvas>
+  )
+}
+
+

package/examples/react-three-fiber/src/index.tsx

@@ -0,0 +1,12 @@
+//@ts-ignore
+import { createRoot } from 'react-dom/client'
+import * as React from 'react'
+import './styles.css'
+import App from './App'
+
+
+createRoot(document.getElementById('root')).render(
+    <>
+        <App />
+    </>
+)

package/examples/react-three-fiber/src/styles.css

@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #f0f0f0;
+}

package/examples/react-three-fiber/tsconfig.json

@@ -1,22 +1,22 @@
-{
-    "compilerOptions": {
-      "jsx": "react",
-      "target": "ESNext",
-      "useDefineForClassFields": true,
-      "module": "ESNext",
-      "lib": ["ESNext", "DOM"],
-      "moduleResolution": "Node",
-      "strict": true,
-      "sourceMap": true,
-      "resolveJsonModule": true,
-      "esModuleInterop": true,
-      "noEmit": true,
-      "noUnusedLocals": false,
-      "noUnusedParameters": true,
-      "noImplicitReturns": true,
-      "noImplicitAny": false,
-      "experimentalDecorators": true,
-      "skipLibCheck": true
-    },
-    "include": ["./src"]
+{
+    "compilerOptions": {
+      "jsx": "react",
+      "target": "ESNext",
+      "useDefineForClassFields": true,
+      "module": "ESNext",
+      "lib": ["ESNext", "DOM"],
+      "moduleResolution": "Node",
+      "strict": true,
+      "sourceMap": true,
+      "resolveJsonModule": true,
+      "esModuleInterop": true,
+      "noEmit": true,
+      "noUnusedLocals": false,
+      "noUnusedParameters": true,
+      "noImplicitReturns": true,
+      "noImplicitAny": false,
+      "experimentalDecorators": true,
+      "skipLibCheck": true
+    },
+    "include": ["./src"]
   }

package/examples/react-three-fiber/vite.config.js

@@ -1,39 +1,39 @@
-import * as path from 'path';
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import basicSsl from '@vitejs/plugin-basic-ssl'
-import viteCompression from 'vite-plugin-compression';
-
-export default defineConfig(async (command) => {
-
-
-    return {
-        base: "./",
-        assetsInclude: ['*'],
-
-        plugins: [
-            react(),
-            basicSsl(),
-            viteCompression({ deleteOriginFile: true }),
-        ],
-
-        server: {
-            https: true,
-            proxy: { // workaround: specifying a proxy skips HTTP2 which is currently problematic in Vite since it causes session memory timeouts.
-                'https://localhost:3000': 'https://localhost:3000'
-            },
-            strictPort: true,
-            port: 3001
-        },
-        build: {
-            outDir: "./dist",
-            emptyOutDir: true,
-        },
-        resolve: {
-            alias: {
-                'react': () => path.resolve(__dirname, 'node_modules/react'),
-                '@react-three/fiber': () => path.resolve(__dirname, 'node_modules/@react-three/fiber'),
-            }
-        }
-    }
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import basicSsl from '@vitejs/plugin-basic-ssl'
+import viteCompression from 'vite-plugin-compression';
+
+export default defineConfig(async (command) => {
+
+
+    return {
+        base: "./",
+        assetsInclude: ['*'],
+
+        plugins: [
+            react(),
+            basicSsl(),
+            viteCompression({ deleteOriginFile: true }),
+        ],
+
+        server: {
+            https: true,
+            proxy: { // workaround: specifying a proxy skips HTTP2 which is currently problematic in Vite since it causes session memory timeouts.
+                'https://localhost:3000': 'https://localhost:3000'
+            },
+            strictPort: true,
+            port: 3001
+        },
+        build: {
+            outDir: "./dist",
+            emptyOutDir: true,
+        },
+        resolve: {
+            alias: {
+                'react': () => path.resolve(__dirname, 'node_modules/react'),
+                '@react-three/fiber': () => path.resolve(__dirname, 'node_modules/@react-three/fiber'),
+            }
+        }
+    }
 });

package/examples/threejs/index.html

@@ -1,52 +1,52 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Threejs Progressive Loading</title>
-    <style>
-        body {
-            margin: 0;
-        }
-    </style>
-    <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-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
-        }
-    }
-    </script>
-</head>
-
-<body>
-    <script type="module" src="./main.js"></script>
-    <button class="show-source">Show Source</button>
-</body>
-
-
-<style>
-    .show-source {
-        position: fixed;
-        right: 1rem;
-        bottom: 1rem;
-        z-index: 100;
-        border-radius: .5rem;
-        border: none;
-        padding: .3rem .5rem;
-    }
-</style>
-<script>
-    document.addEventListener("DOMContentLoaded", () => {
-        document.querySelector('.show-source').addEventListener('click', () => {
-            const scriptSource = document.querySelector('script[type="module"]').src;
-            console.log(scriptSource);
-            window.open(scriptSource);
-        });
-    });
-</script>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Threejs Progressive Loading</title>
+    <style>
+        body {
+            margin: 0;
+        }
+    </style>
+    <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-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
+        }
+    }
+    </script>
+</head>
+
+<body>
+    <script type="module" src="./main.js"></script>
+    <button class="show-source">Show Source</button>
+</body>
+
+
+<style>
+    .show-source {
+        position: fixed;
+        right: 1rem;
+        bottom: 1rem;
+        z-index: 100;
+        border-radius: .5rem;
+        border: none;
+        padding: .3rem .5rem;
+    }
+</style>
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        document.querySelector('.show-source').addEventListener('click', () => {
+            const scriptSource = document.querySelector('script[type="module"]').src;
+            console.log(scriptSource);
+            window.open(scriptSource);
+        });
+    });
+</script>
+
 </html>