AR Klimaatmuseum – guides

---

Index

Technische overwegingen

Tests.1

Eerste Schets

Notes General

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 three

Contiue at: Split into sub files 18:08

---

https://www.udemy.com/course/build-modern-creative-portfolio-html-css-js-three-js-2022/learn/lecture/32236358#overview

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

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

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 dev

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

---