diff --git a/.gitignore b/.gitignore index 9376a72..10ceb9b 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,12 @@ package-lock.json coverage/ .idea yarn-error.log + +# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/sdks +!.yarn/versions diff --git a/.npmignore b/.npmignore index 4949f09..e69de29 100644 --- a/.npmignore +++ b/.npmignore @@ -1 +0,0 @@ -example/ \ No newline at end of file diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz deleted file mode 100644 index b955093..0000000 Binary files a/.yarn/install-state.gz and /dev/null differ diff --git a/cli.js b/cli.js index 3efdc99..1be37ef 100755 --- a/cli.js +++ b/cli.js @@ -33,6 +33,7 @@ const cli = meow( --resolution, -R Resolution for texture resizing (default: 1024) --keepmeshes, -j Do not join compatible meshes --keepmaterials, -M Do not palette join materials + --keepattributes, Whether to keep unused vertex attributes, such as UVs without an assigned texture --format, -f Texture format (default: "webp") --simplify, -S Mesh simplification (default: false) --ratio Simplifier ratio (default: 0) @@ -63,6 +64,7 @@ const cli = meow( simplify: { type: 'boolean', shortFlag: 'S', default: false }, keepmeshes: { type: 'boolean', shortFlag: 'j', default: false }, keepmaterials: { type: 'boolean', shortFlag: 'M', default: false }, + keepattributes: { type: 'boolean', default: false }, format: { type: 'string', shortFlag: 'f', default: 'webp' }, exportdefault: { type: 'boolean', shortFlag: 'E' }, ratio: { type: 'number', default: 0.75 }, diff --git a/package.json b/package.json index 2beca3d..0d00517 100644 --- a/package.json +++ b/package.json @@ -99,5 +99,5 @@ "type": "opencollective", "url": "https://opencollective.com/react-three-fiber" }, - "packageManager": "yarn@4.4.0+sha256.5f228cb28f2edb97d8c3b667fb7b2fdcf06c46798e25ea889dad9e0b4bc2e2c1" + "packageManager": "yarn@4.4.1+sha512.f825273d0689cc9ead3259c14998037662f1dcd06912637b21a450e8da7cfeb4b1965bbee73d16927baa1201054126bc385c6f43ff4aa705c8631d26e12460f1" } diff --git a/readme.md b/readme.md index 731d335..722e912 100644 --- a/readme.md +++ b/readme.md @@ -1,13 +1,12 @@ -https://user-images.githubusercontent.com/2223602/126318148-99da7ed6-a578-48dd-bdd2-21056dbad003.mp4 - -
-
+# GLTFJSX [![Version](https://img.shields.io/npm/v/gltfjsx?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gltfjsx) [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ) + + A small command-line tool that turns GLTF assets into declarative and re-usable [react-three-fiber](https://github.com/pmndrs/react-three-fiber) JSX components. -### The GLTF workflow on the web is not ideal ... +## The GLTF workflow on the web is not ideal - GLTF is thrown whole 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 @@ -47,6 +46,7 @@ Options --resolution, -R Resolution for texture resizing (default: 1024) --keepmeshes, -j Do not join compatible meshes --keepmaterials, -M Do not palette join materials + --keepattributes, Whether to keep unused vertex attributes, such as UVs without an assigned texture (default: false) --format, -f Texture format (default: "webp") --simplify, -S Mesh simplification (default: false) --ratio Simplifier ratio (default: 0) @@ -147,11 +147,11 @@ Add events: ## Features -#### ⚡️ Draco and meshopt compression ootb +### ⚡️ Draco and meshopt compression ootb You don't need to do anything if your models are draco compressed, since `useGLTF` defaults to a [draco CDN](https://www.gstatic.com/draco/v1/decoders/). By adding the `--draco` flag you can refer to [local binaries](https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco/gltf) which must reside in your /public folder. -#### ⚡️ Preload your assets for faster response +### ⚡️ Preload your assets for faster response The asset will be preloaded by default, this makes it quicker to load and reduces time-to-paint. Remove the preloader if you don't need it. @@ -159,13 +159,13 @@ The asset will be preloaded by default, this makes it quicker to load and reduce useGLTF.preload('/model.gltf') ``` -#### ⚡️ Auto-transform (compression, resize) +### ⚡️ Auto-transform (compression, resize) -With the `--transform` flag it creates a binary-packed, draco-compressed, texture-resized (1024x1024), webp compressed, deduped, instanced and pruned *.glb ready to be consumed on a web site. It uses [glTF-Transform](https://github.com/donmccurdy/glTF-Transform). This can reduce the size of an asset by 70%-90%. +With the `--transform` flag it creates a binary-packed, draco-compressed, texture-resized (1024x1024), webp compressed, deduped, instanced and pruned `*.glb` ready to be consumed on a web site. It uses [glTF-Transform](https://github.com/donmccurdy/glTF-Transform). This can reduce the size of an asset by 70%-90%. It will not alter the original but create a copy and append `[modelname]-transformed.glb`. -#### ⚡️ Type-safety +### ⚡️ Type-safety Add the `--types` flag and your GLTF will be typesafe. @@ -179,7 +179,7 @@ export default function Model(props: JSX.IntrinsicElements['group']) { const { nodes, materials } = useGLTF('/model.gltf') ``` -#### ⚡️ Easier access to animations +### ⚡️ Easier access to animations If your GLTF contains animations it will add [drei's](https://github.com/pmndrs/drei) `useAnimations` hook, which extracts all clips and prepares them as actions: @@ -205,7 +205,7 @@ useEffect(() => { }, [name]) ``` -#### ⚡️ Auto-instancing +### ⚡️ Auto-instancing Use the `--instance` flag and it will look for similar geometry and create instances of them. Look into [drei/Merged](https://github.com/pmndrs/drei#instances) to understand how it works. It does not matter if you instanced the model previously in Blender, it creates instances for each mesh that has a specific geometry and/or material. diff --git a/src/utils/parser.js b/src/utils/parser.js index 4fc66f3..89d2841 100644 --- a/src/utils/parser.js +++ b/src/utils/parser.js @@ -361,7 +361,7 @@ function parse(gltf, { fileName = 'model', ...options } = {}) { if (obj.isInstancedMesh) { const geo = `${node}.geometry` const mat = obj.material.name ? `materials${sanitizeName(obj.material.name)}` : `${node}.material` - type = "instancedMesh" + type = 'instancedMesh' result = `()' : 'React.useRef()'};` : '' } ${ !options.instanceall - ? `const { ${!hasPrimitives ? `nodes, materials` : 'scene'} ${hasAnimations ? ', animations' : ''}} = useGLTF('${url}'${ - options.draco ? `, ${JSON.stringify(options.draco)}` : '' - })${!hasPrimitives && options.types ? ' as GLTFResult' : ''}${ + ? `const { ${!hasPrimitives ? `nodes, materials` : 'scene'} ${ + hasAnimations ? ', animations' : '' + }} = useGLTF('${url}'${options.draco ? `, ${JSON.stringify(options.draco)}` : ''})${ + !hasPrimitives && options.types ? ' as GLTFResult' : '' + }${ hasPrimitives ? `\nconst clone = React.useMemo(() => SkeletonUtils.clone(scene), [scene]) const { nodes, materials } = useGraph(clone) ${options.types ? ' as GLTFResult' : ''}` diff --git a/src/utils/transform.js b/src/utils/transform.js index 14bcb4e..6d68583 100644 --- a/src/utils/transform.js +++ b/src/utils/transform.js @@ -58,8 +58,8 @@ async function transform(file, output, config = {}) { } functions.push( - // Weld vertices - weld(), + // Weld vertices + weld() ) if (config.simplify) { @@ -71,7 +71,7 @@ async function transform(file, output, config = {}) { functions.push( resample({ ready: resampleReady, resample: resampleWASM }), - prune({ keepAttributes: false, keepLeaves: false }), + prune({ keepAttributes: config.keepattributes ?? false, keepLeaves: false }), sparse() )