physics

src/lib/Dashboard.js

@@ -0,0 +1,73 @@
+import { MeshBasicMaterial, TextureLoader, LinearFilter,
+	sRGBEncoding,
+	Mesh,
+	OrthographicCamera,
+	PlaneGeometry,
+	RGBAFormat,
+	Scene } from 'three';
+
+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);
+
+		var _scene = new Scene();
+
+		var _params = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat, stencilBuffer: true };
+		this.points = 0;
+
+		var _texture = new TextureLoader().load('./assets/maze/x.png');
+		_texture.encoding = sRGBEncoding;
+
+		var _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';
+		_text.text = 'Точки: 0';
+		_text.anchorX = 'right';
+		_text.anchorY = 'top';
+		_text.fontSize = width * 0.015;
+		_text.position.set(width * .48, height * .47, 0);
+		_text.color = 0xffffff;
+		_text.outlineColor = 0x222222;
+		_text.outlineWidth = '5%';
+		_text.outlineBlur = '5%';
+		//_scene.add( _mesh );
+		_scene.add(_text);
+		_text.sync();
+
+		this.render = function (scene, camera) {
+			renderer.render(_scene, _camera);
+		};
+
+		this.setSize = function (width, height) {
+			_camera.left = width / -2;
+			_camera.right = width / 2;
+			_camera.top = height / 2;
+			_camera.bottom = height / -2;
+			_camera.updateProjectionMatrix();
+
+			_text.position.set(width * .48, height * .47, 0);
+		};
+
+		this.addPoints = function (points) {
+			this.onpoints && this.onpoints(this.points + points, this.points);
+			this.points += points;
+			_text.text = 'точки: ' + this.points;
+		};
+
+		this.dispose = function () {
+			if (_mesh) _mesh.geometry.dispose();
+			if (_material) _material.dispose();
+		};
+
+	}
+}
+
+export { DashBoard };