Editor: VR code clean up.

editor/js/Viewport.VR.js

@@ -26,8 +26,8 @@ class VR {
 				group = new THREE.Group();
 				editor.sceneHelpers.add( group );
 
-				const mesh = new HTMLMesh( document.getElementById( 'sidebar' ) );
-				mesh.position.set( 1, 1.5, 0 );
+				const mesh = new HTMLMesh( document.getElementById( 'sidebar' ), 300, 700 );
+				mesh.position.set( 1, 1.5, - 0.5 );
 				mesh.rotation.y = - 0.5;
 				group.add( mesh );
 

editor/js/libs/three.html.js

-import {
-	CanvasTexture,
-	Mesh,
-	MeshBasicMaterial,
-	PlaneGeometry,
-	sRGBEncoding
-} from '../../../build/three.module.js';
+import * as THREE from '../../../build/three.module.js';
 
-class HTMLMesh extends Mesh {
+class HTMLMesh extends THREE.Mesh {
 
-	constructor( dom ) {
+	constructor( dom, width, height ) {
+
+		dom.style.width = width + 'px';
+		dom.style.height = height + 'px';
 
 		const texture = new HTMLTexture( dom );
 
-		const geometry = new PlaneGeometry( texture.image.width * 0.001, texture.image.height * 0.001 );
-		const material = new MeshBasicMaterial( { map: texture, toneMapped: false } );
+		dom.style.width = '';
+		dom.style.height = '';
+
+		const geometry = new THREE.PlaneGeometry( texture.image.width * 0.002, texture.image.height * 0.002 );
+		const material = new THREE.MeshBasicMaterial( { map: texture, toneMapped: false } );
 
 		super( geometry, material );
 
@@ -21,15 +21,18 @@ class HTMLMesh extends Mesh {
 
 }
 
-class HTMLTexture extends CanvasTexture {
+class HTMLTexture extends THREE.CanvasTexture {
 
 	constructor( dom ) {
 
 		super( html2canvas( dom ) );
 
 		this.dom = dom;
-		this.encoding = sRGBEncoding;
+
 		this.anisotropy = 16;
+		this.encoding = THREE.sRGBEncoding;
+		this.minFilter = THREE.LinearFilter;
+		this.magFilter = THREE.LinearFilter;
 
 	}
 
@@ -117,6 +120,12 @@ function html2canvas( element ) {
 
 		if ( string !== '' ) {
 
+			if ( style.textTransform === 'uppercase' ) {
+
+				string = string.toUpperCase();
+
+			}
+
 			context.font = style.fontSize + ' ' + style.fontFamily;
 			context.textBaseline = 'top';
 			context.fillStyle = style.color;

editor/sw.js

@@ -100,6 +100,7 @@ const assets = [
 	'./js/libs/tern-threejs/threejs.js',
 
 	'./js/libs/signals.min.js',
+	'./js/libs/three.html.js',
 	'./js/libs/ui.js',
 	'./js/libs/ui.three.js',
 
@@ -126,6 +127,7 @@ const assets = [
 	'./js/Menubar.Play.js',
 	'./js/Menubar.Examples.js',
 	'./js/Menubar.Help.js',
+	'./js/Menubar.View.js',
 	'./js/Menubar.Status.js',
 	'./js/Resizer.js',
 	'./js/Sidebar.js',
@@ -169,6 +171,7 @@ const assets = [
 	'./js/Viewport.Camera.js',
 	'./js/Viewport.Info.js',
 	'./js/Viewport.ViewHelper.js',
+	'./js/Viewport.VR.js',
 
 	'./js/Command.js',
 	'./js/commands/AddObjectCommand.js',
@@ -212,7 +215,7 @@ self.addEventListener( 'install', async function () {
 
 		cache.add( asset ).catch( function () {
 
-			console.error( '[SW] Cound\'t cache:', asset );
+			console.warn( '[SW] Cound\'t cache:', asset );
 
 		} );
 
@@ -233,7 +236,7 @@ async function cacheFirst( request ) {
 
 	if ( cachedResponse === undefined ) {
 
-		console.error( '[SW] Not cached:', request.url );
+		console.warn( '[SW] Not cached:', request.url );
 		return fetch( request );
 
 	}