@threlte/gltf 1.0.0-next.8 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @threlte/gltf
 
+## 1.0.0
+
+### Major Changes
+
+- a07850e4: Removed the name from the exported preload function (seems silly and might collide anyway), updated deps and included three-stdlib instead of rolling an own implementation of GLTFLoader and DRACOLoader. Added option to make the component suspense-ready, updated README.
+- 3a5376e2: Adapted gltf package to Threlte 6 T syntax
+- d5abde5: Simplified root option to more reasonable approach. When no root is given, the path supplied will be normalized and used as a file path, if root is given, takes full control.
+
+### Minor Changes
+
+- e91cc09: await instead of if clause for less if-blocks (helps with transitions)
+- 72c71414: Added option to add a preload method that makes preloading an asset easy. Also, added the option to make an isolated component (so no \$\$restProps usage)
+- 05d9170: Added forwarding event handlers
+
+### Patch Changes
+
+- 6d56d11: Added proper types for new slots error & fallback
+- 119a04d: Downgrading three and reusing own GLTFLoader and DRACOLoader implementations
+- 89e0c7a: Updated dependencies
+- 16e75c31: Fixed a bug where the suspense was created in the wrong place when preloading was activated.
+- da70d570: typo
+- 81834dd4: Refactored the pascal case function
+- 124eabab: Fixed preload method to return a Promise
+- 89710f3: Removed logs
+
+## 1.0.0-next.13
+
+### Major Changes
+
+- d5abde5: Simplified root option to more reasonable approach. When no root is given, the path supplied will be normalized and used as a file path, if root is given, takes full control.
+
+## 1.0.0-next.12
+
+### Patch Changes
+
+- 6d56d11c: Added proper types for new slots error & fallback
+
+## 1.0.0-next.11
+
+### Minor Changes
+
+- e91cc094: await instead of if clause for less if-blocks (helps with transitions)
+
+## 1.0.0-next.10
+
+### Minor Changes
+
+- 05d91701: Added forwarding event handlers
+
+## 1.0.0-next.9
+
+### Patch Changes
+
+- 89710f3e: Removed logs
+
 ## 1.0.0-next.8
 
 ### Patch Changes

package/{readme.md → README.md}

