Bring dat.gui inside vr

editor/js/Viewport.VR.js

@@ -1,6 +1,7 @@
 import * as THREE from '../../build/three.module.js';
 
-import { HTMLMesh } from './libs/three.html.js';
+import { HTMLMesh } from '../../examples/jsm/interactive/HTMLMesh.js';
+import { InteractiveGroup } from '../../examples/jsm/interactive/InteractiveGroup.js';
 
 import { XRControllerModelFactory } from '../../examples/jsm/webxr/XRControllerModelFactory.js';
 
@@ -29,31 +30,29 @@ class VR {
 
 			if ( group === null ) {
 
-				group = new THREE.Group();
+				group = new InteractiveGroup( renderer );
 				editor.sceneHelpers.add( group );
 
 				const mesh = new HTMLMesh( sidebar );
 				mesh.position.set( 1, 1.5, - 0.5 );
 				mesh.rotation.y = - 0.5;
+				mesh.scale.setScalar( 2 );
 				group.add( mesh );
 
 				intersectables.push( mesh );
 
 				// controllers
 
-				const controller1 = renderer.xr.getController( 0 );
-				controller1.addEventListener( 'select', onSelect );
-				group.add( controller1 );
-
-				const controller2 = renderer.xr.getController( 1 );
-				controller2.addEventListener( 'selectstart', onSelect );
-				group.add( controller2 );
-
 				const geometry = new THREE.BufferGeometry();
 				geometry.setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 5 ) ] );
 
+				const controller1 = renderer.xr.getController( 0 );
 				controller1.add( new THREE.Line( geometry ) );
+				group.add( controller1 );
+
+				const controller2 = renderer.xr.getController( 1 );
 				controller2.add( new THREE.Line( geometry ) );
+				group.add( controller2 );
 
 				//
 
@@ -101,41 +100,6 @@ class VR {
 
 		};
 
