diff --git a/src/lib/Dashboard.js b/src/lib/Dashboard.js index add1964..450352f 100644 --- a/src/lib/Dashboard.js +++ b/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'; diff --git a/src/lib/GameEngine.js b/src/lib/GameEngine.js index 2790a66..3d5226e 100644 --- a/src/lib/GameEngine.js +++ b/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);