Geometric Volume Shifter

A declarative Three.JS with interactive GUI experience | Built by Svelte.

Lighthouse Scores

• 🟢 Performance: 100
• 🟠 Accessibility: 76
• 🟢 Best Practices: 100
• 🟢 SEO: 100
• ⚫️ Progressive Web App: N/A

Demo

View a live demo of the Geometric Volume Shifter alpha version.

Tech Stack

• TypeScript
• Three.JS
• Threlte
• Svelte
• Vite

Creating a project

Vite Initialize

npm create svelte@latest Svelte_Geometric.Volume.Shifter

✅ Skeleton project
✅ TypeScript syntax
✅ ESLint for code linting
✅ Prettier for code formatting

Vite Configuration

// 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

Running Locally

Clone this repository :

> git clone git@github.com:GrungeElFz/Svelte_Geometric.Volume.Shifter.git

> cd Svelte_Geometric.Volume.Shifter

> code .

> npm i

> npm run dev

Packages

Threlte Packages

• @threlte/core
• @threlte/extras
• @threlte/extras

Read more about Threlte packages and its requirements.

Three.JS Package

• three

Read more about Three.JS installation.

Tweakpane

• tweakpane

Read more about Tweakpane, a compact library for fine-tuning parameters and monitoring value changes.

Project Structure

├── 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