|
|
@@ -0,0 +1,72 @@
|
|
|
+import * as three from "three-js";
|
|
|
+
|
|
|
+class render_engine {
|
|
|
+ #renderer;
|
|
|
+ #scene;
|
|
|
+ #camera;
|
|
|
+ #canvas;
|
|
|
+ #actors;
|
|
|
+
|
|
|
+ constructor(canvas, context) {
|
|
|
+ if (!(canvas instanceof HTMLCanvasElement)) {
|
|
|
+ throw TypeError("Canvas must be an HTMLCanvasElement.");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!(context instanceof WebGL2RenderingContext)) {
|
|
|
+ throw TypeError("Context must be WebGL2 RenderingContext.");
|
|
|
+ }
|
|
|
+
|
|
|
+ this.#actors = {};
|
|
|
+ this.#canvas = canvas;
|
|
|
+ this.#scene = new three.Scene();
|
|
|
+ this.#camera = new three.PerspectiveCamera(75, 1, 0.1, 1000);
|
|
|
+
|
|
|
+ this.#renderer = new three.WebGLRenderer({
|
|
|
+ canvas: this.#canvas,
|
|
|
+ context: context
|
|
|
+ });
|
|
|
+
|
|
|
+ this.#update_camera();
|
|
|
+ this.#resize_canvas();
|
|
|
+
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ this.#resize_canvas();
|
|
|
+ this.#update_camera();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ #resize_canvas() {
|
|
|
+ this.#canvas.width = window.innerWidth;
|
|
|
+ this.#canvas.height = window.innerHeight;
|
|
|
+
|
|
|
+ this.#renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+ }
|
|
|
+
|
|
|
+ #update_camera() {
|
|
|
+ this.#camera.aspect = this.#canvas.width / this.#canvas.height;
|
|
|
+ }
|
|
|
+
|
|
|
+ run() {
|
|
|
+ this.#init();
|
|
|
+ this.#renderer.setAnimationLoop(() => { this.#render(); });
|
|
|
+ }
|
|
|
+
|
|
|
+ #init() {
|
|
|
+ const geometry = new three.BoxGeometry(1, 1, 1);
|
|
|
+ const material = new three.MeshBasicMaterial({ color: 0x004000 });
|
|
|
+ this.#actors.cube = new three.Mesh(geometry, material);
|
|
|
+
|
|
|
+ this.#scene.add(this.#actors.cube);
|
|
|
+
|
|
|
+ this.#camera.position.z = 5;
|
|
|
+ }
|
|
|
+
|
|
|
+ #render() {
|
|
|
+ this.#actors.cube.rotation.x += 0.01;
|
|
|
+ this.#actors.cube.rotation.y += 0.01;
|
|
|
+
|
|
|
+ this.#renderer.render(this.#scene, this.#camera);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export { render_engine };
|
