Three.js

import {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from 'three';

// Get a reference to the container element that will hold our scene
const container = document.querySelector('#scene-container');

// create a Scene
const scene = new Scene();

// Set the background color
scene.background = new Color('skyblue');

/*******
 ******* Create a camera
 ****** "projections" converts to human version friendly format
 ****** PerspectiveCamera is 3D equivalent of a camera in the real world
 ****** Another OrthographicCamera
*******/

/* Viewing frustum
* fov, or field of view: how wide the camera’s view is, in degrees.
* aspect, or aspect ratio: the ratio of the scene’s width to its height.
* near, or near clipping plane: anything closer to the camera than this 
will be invisible.
* far, or far clipping plane: anything further away from the camera 
than this will be invisible.
*/
const fov = 35; // AKA Field of View
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1; // the near clipping plane
const far = 100; // the far clipping plane

const camera = new PerspectiveCamera(fov, aspect, near, far);

// every object is initially created at ( 0, 0, 0 )
// move the camera back so we can view the scene
// set camera.position.x=1;
camera.position.set(0, 0, 10);

// create a geometry
// defined the shape of the mesh
// length width depth
const geometry = new BoxBufferGeometry(2, 2, 2);

// create a default (white) Basic material
// define the surface
const material = new MeshBasicMaterial();

/****
****create a Mesh containing the geometry and material
****/
const cube = new Mesh(geometry, material);

// add the mesh to the scene
scene.add(cube);
// or, scene.remove(mesh)


/****
**** create the renderer
**** WebGLRenderer uses WebGL2 or fall back to WebGL V1
****/
const renderer = new WebGLRenderer();

// next, set the renderer to the same size as our container element
renderer.setSize(container.clientWidth, container.clientHeight);

// finally, set the pixel ratio so that our scene will look good on HiDPI displays
renderer.setPixelRatio(window.devicePixelRatio);

// add the automatically created <canvas> element to the page
container.append(renderer.domElement);

// render, or 'create a still image', of the scene
renderer.render(scene, camera);

// creating the scene creates the world space coordinate system
const scene = new Scene();

// mesh A has its own local coordinate system
const meshA = new Mesh();

// mesh B also has its own local coordinate system
const meshB = new Mesh();

// when we create a mesh ...
import { Vector3 } from 'three';

const vector = new Vector3(1, 2, 3);

// ... internally, three.js creates a Vector3 for us:
mesh.position = vector;

vector.x; // 1
vector.y; // 2
vector.z; // 3

vector.x = 5;

vector.x; // 5

vector.set(7, 7, 7);

vector.x; // 7
vector.y; // 7
vector.z; // 7

import {
Group
} from 'three.module.js';

const group = new Group(); // has add remove methods

// when we create a mesh...
const mesh = new Mesh();

// ... internally, three.js creates a Vector3 for us:
mesh.scale = new Vector3(1, 1, 1);

const mesh = new Mesh();

// ... internally, three.js creates an Euler for us:
mesh.rotation = new Euler();


// need to reset xyz asix, if we want to do more roate since the asix changed after the first totation
mesh.rotate.reorder('yxz');

// or use quaternion, which doesn't have the order peoblem.
mesh.quaternaion 

import { MathUtils } from 'three';

const rads = MathUtils.degToRad(90); // 1.57079... = π/2

function createRenderer() {
  const renderer = new WebGLRenderer({ antialias: true });

  renderer.physicallyCorrectLights = true;

  return renderer;
}

import { WebGLRenderer } from 'three';
const renderer = new WebGLRenderer();
// start the loop
renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

import { Clock } from 'three';
const clock = new Clock();
const delta = clock.getDelta();

function createMaterial() {
  // create a texture loader.
  const textureLoader = new TextureLoader();

  // load a texture
  const texture = textureLoader.load(
    '/assets/textures/uv-test-bw.png',
  );

  // create a "standard" material using
  // the texture we just loaded as a color map
  const material = new MeshStandardMaterial({
    map: texture,
  });

  return material;
}