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: about 1 month 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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-24T14:41:59.000Z (about 2 months ago)
• Last Synced: 2024-09-28T23:02:44.910Z (about 2 months ago)
• Topics: starter, starter-kit, template, three, three-js, threejs, typescript, vite, vitejs
• Language: TypeScript
• Homepage: vite-threejs-ts-template.vercel.app
• Size: 1.06 MB
• Stars: 131
• Watchers: 2
• Forks: 19
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Three.js Vite Template with TypeScript

Three.js + Vite + TypeScript starter

- [Demo](https://vite-threejs-ts-template.vercel.app/)

- [Jump to CLI commands](#cli-commands)

## Copy (clone without git history)

```shell

npx degit pachoclo/vite-threejs-ts-template threejs-project

```

---



---

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

## Tech Stack

- Three.js

- TypeScript

- Vite

## CLI Commands

Installation

```bash

npm i

```

Run dev mode

```bash

npm run dev

```

Build

```bash

npm run build

```

Run build

```bash

npm run preview

```