103 lines
2.4 KiB
TypeScript
103 lines
2.4 KiB
TypeScript
import { Color, Material, Mesh, Node, PerspectiveCamera, PointLight, Quaternion, Scene, Submesh, Vector3 } from "../src/data/index";
|
|
import { Renderer } from "../src/oktaeder";
|
|
import "./style.css";
|
|
|
|
new EventSource("/esbuild").addEventListener("change", () => location.reload());
|
|
|
|
const canvas = document.createElement("canvas");
|
|
window.addEventListener("resize", onResize);
|
|
onResize.call(window);
|
|
|
|
const renderer = await Renderer.init(canvas);
|
|
|
|
const camera = new PerspectiveCamera({
|
|
verticalFovRad: 50 * (Math.PI / 180),
|
|
nearPlane: 0.001,
|
|
farPlane: Infinity,
|
|
});
|
|
|
|
const vertexBuffer = renderer.createVertexBuffer({ vertexCount: 6 });
|
|
vertexBuffer.writeTypedArray(0, {
|
|
position: new Float32Array([
|
|
-1, 0, 0,
|
|
1, 0, 0,
|
|
0, -1, 0,
|
|
0, 1, 0,
|
|
0, 0, -1,
|
|
0, 0, 1,
|
|
]),
|
|
});
|
|
|
|
const indexBuffer = renderer.createIndexBuffer({ indexCount: 24, indexFormat: "uint16" });
|
|
indexBuffer.writeArray(0, [
|
|
0, 4, 3,
|
|
4, 1, 3,
|
|
1, 5, 3,
|
|
5, 0, 3,
|
|
4, 0, 2,
|
|
1, 4, 2,
|
|
5, 1, 2,
|
|
0, 5, 2,
|
|
]);
|
|
|
|
const submesh: Submesh = { start: 0, length: 24 };
|
|
|
|
const mesh = new Mesh({ vertexBuffer, indexBuffer, submeshes: [submesh] });
|
|
|
|
const material = new Material({
|
|
baseColor: Color.white(),
|
|
roughness: 0.5,
|
|
metallic: 0,
|
|
});
|
|
|
|
const node = new Node({ mesh, materials: [material] });
|
|
|
|
const cameraPitchRad = 15 * (Math.PI / 180);
|
|
const scene = new Scene({
|
|
nodes: [
|
|
node,
|
|
new Node({
|
|
translation: new Vector3(-1, 1, 0),
|
|
light: new PointLight({ color: new Color(1, 0, 0) }),
|
|
}),
|
|
new Node({
|
|
translation: new Vector3(0, 1, -1),
|
|
light: new PointLight({ color: new Color(0, 1, 0) }),
|
|
}),
|
|
new Node({
|
|
translation: new Vector3(1, 1, 0),
|
|
light: new PointLight({ color: new Color(0, 0, 1) }),
|
|
}),
|
|
new Node({
|
|
translation: new Vector3(0, 1, 1),
|
|
light: new PointLight({ color: new Color(1, 1, 0) }),
|
|
}),
|
|
new Node({
|
|
translation: new Vector3(0, 0.8, -3),
|
|
rotation: new Quaternion(Math.sin(0.5 * cameraPitchRad), 0, 0, Math.cos(0.5 * cameraPitchRad)),
|
|
camera,
|
|
}),
|
|
],
|
|
ambientLight: new Color(0.01, 0.01, 0.01),
|
|
});
|
|
|
|
function onResize(this: Window) {
|
|
canvas.width = this.innerWidth;
|
|
canvas.height = this.innerHeight;
|
|
}
|
|
|
|
const rotation = Quaternion.identity();
|
|
|
|
function draw(time: number) {
|
|
rotation.y = Math.cos(0.001 * time);
|
|
rotation.w = Math.sin(0.001 * time);
|
|
node.setRotation(rotation);
|
|
|
|
renderer.render(scene, camera);
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
requestAnimationFrame(draw);
|
|
|
|
document.body.appendChild(canvas);
|