Guides – technology stack
– LATEST WORKING !!! –
Modern ThreeJS with Vite (2021)
Resources
– Modern ThreeJS github template https://github.com/alvarosabu/modern-…
– ThreeJS https://threejs.org/
– Vite https://vitejs.dev/ 00:00
– Intro 01:52
– Basic Setup 04:21
– Install deps 05:07
– Dev Server 06:25
– Install types for three 08:11
– Basic Scene prep 11:14
– Split into sub files 18:08
– Code enhancement suggestions 23:58
– Debug using tweakpane 30:46
– FPS Graph 34:20
– Why Vite over Webpack 37:49
– Repository with the Code 38:51
– Wrapping Up 39:15 – Outro
In the root projects folder, in a terminal type:
npm create vite@latest [foldername]choose vanilla
cd /[foldername]install dependancies
npm install
npm install threeContiue at: Split into sub files 18:08
Couldn’t get parcels working with npm so switched over to VITE as per this tutorial
Import module with npm
https://github.com/Sean-Bradley/Threejs-Boilerplate
- npm init
- npm install three
- npm install express
- use the files in from the github link or youtube video
- npm start
There is no build setup so I don’t know how to push this to a ftp server.
Three with Vite / three with html elements
https://www.udemy.com/course/modern-threejs-for-real-websites/
instead of npm init @vitejs/app (which didn’t work) I used
npm create vite@latest [foldername]This created a new folder with the project files
Import Three with:
import * as THREE from "https://unpkg.com/three@0.144.0/build/three.module.js"
const scene = new THREE.Scene();
console.log(scene)run the vite project with:
npm run devAt this point I have three working with vite. I will save this project as v0.1_vite