Change of basis - memo

abernier · November 11, 2022, 5:52pm

Hi,

I’m currently working on a little memo to help me keep my mind clear about matrices and “change of basis” applied to THREE.js.

I’d be curious if you have any feedbacks about it: whether if I did mistakes or any idea to improve it.

Here it is:

github.com

abernier/abernier/blob/main/articles/three-spaces.md

## "Space"

In a 3d environment, a "space" is defined by 3 perpendicular axes and an origin:
[![image](https://docs.google.com/drawings/d/e/2PACX-1vSgAWjz37yphQgR4NkrW8Lehtg3LAVJmqn0fMcGoMgxETzU1dj_V36MAPUfCwSFrtRkK3IEVsMzeWXE/pub?w=1440&h=1080)](https://docs.google.com/drawings/d/1thD_hICjAhERuMXal7ez8HhEk9JPYV7iF5Mhb2VIYCU/edit)

It allows us to locate any "point" in this space, by its 3 coordinates components:
[![image](https://docs.google.com/drawings/d/e/2PACX-1vQDwhYakAtd5OudiUgRExULy6C-LwD-KTuOe_k0DpkR3nAGWkj4LXOdYEt8f3rKgb7g3EA10YGq7EQu/pub?w=1440&h=1080)](https://docs.google.com/drawings/d/1kflQFDXOeOiT6VvMu_0fktmethV-jprDh9zLv8ZBshE/edit)

**In THREE, a such space is called an [`Object3D`](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D).**

## World space

A default "world" space will always exist in a [`Scene`](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene):
[![image](https://docs.google.com/drawings/d/e/2PACX-1vRG2Sxu2kkV8wW3c3spdxQ3GzsZfhmubzisEEEQzOjyuh0m0WqO97X5K2WI9UQXc7Qd08prGGxXnQxg/pub?w=1440&h=1080)](https://docs.google.com/drawings/d/1S81NPv6S1NSpr2A_qBdVaZaKk4l4LqN3I_6jQa0tJ_E/edit)
```js
const scene = new THREE.Scene()
```

Any other "object" in the scene has also its own "space", typically a [`Mesh`](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) — which is an `Object3d`:
[![image](https://docs.google.com/drawings/d/e/2PACX-1vSfT3Ikc78bzVPFAhd-48AQpLx1sTAV48Tt4QkXjQR8znLOeS3scZfN5l1WVSeaymacfrcGCvqrqoAq/pub?w=1440&h=1080)](https://docs.google.com/drawings/d/10be51vBd848bzi2RwGcrRLCmRWqmhSwPFs8FR5kdKvQ/edit)

This file has been truncated. show original

Thank you

abernier · November 12, 2022, 11:41am

I finally ended with this recap diagram:

NB: It does not replace the full-article, which is more detailed, but gives the big picture.

Related to this, I’ve experienced with “the travel of a vertex”: from its local-space up to the screen-space:

I share it with you here