@threlte/gltf 1.0.0-next.2 → 1.0.0-next.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @threlte/gltf
 
+## 1.0.0-next.4
+
+### Patch Changes
+
+- 16e75c31: Fixed a bug where the suspense was created in the wrong place when preloading was activated.
+
+## 1.0.0-next.3
+
+### 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.
+
 ## 1.0.0-next.2
 
 ### Patch Changes

package/cli.js

@@ -1,11 +1,10 @@
 #!/usr/bin/env node
 'use strict'
 import meow from 'meow'
-import path from 'path'
-import { fileURLToPath } from 'url'
 import { dirname } from 'path'
-import gltf from './src/index.js'
 import { readPackageUpSync } from 'read-pkg-up'
+import { fileURLToPath } from 'url'
+import gltf from './src/index.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
@@ -26,6 +25,7 @@ const cli = meow(
     --precision, -p     Number of fractional digits (default: 2)
     --draco, -d         Draco binary path
     --preload -P        Add preload method to module script
+    --suspense -u       Make the component suspense-ready
     --isolated, -i      Output as isolated module (No $$restProps usage)
     --root, -r          Sets directory from which .gltf file is served
     --transform, -T     Transform the asset for the web (draco, prune, resize)
@@ -49,6 +49,7 @@ const cli = meow(
       precision: { type: 'number', alias: 'p', default: 2 },
       isolated: { type: 'boolean', alias: 'i', default: false },
       preload: { type: 'boolean', alias: 'P', default: false },
+      suspense: { type: 'boolean', alias: 'u', default: false },
       draco: { type: 'string', alias: 'd' },
       root: { type: 'string', alias: 'r' },
       transform: { type: 'boolean', alias: 'T' },
@@ -90,7 +91,7 @@ Command: npx @threlte/gltf@${packageJson.version} ${process.argv.slice(2).join('
     console.info('log:', log)
   }
   try {
-    const response = await gltf(file, output, baseName, {
+    const response = await gltf(file, output, {
       ...config,
       showLog,
       timeout: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/gltf",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.4",
   "description": "GLTF to Threlte converter",
   "type": "module",
   "keywords": [
@@ -43,7 +43,8 @@
     "prettier-plugin-svelte": "^2.9.0",
     "sharp": "^0.31.3",
     "svelte": "^3.55.1",
-    "three": "0.122.0"
+    "three": "0.151.3",
+    "three-stdlib": "^2.21.8"
   },
   "devDependencies": {
     "chalk": "^4.1.1",

package/readme.md

@@ -27,16 +27,19 @@ Options
   --keepnames, -k     Keep original names
   --keepgroups, -K    Keep (empty) groups, disable pruning
   --meta, -m          Include metadata (as userData)
-  --shadows, s        Let meshes cast and receive shadows
-  --printwidth, w     Prettier printWidth (default: 120)
+  --shadows, -s       Let meshes cast and receive shadows
+  --printwidth, -w    Prettier printWidth (default: 120)
   --precision, -p     Number of fractional digits (default: 2)
   --draco, -d         Draco binary path
+  --preload -P        Add preload method to module script
+  --suspense -u       Make the component suspense-ready
+  --isolated, -i      Output as isolated module (No $$restProps usage)
   --root, -r          Sets directory from which .gltf file is served
   --transform, -T     Transform the asset for the web (draco, prune, resize)
     --resolution, -R  Transform resolution for texture resizing (default: 1024)
     --simplify, -S    Transform simplification (default: false) (experimental!)
       --weld          Weld tolerance (default: 0.0001)
-      --ratio         Simplifier ratio (default: 0.075)
+      --ratio         Simplifier ratio (default: 0.75)
       --error         Simplifier error threshold (default: 0.001)
   --debug, -D         Debug output
 ```
@@ -217,7 +220,7 @@ If you want to play an animation you can do so at any time:
 
 ```ts
 const onEvent = () => {
-	$actions.jump.play()
+  $actions.jump.play()
 }
 ```
 

package/src/index.js

@@ -2,18 +2,17 @@ import 'jsdom-global'
 import fs from 'fs'
 import path from 'path'
 import transform from './utils/transform.js'
-
+import { GLTFLoader, DRACOLoader } from 'three-stdlib'
 import * as prettier from 'prettier'
-import THREE from 'three'
+import * as THREE from 'three'
 global.THREE = THREE
 
-import './bin/GLTFLoader.js'
-import DracoLoader from './bin/DRACOLoader.js'
-THREE.DRACOLoader.getDecoderModule = () => {}
 import parse from './utils/parser.js'
 
-const gltfLoader = new THREE.GLTFLoader()
-gltfLoader.setDRACOLoader(new DracoLoader())
+const gltfLoader = new GLTFLoader()
+const dracoloader = new DRACOLoader()
+dracoloader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/')
+gltfLoader.setDRACOLoader(dracoloader)
 
 function toArrayBuffer(buf) {
   var ab = new ArrayBuffer(buf.length)
@@ -22,7 +21,7 @@ function toArrayBuffer(buf) {
   return ab
 }
 
-export default function (file, output, baseName, options) {
+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)
@@ -53,7 +52,7 @@ export default function (file, output, baseName, options) {
           arrayBuffer,
           '',
           (gltf) => {
-            const raw = parse(filePath, baseName, gltf, options)
+            const raw = parse(filePath, gltf, options)
             try {
               const prettiered = prettier.format(raw, {
                 semi: false,

package/src/utils/parser.js

@@ -1,7 +1,7 @@
-import THREE from 'three'
+import * as THREE from 'three'
 import isVarName from './isVarName.js'
 
-function parse(fileName, baseName, gltf, options = {}) {
+function parse(fileName, gltf, options = {}) {
   const url = (fileName.toLowerCase().startsWith('http') ? '' : '/') + fileName
   const animations = gltf.animations
   const hasAnimations = animations.length > 0
@@ -183,7 +183,11 @@ function parse(fileName, baseName, gltf, options = {}) {
       result += `position={[${rNbr(obj.position.x)}, ${rNbr(obj.position.y)}, ${rNbr(
         obj.position.z
       )},]} `
-    if (obj.rotation && obj.rotation.isEuler && rNbr(obj.rotation.toVector3().length()))
+    if (
+      obj.rotation &&
+      obj.rotation.isEuler &&
+      rNbr(new THREE.Vector3(...obj.rotation.toArray()).length())
+    )
       result += `rotation={[${rDeg(obj.rotation.x)}, ${rDeg(obj.rotation.y)}, ${rDeg(
         obj.rotation.z
       )},]} `
@@ -473,15 +477,23 @@ function parse(fileName, baseName, gltf, options = {}) {
         import { ${[
           'T',
           options.types && !options.isolated ? 'type Props, type Events, type Slots' : ''
-        ].join(', ')} } from '@threlte/core'
-        import { ${['useGltf', hasAnimations ? 'useGltfAnimations' : ''].join(
-          ', '
-        )} } from '@threlte/extras'
+        ]
+          .filter(Boolean)
+          .join(', ')} } from '@threlte/core'
+        import { ${[
+          'useGltf',
+          hasAnimations ? 'useGltfAnimations' : '',
+          options.suspense ? 'useSuspense' : ''
+        ]
+          .filter(Boolean)
+          .join(', ')} } from '@threlte/extras'
 	`
 
-  const useGltf = `useGltf${options.types ? '<GLTFResult>' : ''}('${url}'${
-    useGltfOptions ? `, ${JSON.stringify(useGltfOptions)}` : ''
-  })`
+  const useGltf = `${options.suspense ? 'suspend(' : ''}useGltf${
+    options.types ? '<GLTFResult>' : ''
+  }('${url}'${useGltfOptions ? `, ${JSON.stringify(useGltfOptions)}` : ''})${
+    options.suspense ? ')' : ''
+  }`
 
   // Output
   return `
@@ -503,10 +515,11 @@ ${
 	${options.types ? printThrelteTypes(objects, animations) : ''}
 
 	const load = () => {
+		${options.suspend ? 'const suspend = useSuspense()' : ''}
 		return ${useGltf}
 	}
 
-	export const preload${baseName} = async () => {
+	export const preload = async () => {
 		await load()
 	}
 </script>
@@ -525,6 +538,8 @@ ${
 
         export const ref = new Group()
 
+				${!options.preload && options.suspense ? 'const suspend = useSuspense()' : ''}
+
         ${options.types && !options.preload ? printThrelteTypes(objects, animations) : ''}
 
         ${!options.preload ? `const gltf = ${useGltf}` : 'const gltf = load()'}
@@ -538,13 +553,13 @@ ${
 
     </script>
 
-    {#if $gltf}
-			<T is={ref} dispose={false} ${!options.isolated ? '{...$$restProps}' : ''}>
+		<T is={ref} dispose={false} ${!options.isolated ? '{...$$restProps}' : ''}>
+    	{#if $gltf}
         ${scene}
+			{/if}
 
-        <slot {ref} />
-			</T>
-		{/if}
+			<slot {ref} />
+		</T>
 	`
 }
 

package/src/bin/DRACOLoader.js

@@ -1,208 +0,0 @@
-'use strict'
-import THREE from 'three'
-import draco from 'draco3dgltf'
-const decoder = draco.createDecoderModule()
-const DRACOLoader = (THREE.DRACOLoader = function (t) {
-  ;(this.timeLoaded = 0),
-    (this.manager = t || THREE.DefaultLoadingManager),
-    (this.materials = null),
-    (this.verbosity = 0),
-    (this.attributeOptions = {}),
-    (this.drawMode = THREE.TrianglesDrawMode),
-    (this.nativeAttributeMap = { position: 'POSITION', normal: 'NORMAL', color: 'COLOR', uv: 'TEX_COORD' })
-})
-
-export default DRACOLoader
-
-THREE.DRACOLoader.prototype = {
-  constructor: THREE.DRACOLoader,
-  load: function (t, e, r, o) {
-    var i = this,
-      n = new THREE.FileLoader(i.manager)
-    n.setPath(this.path),
-      n.setResponseType('arraybuffer'),
-      n.load(
-        t,
-        function (t) {
-          i.decodeDracoFile(t, e)
-        },
-        r,
-        o
-      )
-  },
-  setPath: function (t) {
-    return (this.path = t), this
-  },
-  setVerbosity: function (t) {
-    return (this.verbosity = t), this
-  },
-  setDrawMode: function (t) {
-    return (this.drawMode = t), this
-  },
-  setSkipDequantization: function (t, e) {
-    var r = !0
-    return void 0 !== e && (r = e), (this.getAttributeOptions(t).skipDequantization = r), this
-  },
-  decodeDracoFile: function (t, e, r, o) {
-    decoder.then((decoder) => this.decodeDracoFileInternal(t, decoder, e, r, o))
-  },
-  decodeDracoFileInternal: function (t, e, r, o, i) {
-    var n = new e.DecoderBuffer()
-    n.Init(new Int8Array(t), t.byteLength)
-    var a = new e.Decoder(),
-      s = a.GetEncodedGeometryType(n)
-    if (s == e.TRIANGULAR_MESH) this.verbosity > 0 && console.log('Loaded a mesh.')
-    else {
-      if (s != e.POINT_CLOUD) {
-        var u = 'THREE.DRACOLoader: Unknown geometry type.'
-        //throw (console.error(u), new Error(u))
-      }
-      this.verbosity > 0 && console.log('Loaded a point cloud.')
-    }
-    r(this.convertDracoGeometryTo3JS(e, a, s, n, o, i))
-  },
-  addAttributeToGeometry: function (t, e, r, o, i, n, a, s) {
-    if (0 === n.ptr) {
-      var u = 'THREE.DRACOLoader: No attribute ' + o
-      throw (console.error(u), new Error(u))
-    }
-    var d,
-      A,
-      c = n.num_components(),
-      l = r.num_points() * c
-    switch (i) {
-      case Float32Array:
-        ;(d = new t.DracoFloat32Array()),
-          e.GetAttributeFloatForAllPoints(r, n, d),
-          (s[o] = new Float32Array(l)),
-          (A = THREE.Float32BufferAttribute)
-        break
-      case Int8Array:
-        ;(d = new t.DracoInt8Array()),
-          e.GetAttributeInt8ForAllPoints(r, n, d),
-          (s[o] = new Int8Array(l)),
-          (A = THREE.Int8BufferAttribute)
-        break
-      case Int16Array:
-        ;(d = new t.DracoInt16Array()),
-          e.GetAttributeInt16ForAllPoints(r, n, d),
-          (s[o] = new Int16Array(l)),
-          (A = THREE.Int16BufferAttribute)
-        break
-      case Int32Array:
-        ;(d = new t.DracoInt32Array()),
-          e.GetAttributeInt32ForAllPoints(r, n, d),
-          (s[o] = new Int32Array(l)),
-          (A = THREE.Int32BufferAttribute)
-        break
-      case Uint8Array:
-        ;(d = new t.DracoUInt8Array()),
-          e.GetAttributeUInt8ForAllPoints(r, n, d),
-          (s[o] = new Uint8Array(l)),
-          (A = THREE.Uint8BufferAttribute)
-        break
-      case Uint16Array:
-        ;(d = new t.DracoUInt16Array()),
-          e.GetAttributeUInt16ForAllPoints(r, n, d),
-          (s[o] = new Uint16Array(l)),
-          (A = THREE.Uint16BufferAttribute)
-        break
-      case Uint32Array:
-        ;(d = new t.DracoUInt32Array()),
-          e.GetAttributeUInt32ForAllPoints(r, n, d),
-          (s[o] = new Uint32Array(l)),
-          (A = THREE.Uint32BufferAttribute)
-        break
-      default:
-        u = 'THREE.DRACOLoader: Unexpected attribute type.'
-        throw (console.error(u), new Error(u))
-    }
-    for (var b = 0; b < l; b++) s[o][b] = d.GetValue(b)
-    a.setAttribute(o, new A(s[o], c)), t.destroy(d)
-  },
-  convertDracoGeometryTo3JS: function (t, e, r, o, i, n) {
-    var a, s, u
-    if (
-      (!0 === this.getAttributeOptions('position').skipDequantization && e.SkipAttributeTransform(t.POSITION),
-      r === t.TRIANGULAR_MESH
-        ? ((a = new t.Mesh()), (s = e.DecodeBufferToMesh(o, a)))
-        : ((a = new t.PointCloud()), (s = e.DecodeBufferToPointCloud(o, a))),
-      !s.ok() || 0 == a.ptr)
-    ) {
-      return new THREE.BufferGeometry()
-      var d = 'THREE.DRACOLoader: Decoding failed: '
-      throw ((d += s.error_msg()), console.error(d), t.destroy(e), t.destroy(a), new Error(d))
-    }
-    t.destroy(o),
-      r == t.TRIANGULAR_MESH
-        ? ((u = a.num_faces()), this.verbosity > 0 && console.log('Number of faces loaded: ' + u.toString()))
-        : (u = 0)
-    var A = a.num_points(),
-      c = a.num_attributes()
-    this.verbosity > 0 &&
-      (console.log('Number of points loaded: ' + A.toString()),
-      console.log('Number of attributes loaded: ' + c.toString()))
-    var l = e.GetAttributeId(a, t.POSITION)
-    if (-1 == l) {
-      d = 'THREE.DRACOLoader: No position attribute found.'
-      throw (console.error(d), t.destroy(e), t.destroy(a), new Error(d))
-    }
-    var b = e.GetAttribute(a, l),
-      f = {},
-      y = new THREE.BufferGeometry()
-    if (i)
-      for (var E in i) {
-        var h = n[E],
-          w = i[E],
-          p = e.GetAttributeByUniqueId(a, w)
-        //this.addAttributeToGeometry(t, e, a, E, h, p, y, f)
-      }
-    else
-      for (var E in this.nativeAttributeMap) {
-        var T = e.GetAttributeId(a, t[this.nativeAttributeMap[E]])
-        if (-1 !== T) {
-          this.verbosity > 0 && console.log('Loaded ' + E + ' attribute.')
-          p = e.GetAttribute(a, T)
-          //this.addAttributeToGeometry(t, e, a, E, Float32Array, p, y, f)
-        }
-      }
-    if (r == t.TRIANGULAR_MESH)
-      if (this.drawMode === THREE.TriangleStripDrawMode) {
-        var R = new t.DracoInt32Array()
-        e.GetTriangleStripsFromMesh(a, R)
-        f.indices = new Uint32Array(R.size())
-        for (var I = 0; I < R.size(); ++I) f.indices[I] = R.GetValue(I)
-        t.destroy(R)
-      } else {
-        var v = 3 * u
-        f.indices = new Uint32Array(v)
-        var D = new t.DracoInt32Array()
-        for (I = 0; I < u; ++I) {
-          e.GetFaceFromMesh(a, I, D)
-          var m = 3 * I
-          ;(f.indices[m] = D.GetValue(0)), (f.indices[m + 1] = D.GetValue(1)), (f.indices[m + 2] = D.GetValue(2))
-        }
-        t.destroy(D)
-      }
-    ;(y.drawMode = this.drawMode),
-      r == t.TRIANGULAR_MESH &&
-        y.setIndex(
-          new (f.indices.length > 65535 ? THREE.Uint32BufferAttribute : THREE.Uint16BufferAttribute)(f.indices, 1)
-        )
-    var G = new t.AttributeQuantizationTransform()
-    if (G.InitFromAttribute(b)) {
-      ;(y.attributes.position.isQuantized = !0),
-        (y.attributes.position.maxRange = G.range()),
-        (y.attributes.position.numQuantizationBits = G.quantization_bits()),
-        (y.attributes.position.minValues = new Float32Array(3))
-      for (I = 0; I < 3; ++I) y.attributes.position.minValues[I] = G.min_value(I)
-    }
-    return t.destroy(G), t.destroy(e), t.destroy(a), y
-  },
-  isVersionSupported: function (t, e) {
-    e(decoder.isVersionSupported(t))
-  },
-  getAttributeOptions: function (t) {
-    return void 0 === this.attributeOptions[t] && (this.attributeOptions[t] = {}), this.attributeOptions[t]
-  },
-}