{"id":24482109,"url":"https://github.com/hongkiulam/threlte-spline","last_synced_at":"2025-04-13T16:43:03.362Z","repository":{"id":86537494,"uuid":"606419906","full_name":"hongkiulam/threlte-spline","owner":"hongkiulam","description":"Helper function to load Spline scene objects into threlte","archived":false,"fork":false,"pushed_at":"2024-04-14T09:41:09.000Z","size":3371,"stargazers_count":13,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-04T09:35:07.740Z","etag":null,"topics":["spline","splinetool","svelte","threejs","threlte"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hongkiulam.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-25T12:46:41.000Z","updated_at":"2024-10-29T03:03:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"e37d0732-6d3f-410f-81f8-5193e77cb563","html_url":"https://github.com/hongkiulam/threlte-spline","commit_stats":{"total_commits":20,"total_committers":2,"mean_commits":10.0,"dds":0.25,"last_synced_commit":"5664ac4dfd64815ea4c49576079c4f87385880c0"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hongkiulam%2Fthrelte-spline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hongkiulam%2Fthrelte-spline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hongkiulam%2Fthrelte-spline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hongkiulam%2Fthrelte-spline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hongkiulam","download_url":"https://codeload.github.com/hongkiulam/threlte-spline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248747420,"owners_count":21155448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["spline","splinetool","svelte","threejs","threlte"],"created_at":"2025-01-21T12:12:27.588Z","updated_at":"2025-04-13T16:43:03.333Z","avatar_url":"https://github.com/hongkiulam.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://raw.githubusercontent.com/hongkiulam/threlte-spline/main/.github/screenshots/hero.png)\n\n# threlte-spline\n\n**threlte-spline** is a simple utility that lets you use your [Spline](https://spline.design/) scene with [Threlte](https://threlte.xyz/), via the Spline react-three-fiber code export.\n\nThis library is heavily inspired by [r3f-spline](https://github.com/splinetool/r3f-spline)\n\n![](https://github.com/hongkiulam/threlte-spline/actions/workflows/main.yml/badge.svg)\n![](https://github.com/hongkiulam/threlte-spline/actions/workflows/publish.yml/badge.svg)\n![](https://img.shields.io/npm/v/threlte-spline?style=plastic)\n\nWhile this library is written to be used in Threlte, it **can** be used in applications that aren't powered by Threlte. That's because this library simply loads, and returns the Spline scene as Three.js objects.\n\n## Install\n\n```bash\nyarn add threlte-spline @splinetool/loader\n```\n\nor\n\n```bash\nnpm install threlte-spline @splinetool/loader\n```\n\nor\n\n```bash\npnpm add threlte-spline @splinetool/loader\n```\n\n`@types/three` is required for Typescript support\n\nPlease be aware that this library is simply an extension of `@splinetool/loader`, and is intended to be used with `@threlte/core`. Both of these libraries were built with a specific version of `three` in mind. So please be mindful that your installed version of `three` may need to be very specific in order for these libraries to work harmoniously together.\n\nA common error that you may encounter if your version of `three` is not compatible with your version of `@splinetool/loader` is: `Uncaught TypeError: Cannot read property 'x' of undefined`\n\nTypically, you can use the latest version of `@splinetool/loader` that is available at the time of exporting the Spline scene, you can then find *roughly* the version of `three` required [here](./splineloader-three-mapping/splineloader-three-mapping.json). These are scraped from `@splinetool/loader` package.json files.\n\n\n## Usage\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { Canvas, T, OrbitControls } from '@threlte/core';\n  import { loadSpline } from 'threlte-spline';\n\n  let scene;\n  loadSpline('https://prod.spline.design/HwAUoybfBaBCLzwO/scene.spline').then((_scene) =\u003e {\n    scene = _scene;\n  });\n\u003c/script\u003e\n\n{#if scene}\n  \u003cCanvas\u003e\n    \u003cT.PerspectiveCamera\n      makeDefault\n      position={scene.nodes['Camera 1'].position}\n      fov={scene.nodes['Camera 1'].fov}\n      zoom={scene.nodes['Camera 1'].zoom}\n    \u003e\n      \u003cOrbitControls /\u003e\n    \u003c/T.PerspectiveCamera\u003e\n\n    \u003cT.Group\u003e\n      \u003cT.Mesh\n        name=\"Rectangle\"\n        geometry={scene.nodes.Rectangle.geometry}\n        material={scene.materials['Rectangle Material']}\n      /\u003e\n    \u003c/T.Group\u003e\n  \u003c/Canvas\u003e\n{/if}\n```\n\n## Typescript\n\nType information should be fairly complete as this package extends `@types/three`, however there may be certain properties which are missing. Feel free to contribute any missing types if you find any.\n\nIn the interim, you can extend the types by doing the following\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { Canvas, T, OrbitControls } from '@threlte/core';\n  import { loadSpline } from 'threlte-spline';\n\n  type MissingProperties = {\n    prop1: number;\n  }\n  let scene: ObjectMap\u003cMissingProperties\u003e;\n  loadSpline\u003cMissingProperties\u003e('https://prod.spline.design/HwAUoybfBaBCLzwO/scene.spline').then((_scene) =\u003e {\n    scene = _scene;\n  });\n\u003c/script\u003e\n\n{#if scene}\n  \u003cCanvas\u003e\n    ...\n  \u003c/Canvas\u003e\n{/if}\n```\n\nThis will add the missing props to `SceneNode`\n\n### types-plugin\n\nRegister this Vite plugin to fetch more accurate types for your Spline scene\n\ne.g.\n\n```javascript\nimport { threlteSplineTypesPlugin } from 'threlte-spline/dist/types-plugin';\n\nconst viteConfig = {\n  ...,\n  plugins: [..., threlteSplineTypesPlugin()],\n};\n```\n\n**Without plugin**\n```javascript\nscene.nodes\n//      ^= { [x: string]: SceneNode }\n```\n\n**With plugin**\n```javascript\nscene.nodes\n//      ^= { rectangle: SceneNode, camera: SceneNode }\n```\n\n## Examples\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://stackblitz.com/edit/threlte-spline-demo?file=src%2FApp.svelte\" target=\"_blank\"\u003e\u003cimg width=\"274\" src=\"https://raw.githubusercontent.com/hongkiulam/threlte-spline/main/.github/screenshots/example1.png\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhongkiulam%2Fthrelte-spline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhongkiulam%2Fthrelte-spline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhongkiulam%2Fthrelte-spline/lists"}