A declarative Three.JS
with interactive GUI experience | Built by Svelte.
View a live demo of the Geometric Volume Shifter alpha version.
npm create svelte@latest Svelte_Geometric.Volume.Shifter
✅ Skeleton project
✅ TypeScript syntax
✅ ESLint for code linting
✅ Prettier for code formatting
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
const config: UserConfig = {
plugins: [sveltekit()],
ssr: {
noExternal: ['three', 'troika-three-text']
}
};
export default config;
This configuration prevents three
and troika-three-text
dependencies from being externalized for server-side rendering by Vite
Clone this repository :
> git clone [email protected]:GrungeElFz/Svelte_Geometric.Volume.Shifter.git
> cd Svelte_Geometric.Volume.Shifter
> code .
> npm i
> npm run dev
@threlte/core
@threlte/extras
@threlte/extras
Read more about Threlte packages and its requirements.
three
Read more about Three.JS installation.
tweakpane
Read more about Tweakpane, a compact library for fine-tuning parameters and monitoring value changes.
├── src
│ ├── components
│ │ ├── Controller.svelte
│ │ └── Scene.svelte
│ └── routes
│ └── +page.svelte
│ ├── app.d.ts
│ ├── app.html
├── static
│ ├── Banner-Svelte_Geometric.Shifter.png
│ ├── cubeicon.png
│ └── favicon.png
├── package-lock.json
├── package.json
├── README.md
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts