Quaternion and angle helpers, updated example

example/script.ts

@@ -1,5 +1,5 @@
-import { Color, Material, Mesh, Node, PerspectiveCamera, PointLight, Quaternion, Scene, Submesh, Vector3 } from "../src/data/index";
+import { Color, DirectionalLight, Material, Mesh, Node, PerspectiveCamera, PointLight, Quaternion, Scene, Submesh, Vector3 } from "../src/data/index";
-import { Renderer } from "../src/oktaeder";
+import { Renderer, degToRad } from "../src/oktaeder";
 import "./style.css";
 
 new EventSource("/esbuild").addEventListener("change", () => location.reload());
@@ -11,7 +11,7 @@ onResize.call(window);
 const renderer = await Renderer.init(canvas);
 
 const camera = new PerspectiveCamera({
-	verticalFovRad: 50 * (Math.PI / 180),
+	verticalFovRad: degToRad(50),
 	nearPlane: 0.001,
 	farPlane: Infinity,
 });
@@ -47,12 +47,11 @@ const mesh = new Mesh({ vertexBuffer, indexBuffer, submeshes: [submesh] });
 const material = new Material({
 	baseColor: Color.white(),
 	roughness: 0.5,
-	metallic: 0,
+	metallic: 1,
 });
 
 const node = new Node({ mesh, materials: [material] });
 
-const cameraPitchRad = 15 * (Math.PI / 180);
 const scene = new Scene({
 	nodes: [
 		node,
@@ -72,9 +71,13 @@ const scene = new Scene({
 			translation: new Vector3(0, 1, 1),
 			light: new PointLight({ color: new Color(1, 1, 0) }),
 		}),
+		new Node({
+			rotation: Quaternion.fromRotationYZ(degToRad(-90)),
+			light: new DirectionalLight({ color: new Color(0.5, 0.5, 0.5) }),
+		}),
 		new Node({
 			translation: new Vector3(0, 0.8, -3),
-			rotation: new Quaternion(Math.sin(0.5 * cameraPitchRad), 0, 0, Math.cos(0.5 * cameraPitchRad)),
+			rotation: Quaternion.fromRotationYZ(degToRad(15)),
 			camera,
 		}),
 	],
@@ -86,12 +89,11 @@ function onResize(this: Window) {
 	canvas.height = this.innerHeight;
 }
 
-const rotation = Quaternion.identity();
+const _quaternion = Quaternion.identity();
 
-function draw(time: number) {
+function draw(timeMs: number) {
-	rotation.y = Math.cos(0.001 * time);
+	const time = 0.001 * timeMs;
-	rotation.w = Math.sin(0.001 * time);
+	node.setRotation(_quaternion.setRotationZX(-0.5 * time));
-	node.setRotation(rotation);
 
 	renderer.render(scene, camera);
 	requestAnimationFrame(draw);

src/data/Quaternion.ts

@@ -41,6 +41,27 @@ export class Quaternion {
 		return new Quaternion(0, 0, 0, 1);
 	}
 
+	static fromRotationXY(angleRad: number): Quaternion {
+		const halfAngleRad = 0.5 * angleRad;
+		const c = Math.cos(halfAngleRad);
+		const s = Math.sin(halfAngleRad);
+		return new Quaternion(0, 0, s, c);
+	}
+
+	static fromRotationYZ(angleRad: number): Quaternion {
+		const halfAngleRad = 0.5 * angleRad;
+		const c = Math.cos(halfAngleRad);
+		const s = Math.sin(halfAngleRad);
+		return new Quaternion(s, 0, 0, c);
+	}
+
+	static fromRotationZX(angleRad: number): Quaternion {
+		const halfAngleRad = 0.5 * angleRad;
+		const c = Math.cos(halfAngleRad);
+		const s = Math.sin(halfAngleRad);
+		return new Quaternion(0, s, 0, c);
+	}
+
 	setObject(object: QuaternionObject): Quaternion {
 		this.x = object.x;
 		this.y = object.y;
@@ -64,6 +85,33 @@ export class Quaternion {
 		this.w = 1;
 		return this;
 	}
+
+	setRotationXY(angleRad: number): Quaternion {
+		const halfAngleRad = 0.5 * angleRad;
+		this.x = 0;
+		this.y = 0;
+		this.z = Math.sin(halfAngleRad);
+		this.w = Math.cos(halfAngleRad);
+		return this;
+	}
+
+	setRotationYZ(angleRad: number): Quaternion {
+		const halfAngleRad = 0.5 * angleRad;
+		this.x = Math.sin(halfAngleRad);
+		this.y = 0;
+		this.z = 0;
+		this.w = Math.cos(halfAngleRad);
+		return this;
+	}
+
+	setRotationZX(angleRad: number): Quaternion {
+		const halfAngleRad = 0.5 * angleRad;
+		this.x = 0;
+		this.y = Math.sin(halfAngleRad);
+		this.z = 0;
+		this.w = Math.cos(halfAngleRad);
+		return this;
+	}
 }
 
 Object.defineProperty(Quaternion.prototype, "type", { value: "Quaternion" });

src/geometry.ts

@@ -0,0 +1,7 @@
+export function degToRad(angleDeg: number): number {
+	return angleDeg * Math.PI / 180;
+}
+
+export function radToDeg(angleRad: number): number {
+	return angleRad * 180 / Math.PI;
+}

src/oktaeder.ts

@@ -5,6 +5,7 @@
  */
 
 export * from "./_BinaryWriter";
+export * from "./geometry";
 export * from "./shader";
 
 import { _BinaryWriter as BinaryWriter } from "./_BinaryWriter";