Three js Notes

Three js Notes

what is webgl ?

webgl is a javascript api for doing graphics on the browser. webgl works with most modern browser.

what is a shader ?

its kinda difficult to explain, we'll come back to it later.

creating a new project

npm init -y

installing vite :

npm i vite

html starter template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
    </main>
    <script type="module" src="index.js"></script>
  </body>
</html>

import three.js

import * as THREE from "three";

we need 4 elements for a basic scene :

1. scene
2. objects
3. camera
4. renderer

perspective camera inherits from camera 3d, even mesh inherits from object 3d. A perspective camera is used to simulate a real world environment.

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'