AR klimaatmuseum

AR Klimaatmuseum – guides


Technische overwegingen


Eerste Schets

Notes General

Guides – technology stack


Modern ThreeJS with Vite (2021)

– Modern ThreeJS github template…
– ThreeJS
– Vite 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 three

Contiue 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

  1. npm init
  2. npm install three
  3. npm install express
  4. use the files in from the github link or youtube video
  5. 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

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

  const scene = new THREE.Scene();


run the vite project with:

npm run dev

At this point I have three working with vite. I will save this project as v0.1_vite