-		//
-
-		function onSelect( event ) {
-
-			const controller = event.target;
-
-			const intersections = getIntersections( controller );
-
-			if ( intersections.length > 0 ) {
-
-				const intersection = intersections[ 0 ];
-
-				const object = intersection.object;
-				const uv = intersection.uv;
-
-				object.material.map.click( uv.x, 1 - uv.y );
-
-			}
-
-		}
-
-		const raycaster = new THREE.Raycaster();
-		const tempMatrix = new THREE.Matrix4();
-
-		function getIntersections( controller ) {
-
-			tempMatrix.identity().extractRotation( controller.matrixWorld );
-
-			raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
-			raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
-
-			return raycaster.intersectObjects( intersectables );
-
-		}
-
 		// signals
 
 		signals.toggleVR.add( () => {

editor/sw.js

@@ -57,6 +57,9 @@ const assets = [
 	'../examples/jsm/curves/NURBSCurve.js',
 	'../examples/jsm/curves/NURBSUtils.js',
 
+	'../examples/jsm/interactive/HTMLMesh.js',
+	'../examples/jsm/interactive/InteractiveGroup.js',
+
 	'../examples/jsm/environments/RoomEnvironment.js',
 
 	'../examples/jsm/exporters/ColladaExporter.js',
@@ -108,7 +111,6 @@ 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',
 

editor/js/libs/three.html.js → examples/jsm/interactive/HTMLMesh.js

@@ -1,21 +1,39 @@
-import * as THREE from '../../../build/three.module.js';
+import {
+	CanvasTexture,
+	LinearFilter,
+	Mesh,
+	MeshBasicMaterial,
+	PlaneGeometry,
+	sRGBEncoding
+} from '../../../build/three.module.js';
 
-class HTMLMesh extends THREE.Mesh {
+class HTMLMesh extends Mesh {
 
 	constructor( dom ) {
 
 		const texture = new HTMLTexture( dom );
 
-		const geometry = new THREE.PlaneGeometry( texture.image.width * 0.002, texture.image.height * 0.002 );
-		const material = new THREE.MeshBasicMaterial( { map: texture, toneMapped: false } );
+		const geometry = new PlaneGeometry( texture.image.width * 0.001, texture.image.height * 0.001 );
+		const material = new MeshBasicMaterial( { map: texture, toneMapped: false } );
 
 		super( geometry, material );
 
+		function onEvent( event ) {
+
+			material.map.dispatchEvent( event );
+
+		}
+
+		this.addEventListener( 'mousedown', onEvent );
+		this.addEventListener( 'mousemove', onEvent );
+		this.addEventListener( 'mouseup', onEvent );
+		this.addEventListener( 'click', onEvent );
+
 	}
 
 }
 
-class HTMLTexture extends THREE.CanvasTexture {
+class HTMLTexture extends CanvasTexture {
 
 	constructor( dom ) {
 
@@ -24,15 +42,15 @@ class HTMLTexture extends THREE.CanvasTexture {
 		this.dom = dom;
 
 		this.anisotropy = 16;
-		this.encoding = THREE.sRGBEncoding;
-		this.minFilter = THREE.LinearFilter;
-		this.magFilter = THREE.LinearFilter;
+		this.encoding = sRGBEncoding;
+		this.minFilter = LinearFilter;
+		this.magFilter = LinearFilter;
 
 	}
 
-	click( x, y ) {
+	dispatchEvent( event ) {
 
-		htmlclick( this.dom, x, y );
+		htmlevent( this.dom, event.type, event.data.x, event.data.y );
 
 		this.update();
 
@@ -93,12 +111,14 @@ function html2canvas( element ) {
 		}
 
 		return {
+
 			add: function ( clip ) {
 
 				clips.push( clip );
 				doClip();
 
 			},
+
 			remove: function () {
 
 				clips.pop();
@@ -235,26 +255,25 @@ function html2canvas( element ) {
 
 	var clipper = new Clipper( context );
 
-	console.time( 'drawElement' );
+	// console.time( 'drawElement' );
 
 	drawElement( element );
 
-	console.timeEnd( 'drawElement' );
+	// console.timeEnd( 'drawElement' );
 
 	return canvas;
 
 }
 
-function htmlclick( element, x, y ) {
+function htmlevent( element, event, x, y ) {
 
-	/*
 	const mouseEventInit = {
 		clientX: ( x * element.offsetWidth ) + element.offsetLeft,
 		clientY: ( y * element.offsetHeight ) + element.offsetTop,
 		view: element.ownerDocument.defaultView
 	};
-	element.dispatchEvent( new MouseEvent( 'click', mouseEventInit ) );
-	*/
+
+	window.dispatchEvent( new MouseEvent( event, mouseEventInit ) );
 
 	const rect = element.getBoundingClientRect();
 
@@ -269,7 +288,7 @@ function htmlclick( element, x, y ) {
 
 			if ( x > rect.left && x < rect.right && y > rect.top && y < rect.bottom ) {
 
-				element.click();
+				element.dispatchEvent( new MouseEvent( event, mouseEventInit ) );
 
 			}
 
@@ -287,4 +306,4 @@ function htmlclick( element, x, y ) {
 
 }
 
-export { HTMLMesh, HTMLTexture };
+export { HTMLMesh };

examples/jsm/interactive/InteractiveGroup.js

@@ -0,0 +1,114 @@
+import {
+	Group,
+	Matrix4,
+	Raycaster,
+	Vector2
+} from '../../../build/three.module.js';
+
+const _pointer = new Vector2();
+const _event = { type: '', data: _pointer };
+
+class InteractiveGroup extends Group {
+
+	constructor( renderer, camera ) {
+
+		super();
+
+		const scope = this;
+
+		const raycaster = new Raycaster();
+		const tempMatrix = new Matrix4();
+
+		// Pointer Events
+
+		const element = renderer.domElement;
+
+		function onPointerEvent( event ) {
+
+			event.stopPropagation();
+
+			_pointer.x = ( event.clientX / element.clientWidth ) * 2 - 1;
+			_pointer.y = - ( event.clientY / element.clientHeight ) * 2 + 1;
+
+			raycaster.setFromCamera( _pointer, camera );
+
+			const intersects = raycaster.intersectObjects( scope.children );
+
+			if ( intersects.length > 0 ) {
+
+				const intersection = intersects[ 0 ];
+
+				const object = intersection.object;
+				const uv = intersection.uv;
+
+				_event.type = event.type;
+				_event.data.set( uv.x, 1 - uv.y );
+
+				object.dispatchEvent( _event );
+
+			}
+
+		}
+
+		element.addEventListener( 'pointerdown', onPointerEvent );
+		element.addEventListener( 'pointerup', onPointerEvent );
+		element.addEventListener( 'pointermove', onPointerEvent );
+		element.addEventListener( 'mousedown', onPointerEvent );
+		element.addEventListener( 'mouseup', onPointerEvent );
+		element.addEventListener( 'mousemove', onPointerEvent );
+		element.addEventListener( 'click', onPointerEvent );
+
+		// WebXR Controller Events
+		// TODO: Dispatch pointerevents too
+
+		const events = {
+			'move': 'mousemove',
+			'select': 'click',
+			'selectstart': 'mousedown',
+			'selectend': 'mouseup'
+		};
+
+		function onXRControllerEvent( event ) {
+
+			const controller = event.target;
+
+			tempMatrix.identity().extractRotation( controller.matrixWorld );
+
+			raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
+			raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
+
+			const intersections = raycaster.intersectObjects( scope.children );
+
+			if ( intersections.length > 0 ) {
+
+				const intersection = intersections[ 0 ];
+
+				const object = intersection.object;
+				const uv = intersection.uv;
+
+				_event.type = events[ event.type ];
+				_event.data.set( uv.x, 1 - uv.y );
+
+				object.dispatchEvent( _event );
+
+			}
+
+		}
+
+		const controller1 = renderer.xr.getController( 0 );
+		controller1.addEventListener( 'move', onXRControllerEvent );
+		controller1.addEventListener( 'select', onXRControllerEvent );
+		controller1.addEventListener( 'selectstart', onXRControllerEvent );
+		controller1.addEventListener( 'selectend', onXRControllerEvent );
+
+		const controller2 = renderer.xr.getController( 1 );
+		controller2.addEventListener( 'move', onXRControllerEvent );
+		controller2.addEventListener( 'select', onXRControllerEvent );
+		controller2.addEventListener( 'selectstart', onXRControllerEvent );
+		controller2.addEventListener( 'selectend', onXRControllerEvent );
+
+	}
+
+}
+
+export { InteractiveGroup };