dash

src/lib/Dashboard.js

@@ -1,5 +1,4 @@
 import { MeshBasicMaterial, TextureLoader, LinearFilter,
-	sRGBEncoding,
 	Mesh,
 	OrthographicCamera,
 	PlaneGeometry,
@@ -11,24 +10,23 @@ import { Text } from 'troika-three-text';
 class DashBoard {
 	constructor(renderer, width, height) {
 
-		var _camera = new OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0, 1);
+		let _camera = new OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0, 1);
 
-		var _scene = new Scene();
+		let _scene = new Scene();
 
-		var _params = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat, stencilBuffer: true };
+		//let _params = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat, stencilBuffer: true };
 		this.points = 0;
 
-		var _texture = new TextureLoader().load('./assets/maze/x.png');
-		_texture.encoding = sRGBEncoding;
+		let _texture = new TextureLoader().load('./assets/maze/x.png');
 
-		var _material = new MeshBasicMaterial({
+		let _material = new MeshBasicMaterial({
 			map: _texture,
 			alphaTest: .5
 		});
 
 		// _mesh = new Mesh( new PlaneGeometry( width * 0.015, width * 0.015 ), _material );
-		var _text = new Text();
-		_text.font = './assets/fonts/MonomakhUnicode.otf';
+		let _text = new Text();
+		_text.font = '/static/fonts/Montserrat-Regular.ttf';
 		_text.text = 'Точки: 0';
 		_text.anchorX = 'right';
 		_text.anchorY = 'top';

src/lib/GameEngine.js

@@ -16,6 +16,7 @@ import { XRButton } from 'three/addons/webxr/XRButton.js';
 import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 import { Physics } from './Physics.js';
 import { Clickable } from './Clickable.js';
+import { DashBoard } from './Dashboard.js';
 
 class GameEngine extends THREE.EventDispatcher{
     async init(domNode, opts = {}) {
@@ -74,7 +75,7 @@ class GameEngine extends THREE.EventDispatcher{
 
         const renderer = new THREE.WebGLRenderer({
             antialias: true,
-            // alpha: true,
+            alpha: false,
             preserveDrawingBuffer: true, //this is important for screenshots capturing
             powerPreference: "high-performance",
         });
@@ -90,6 +91,7 @@ class GameEngine extends THREE.EventDispatcher{
         renderer.setSize(this.w, this.h);
         renderer.setViewport(0, 0, this.w, this.h);
         renderer.autoClear = true;
+        renderer.alpha = true
 
         this.anaglyph = new AnaglyphEffect(renderer);
         this.anaglyph.setSize(this.w, this.h);
@@ -97,6 +99,9 @@ class GameEngine extends THREE.EventDispatcher{
         this.stereo = new StereoEffect(renderer);
         this.stereo.setSize(this.w, this.h);
 
+        const dashboard = new DashBoard(renderer, this.w, this.h);
+        this.dashboard = dashboard;
+
         this.activeObjects = new THREE.Group();
         scene.add(this.activeObjects);
 
@@ -131,6 +136,9 @@ class GameEngine extends THREE.EventDispatcher{
             if (!renderer.xr.isPresenting) {
                 gameEngine.gizmo?.render();
             }
+            renderer.autoClear = false;
+            dashboard.render();
+            renderer.autoClear = true;
         }
         renderer.setAnimationLoop(animate);