https://github.com/pachoclo/vite-threejs-ts-template
A Vite-based starter project for Three.js with some of the essentials
https://github.com/pachoclo/vite-threejs-ts-template
starter starter-kit template three three-js threejs typescript vite vitejs
Last synced: 2 months ago
JSON representation
A Vite-based starter project for Three.js with some of the essentials
- Host: GitHub
- URL: https://github.com/pachoclo/vite-threejs-ts-template
- Owner: pachoclo
- Created: 2022-09-21T22:40:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-24T10:28:12.000Z (2 months ago)
- Last Synced: 2025-03-29T03:02:45.672Z (2 months ago)
- Topics: starter, starter-kit, template, three, three-js, threejs, typescript, vite, vitejs
- Language: TypeScript
- Homepage: https://pachoclo.github.io/vite-threejs-ts-template/
- Size: 1.1 MB
- Stars: 148
- Watchers: 2
- Forks: 24
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Github-CI: [![Build Status][build_status]][build_link]
[build_status]: ./../../actions/workflows/build.yml/badge.svg
[build_link]: ./../../actions/workflows/build.yml
# Three.js Vite Template with TypeScript
Three.js + Vite + TypeScript starter
- [Demo](../../deployments/github-pages)
- [Jump to CLI commands](#cli-commands)
---
---
## Tech Stack
- Three.js
- TypeScript
- Vite
## Stuff included in the `scene.ts`
- [x] Geometry
- [x] Material
- [x] Mesh
- [x] Ambient Light
- [x] Point Light
- [x] Camera
- [x] Scene
- [x] Canvas
- [x] Renderer (WebGL)
- [x] Loading Manager
- [x] Orbit Controls
- [x] Drag Controls
- [x] Grid
- [x] Antialias enabled
- [x] Transparent canvas
- [x] Responsive renderer and camera (to canvas size)
- [x] Animation Loop
- [x] Shadows
- [x] Stats (FPS, ms)
- [x] Full screen (double-click on canvas)
- [x] Debug GUI
## CLI Commands
Installation
```bash
npm i
```
Run dev mode
```bash
npm run dev
```
Build
```bash
npm run build
```
Run build
```bash
npm run preview
```