@@ -1,6 +1,39 @@
-A small command-line tool that turns GLTF assets into declarative and re-usable [Threlte](https://threlte.xyz) components.
+<div align="right">
+ <a href="https://www.npmjs.com/package/@threlte/gltf">
+  <img alt="npm" src="https://img.shields.io/npm/v/@threlte/gltf?color=fe4100&labelColor=171d27&logo=npm&logoColor=white"/>
+ </a>
+ <a href="https://github.com/threlte/threlte/blob/main/LICENSE.md">
+  <img alt="license" src="https://img.shields.io/npm/l/@threlte/core?color=fe4100&labelColor=171d27&logo=git&logoColor=white"/>
+ </a>
+ <a href="https://discord.com/channels/985983540804091964">
+  <img alt="discord" src="https://img.shields.io/discord/985983540804091964?label=discord&color=fe4100&labelColor=171d27&logo=discord&logoColor=white"/>
+ </a>
+ <a href="https://threlte.xyz">
+  <img alt="docs" src="https://img.shields.io/website?down_color=red&down_message=offline&label=docs&color=fe4100&labelColor=171d27&up_message=online&url=https%3A%2F%2Fthrelte.xyz&logo=svelte&logoColor=white"/>
+ </a>
+</div>
 
-### The GLTF workflow on the web is not ideal ...
+<a href="https://threlte.xyz">
+ <img src="./threlte-banner.jpg"/>
+</a>
+
+## Rapidly Build Interactive 3D Apps for the Web
+
+Threlte is a [Svelte](https://svelte.dev/) library that simplifies creating 3D apps for the web. It provides a **declarative**, **type-safe**, **reactive** and **interactive** API out-of-the-box.
+
+Threlte's **3D rendering** is powered by [Three.js](https://threejs.org/), and it also provides a **physics engine** through [Rapier](https://rapier.rs/) and an **animation studio** via [Theatre.js](https://www.theatrejs.com/); see [packages](#packages) for details.
+
+Check out our **[documentation](https://threlte.xyz)** and our **[Discord community](https://discord.gg/EqUBCfCaGm)**.
+
+## @threlte/gltf
+
+[@threlte/gltf](https://threlte.xyz/docs/reference/gltf/getting-started) gives you a CLI to that turn GLTF assets into declarative and reusable Threlte components.
+
+This helps with performance optimization for asset-heavy Threlte apps. It also allows you to modify your GLTF assets as Svelte components, instead of working with 3D software like Blender.
+
+### Motivation
+
+#### The GLTF workflow on the web is not ideal ...
 
 - GLTF is thrown wholesale into the scene which prevents re-use, in threejs objects can only be mounted once
 - Contents can only be found by traversal which is cumbersome and slow
@@ -9,7 +42,7 @@ A small command-line tool that turns GLTF assets into declarative and re-usable
 - Model compression is complex and not easily achieved
 - Models often have unnecessary nodes that cause extra work and matrix updates
 
-### @threlte/gltf fixes that
+#### @threlte/gltf fixes that
 
 - 🧑‍💻 It creates a virtual graph of all objects and materials. Now you can easily alter contents and re-use.
 - 🏎️ The graph gets pruned (empty groups, unnecessary transforms, ...) and will perform better.
@@ -44,6 +77,18 @@ Options
   --debug, -D         Debug output
 ```
 
+### Requirements
+
+- NodeJS must be installed
+- The GLTF file has to be present in your projects `/public` folder
+- [three](https://github.com/mrdoob/three.js/) (>= 122.x)
+- @threlte/core > 5.0.0
+- @threlte/core > 4.9.3
+
+### Support
+
+Have questions? Feel free to ask in our [Discord support forum](https://discord.com/channels/985983540804091964/1031843197963477002).
+
 ### A typical use-case
 
 First you run your model through `@threlte/gltf`. `npx` allows you to use npm packages without installing them.
@@ -240,14 +285,20 @@ gltfLoader.load(url, (gltf) => {
 })
 ```
 
-## Requirements
 
-- Nodejs must be installed
-- The GLTF file has to be present in your projects `/public` folder
-- [three](https://github.com/mrdoob/three.js/) (>= 122.x)
-- @threlte/core > 5.0.0
-- @threlte/core > 4.9.3
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+- **Filing Issues** - if you have feature requestions or you think you spotted a bug, [submit an issue](https://github.com/threlte/threlte/issues/new).
+- **Contributing Code** - if you would like to drop us a PR, read the [contribution guide](https://github.com/threlte/threlte/blob/main/CONTRIBUTING.md) first.
+
+## Sponsors
+
+[![Powered by Vercel](./assets/vercel/powered-by-vercel.svg)](https://vercel.com/?utm_source=threlte&utm_campaign=oss)
+
+---
 
-## Credits
+### License
 
-This tool started off as a fork of [gltfjsx](https://github.com/pmndrs/gltfjsx) by [pmndrs](https://pmnd.rs/).
+The MIT License (MIT). Please see the [License File](LICENSE.md) for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/gltf",
-  "version": "1.0.0-next.8",
+  "version": "1.0.0",
   "description": "GLTF to Threlte converter",
   "type": "module",
   "keywords": [
@@ -52,7 +52,8 @@
     "fs-extra": "^9.0.1",
     "husky": "^4.3.0",
     "lint-staged": "^10.4.0",
-    "read-pkg-up": "^9.1.0"
+    "read-pkg-up": "^9.1.0",
+    "rimraf": "^5.0.1"
   },
   "husky": {
     "hooks": {
@@ -65,6 +66,6 @@
     ]
   },
   "scripts": {
-    "cleanup": "rm -rf node_modules"
+    "cleanup": "rimraf node_modules"
   }
 }

package/src/index.js

@@ -25,12 +25,8 @@ function toArrayBuffer(buf) {
 }
 
 export default function (file, output, options) {
-  function getRelativeFilePath(file) {
-    const filePath = path.resolve(file)
-    const rootPath = options.root ? path.resolve(options.root) : path.dirname(file)
-    const relativePath = path.relative(rootPath, filePath) || ''
-    if (process.platform === 'win32') return relativePath.replace(/\\/g, '/')
-    return relativePath
+  function getFilePath(file) {
+    return `${options.root ?? '/'}${options.root ? path.basename(file) : path.normalize(file)}`
   }
 
   return new Promise((resolve, reject) => {
@@ -48,23 +44,14 @@ export default function (file, output, options) {
         }
         resolve()
 
-        const filePath = getRelativeFilePath(file)
+        const filePath = getFilePath(file)
         const data = fs.readFileSync(file)
         const arrayBuffer = toArrayBuffer(data)
-        console.log(arrayBuffer)
-
-        gltfLoader.parse(
-          arrayBuffer,
-          '',
-          (gltf) => {},
-          (error) => console.error(error)
-        )
 
         gltfLoader.parse(
           arrayBuffer,
           '',
           (gltf) => {
-            console.log('NO PARSE?')
             const raw = parse(filePath, gltf, options)
             try {
               const prettiered = prettier.format(raw, {

package/src/utils/parser.js

@@ -2,7 +2,7 @@ import THREE from 'three'
 import isVarName from './isVarName.js'
 
 function parse(fileName, gltf, options = {}) {
-  const url = (fileName.toLowerCase().startsWith('http') ? '' : '/') + fileName
+  const url = fileName
   const animations = gltf.animations
   const hasAnimations = animations.length > 0
 
@@ -149,24 +149,24 @@ function parse(fileName, gltf, options = {}) {
 
       // Write out geometry first
       if (obj.geometry) {
-        result += `geometry={$gltf.${node}.geometry} `
+        result += `geometry={gltf.${node}.geometry} `
       }
 
       // Write out materials
       if (obj.material) {
         if (obj.material.name)
-          result += `material={$gltf.materials${sanitizeName(obj.material.name)}} `
-        else result += `material={$gltf.${node}.material} `
+          result += `material={gltf.materials${sanitizeName(obj.material.name)}} `
+        else result += `material={gltf.${node}.material} `
       }
 
-      if (obj.skeleton) result += `skeleton={$gltf.${node}.skeleton} `
+      if (obj.skeleton) result += `skeleton={gltf.${node}.skeleton} `
       if (obj.visible === false) result += `visible={false} `
       if (obj.castShadow === true) result += `castShadow `
       if (obj.receiveShadow === true) result += `receiveShadow `
       if (obj.morphTargetDictionary)
-        result += `morphTargetDictionary={$gltf.${node}.morphTargetDictionary} `
+        result += `morphTargetDictionary={gltf.${node}.morphTargetDictionary} `
       if (obj.morphTargetInfluences)
-        result += `morphTargetInfluences={$gltf.${node}.morphTargetInfluences} `
+        result += `morphTargetInfluences={gltf.${node}.morphTargetInfluences} `
       if (obj.intensity && rNbr(obj.intensity)) result += `intensity={${rNbr(obj.intensity)}} `
       //if (obj.power && obj.power !== 4 * Math.PI) result += `power={${rNbr(obj.power)}} `
       if (obj.angle && obj.angle !== Math.PI / 3) result += `angle={${rDeg(obj.angle)}} `
@@ -378,7 +378,7 @@ function parse(fileName, gltf, options = {}) {
 
     // Bail out on lights and bones
     if (type === 'bone') {
-      return `<T is={$gltf.${node}} />\n`
+      return `<T is={gltf.${node}} />\n`
     }
 
     // Collect children
@@ -476,7 +476,8 @@ function parse(fileName, gltf, options = {}) {
         import { Group } from 'three'
         import { ${[
           'T',
-          options.types && !options.isolated ? 'type Props, type Events, type Slots' : ''
+          options.types && !options.isolated ? 'type Props, type Events, type Slots' : '',
+          !options.isolated && 'forwardEventHandlers'
         ]
           .filter(Boolean)
           .join(', ')} } from '@threlte/core'
@@ -534,7 +535,11 @@ ${
 
         ${options.types && !options.isolated ? 'type $$Props = Props<THREE.Group>' : ''}
         ${options.types && !options.isolated ? 'type $$Events = Events<THREE.Group>' : ''}
-        ${options.types && !options.isolated ? 'type $$Slots = Slots<THREE.Group>' : ''}
+        ${
+          options.types && !options.isolated
+            ? 'type $$Slots = Slots<THREE.Group> & { fallback: {}; error: { error: any } }'
+            : ''
+        }
 
         export const ref = new Group()
 
@@ -551,12 +556,17 @@ ${
         : ''
     }
 
+			${!options.isolated ? 'const component = forwardEventHandlers()' : ''}
     </script>
 
-		<T is={ref} dispose={false} ${!options.isolated ? '{...$$restProps}' : ''}>
-    	{#if $gltf}
-        ${scene}
-			{/if}
+		<T is={ref} dispose={false} ${!options.isolated ? '{...$$restProps} bind:this={$component}' : ''}>
+			{#await gltf}
+				<slot name="fallback" />
+			{:then gltf}
+				${scene}
+			{:catch error}
+				<slot name="error" {error} />
+			{/await}
 
 			<slot {ref} />
 		</T>