@anov/3d 0.0.4-alpha.1 → 0.0.4-alpha12

package/examples/jsm/webxr/XRButton.js

@@ -1,198 +0,0 @@
-class XRButton {
-
-	static createButton( renderer ) {
-
-		const button = document.createElement( 'button' );
-
-		function showStartXR( mode ) {
-
-			let currentSession = null;
-
-			async function onSessionStarted( session ) {
-
-				session.addEventListener( 'end', onSessionEnded );
-
-				await renderer.xr.setSession( session );
-
-				button.textContent = 'STOP XR';
-
-				currentSession = session;
-
-			}
-
-			function onSessionEnded( /*event*/ ) {
-
-				currentSession.removeEventListener( 'end', onSessionEnded );
-
-				button.textContent = 'START XR';
-
-				currentSession = null;
-
-			}
-
-			//
-
-			button.style.display = '';
-
-			button.style.cursor = 'pointer';
-			button.style.left = 'calc(50% - 50px)';
-			button.style.width = '100px';
-
-			button.textContent = 'START XR';
-
-			button.onmouseenter = function () {
-
-				button.style.opacity = '1.0';
-
-			};
-
-			button.onmouseleave = function () {
-
-				button.style.opacity = '0.5';
-
-			};
-
-			button.onclick = function () {
-
-				if ( currentSession === null ) {
-
-					const sessionInit = {
-						optionalFeatures: [
-							'local-floor',
-							'bounded-floor',
-							'hand-tracking',
-							'layers'
-						]
-					};
-
-					navigator.xr.requestSession( mode, sessionInit )
-						.then( onSessionStarted );
-
-				} else {
-
-					currentSession.end();
-
-				}
-
-			};
-
-		}
-
-		function disableButton() {
-
-			button.style.display = '';
-
-			button.style.cursor = 'auto';
-			button.style.left = 'calc(50% - 75px)';
-			button.style.width = '150px';
-
-			button.onmouseenter = null;
-			button.onmouseleave = null;
-
-			button.onclick = null;
-
-		}
-
-		function showXRNotSupported() {
-
-			disableButton();
-
-			button.textContent = 'XR NOT SUPPORTED';
-
-		}
-
-		function showXRNotAllowed( exception ) {
-
-			disableButton();
-
-			console.warn( 'Exception when trying to call xr.isSessionSupported', exception );
-
-			button.textContent = 'XR NOT ALLOWED';
-
-		}
-
-		function stylizeElement( element ) {
-
-			element.style.position = 'absolute';
-			element.style.bottom = '20px';
-			element.style.padding = '12px 6px';
-			element.style.border = '1px solid #fff';
-			element.style.borderRadius = '4px';
-			element.style.background = 'rgba(0,0,0,0.1)';
-			element.style.color = '#fff';
-			element.style.font = 'normal 13px sans-serif';
-			element.style.textAlign = 'center';
-			element.style.opacity = '0.5';
-			element.style.outline = 'none';
-			element.style.zIndex = '999';
-
-		}
-
-		if ( 'xr' in navigator ) {
-
-			button.id = 'XRButton';
-			button.style.display = 'none';
-
-			stylizeElement( button );
-
-			navigator.xr.isSessionSupported( 'immersive-ar' )
-				.then( function ( supported ) {
-
-					if ( supported ) {
-
-						showStartXR( 'immersive-ar' );
-
-					} else {
-
-						navigator.xr.isSessionSupported( 'immersive-vr' )
-							.then( function ( supported ) {
-
-								if ( supported ) {
-
-									showStartXR( 'immersive-vr' );
-
-								} else {
-
-									showXRNotSupported();
-
-								}
-
-							} ).catch( showXRNotAllowed );
-
-					}
-
-				} ).catch( showXRNotAllowed );
-
-			return button;
-
-		} else {
-
-			const message = document.createElement( 'a' );
-
-			if ( window.isSecureContext === false ) {
-
-				message.href = document.location.href.replace( /^http:/, 'https:' );
-				message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
-
-			} else {
-
-				message.href = 'https://immersiveweb.dev/';
-				message.innerHTML = 'WEBXR NOT AVAILABLE';
-
-			}
-
-			message.style.left = 'calc(50% - 90px)';
-			message.style.width = '180px';
-			message.style.textDecoration = 'none';
-
-			stylizeElement( message );
-
-			return message;
-
-		}
-
-	}
-
-}
-
-export { XRButton };

package/examples/jsm/webxr/XRControllerModelFactory.js

@@ -1,299 +0,0 @@
-import {
-	Mesh,
-	MeshBasicMaterial,
-	Object3D,
-	SphereGeometry,
-} from 'three';
-
-import { GLTFLoader } from '../loaders/GLTFLoader.js';
-
-import {
-	Constants as MotionControllerConstants,
-	fetchProfile,
-	MotionController
-} from '../libs/motion-controllers.module.js';
-
-const DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@1.0/dist/profiles';
-const DEFAULT_PROFILE = 'generic-trigger';
-
-class XRControllerModel extends Object3D {
-
-	constructor() {
-
-		super();
-
-		this.motionController = null;
-		this.envMap = null;
-
-	}
-
-	setEnvironmentMap( envMap ) {
-
-		if ( this.envMap == envMap ) {
-
-			return this;
-
-		}
-
-		this.envMap = envMap;
-		this.traverse( ( child ) => {
-
-			if ( child.isMesh ) {
-
-				child.material.envMap = this.envMap;
-				child.material.needsUpdate = true;
-
-			}
-
-		} );
-
-		return this;
-
-	}
-
-	/**
-	 * Polls data from the XRInputSource and updates the model's components to match
-	 * the real world data
-	 */
-	updateMatrixWorld( force ) {
-
-		super.updateMatrixWorld( force );
-
-		if ( ! this.motionController ) return;
-
-		// Cause the MotionController to poll the Gamepad for data
-		this.motionController.updateFromGamepad();
-
-		// Update the 3D model to reflect the button, thumbstick, and touchpad state
-		Object.values( this.motionController.components ).forEach( ( component ) => {
-
-			// Update node data based on the visual responses' current states
-			Object.values( component.visualResponses ).forEach( ( visualResponse ) => {
-
-				const { valueNode, minNode, maxNode, value, valueNodeProperty } = visualResponse;
-
-				// Skip if the visual response node is not found. No error is needed,
-				// because it will have been reported at load time.
-				if ( ! valueNode ) return;
-
-				// Calculate the new properties based on the weight supplied
-				if ( valueNodeProperty === MotionControllerConstants.VisualResponseProperty.VISIBILITY ) {
-
-					valueNode.visible = value;
-
-				} else if ( valueNodeProperty === MotionControllerConstants.VisualResponseProperty.TRANSFORM ) {
-
-					valueNode.quaternion.slerpQuaternions(
-						minNode.quaternion,
-						maxNode.quaternion,
-						value
-					);
-
-					valueNode.position.lerpVectors(
-						minNode.position,
-						maxNode.position,
-						value
-					);
-
-				}
-
-			} );
-
-		} );
-
-	}
-
-}
-
-/**
- * Walks the model's tree to find the nodes needed to animate the components and
- * saves them to the motionContoller components for use in the frame loop. When
- * touchpads are found, attaches a touch dot to them.
- */
-function findNodes( motionController, scene ) {
-
-	// Loop through the components and find the nodes needed for each components' visual responses
-	Object.values( motionController.components ).forEach( ( component ) => {
-
-		const { type, touchPointNodeName, visualResponses } = component;
-
-		if ( type === MotionControllerConstants.ComponentType.TOUCHPAD ) {
-
-			component.touchPointNode = scene.getObjectByName( touchPointNodeName );
-			if ( component.touchPointNode ) {
-
-				// Attach a touch dot to the touchpad.
-				const sphereGeometry = new SphereGeometry( 0.001 );
-				const material = new MeshBasicMaterial( { color: 0x0000FF } );
-				const sphere = new Mesh( sphereGeometry, material );
-				component.touchPointNode.add( sphere );
-
-			} else {
-
-				console.warn( `Could not find touch dot, ${component.touchPointNodeName}, in touchpad component ${component.id}` );
-
-			}
-
-		}
-
-		// Loop through all the visual responses to be applied to this component
-		Object.values( visualResponses ).forEach( ( visualResponse ) => {
-
-			const { valueNodeName, minNodeName, maxNodeName, valueNodeProperty } = visualResponse;
-
-			// If animating a transform, find the two nodes to be interpolated between.
-			if ( valueNodeProperty === MotionControllerConstants.VisualResponseProperty.TRANSFORM ) {
-
-				visualResponse.minNode = scene.getObjectByName( minNodeName );
-				visualResponse.maxNode = scene.getObjectByName( maxNodeName );
-
-				// If the extents cannot be found, skip this animation
-				if ( ! visualResponse.minNode ) {
-
-					console.warn( `Could not find ${minNodeName} in the model` );
-					return;
-
-				}
-
-				if ( ! visualResponse.maxNode ) {
-
-					console.warn( `Could not find ${maxNodeName} in the model` );
-					return;
-
-				}
-
-			}
-
-			// If the target node cannot be found, skip this animation
-			visualResponse.valueNode = scene.getObjectByName( valueNodeName );
-			if ( ! visualResponse.valueNode ) {
-
-				console.warn( `Could not find ${valueNodeName} in the model` );
-
-			}
-
-		} );
-
-	} );
-
-}
-
-function addAssetSceneToControllerModel( controllerModel, scene ) {
-
-	// Find the nodes needed for animation and cache them on the motionController.
-	findNodes( controllerModel.motionController, scene );
-
-	// Apply any environment map that the mesh already has set.
-	if ( controllerModel.envMap ) {
-
-		scene.traverse( ( child ) => {
-
-			if ( child.isMesh ) {
-
-				child.material.envMap = controllerModel.envMap;
-				child.material.needsUpdate = true;
-
-			}
-
-		} );
-
-	}
-
-	// Add the glTF scene to the controllerModel.
-	controllerModel.add( scene );
-
-}
-
-class XRControllerModelFactory {
-
-	constructor( gltfLoader = null ) {
-
-		this.gltfLoader = gltfLoader;
-		this.path = DEFAULT_PROFILES_PATH;
-		this._assetCache = {};
-
-		// If a GLTFLoader wasn't supplied to the constructor create a new one.
-		if ( ! this.gltfLoader ) {
-
-			this.gltfLoader = new GLTFLoader();
-
-		}
-
-	}
-
-	createControllerModel( controller ) {
-
-		const controllerModel = new XRControllerModel();
-		let scene = null;
-
-		controller.addEventListener( 'connected', ( event ) => {
-
-			const xrInputSource = event.data;
-
-			if ( xrInputSource.targetRayMode !== 'tracked-pointer' || ! xrInputSource.gamepad ) return;
-
-			fetchProfile( xrInputSource, this.path, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => {
-
-				controllerModel.motionController = new MotionController(
-					xrInputSource,
-					profile,
-					assetPath
-				);
-
-				const cachedAsset = this._assetCache[ controllerModel.motionController.assetUrl ];
-				if ( cachedAsset ) {
-
-					scene = cachedAsset.scene.clone();
-
-					addAssetSceneToControllerModel( controllerModel, scene );
-
-				} else {
-
-					if ( ! this.gltfLoader ) {
-
-						throw new Error( 'GLTFLoader not set.' );
-
-					}
-
-					this.gltfLoader.setPath( '' );
-					this.gltfLoader.load( controllerModel.motionController.assetUrl, ( asset ) => {
-
-						this._assetCache[ controllerModel.motionController.assetUrl ] = asset;
-
-						scene = asset.scene.clone();
-
-						addAssetSceneToControllerModel( controllerModel, scene );
-
-					},
-					null,
-					() => {
-
-						throw new Error( `Asset ${controllerModel.motionController.assetUrl} missing or malformed.` );
-
-					} );
-
-				}
-
-			} ).catch( ( err ) => {
-
-				console.warn( err );
-
-			} );
-
-		} );
-
-		controller.addEventListener( 'disconnected', () => {
-
-			controllerModel.motionController = null;
-			controllerModel.remove( scene );
-			scene = null;
-
-		} );
-
-		return controllerModel;
-
-	}
-
-}
-
-export { XRControllerModelFactory };

package/examples/jsm/webxr/XREstimatedLight.js

@@ -1,223 +0,0 @@
-import {
-	DirectionalLight,
-	Group,
-	LightProbe,
-	WebGLCubeRenderTarget
-} from 'three';
-
-class SessionLightProbe {
-
-	constructor( xrLight, renderer, lightProbe, environmentEstimation, estimationStartCallback ) {
-
-		this.xrLight = xrLight;
-		this.renderer = renderer;
-		this.lightProbe = lightProbe;
-		this.xrWebGLBinding = null;
-		this.estimationStartCallback = estimationStartCallback;
-		this.frameCallback = this.onXRFrame.bind( this );
-
-		const session = renderer.xr.getSession();
-
-		// If the XRWebGLBinding class is available then we can also query an
-		// estimated reflection cube map.
-		if ( environmentEstimation && 'XRWebGLBinding' in window ) {
-
-			// This is the simplest way I know of to initialize a WebGL cubemap in Three.
-			const cubeRenderTarget = new WebGLCubeRenderTarget( 16 );
-			xrLight.environment = cubeRenderTarget.texture;
-
-			const gl = renderer.getContext();
-
-			// Ensure that we have any extensions needed to use the preferred cube map format.
-			switch ( session.preferredReflectionFormat ) {
-
-				case 'srgba8':
-					gl.getExtension( 'EXT_sRGB' );
-					break;
-
-				case 'rgba16f':
-					gl.getExtension( 'OES_texture_half_float' );
-					break;
-
-			}
-
-			this.xrWebGLBinding = new XRWebGLBinding( session, gl );
-
-			this.lightProbe.addEventListener( 'reflectionchange', () => {
-
-				this.updateReflection();
-
-			} );
-
-		}
-
-		// Start monitoring the XR animation frame loop to look for lighting
-		// estimation changes.
-		session.requestAnimationFrame( this.frameCallback );
-
-	}
-
-	updateReflection() {
-
-		const textureProperties = this.renderer.properties.get( this.xrLight.environment );
-
-		if ( textureProperties ) {
-
-			const cubeMap = this.xrWebGLBinding.getReflectionCubeMap( this.lightProbe );
-
-			if ( cubeMap ) {
-
-				textureProperties.__webglTexture = cubeMap;
-
-				this.xrLight.environment.needsPMREMUpdate = true;
-
-			}
-
-		}
-
-	}
-
-	onXRFrame( time, xrFrame ) {
-
-		// If either this obejct or the XREstimatedLight has been destroyed, stop
-		// running the frame loop.
-		if ( ! this.xrLight ) {
-
-			return;
-
-		}
-
-		const session = xrFrame.session;
-		session.requestAnimationFrame( this.frameCallback );
-
-		const lightEstimate = xrFrame.getLightEstimate( this.lightProbe );
-		if ( lightEstimate ) {
-
-			// We can copy the estimate's spherical harmonics array directly into the light probe.
-			this.xrLight.lightProbe.sh.fromArray( lightEstimate.sphericalHarmonicsCoefficients );
-			this.xrLight.lightProbe.intensity = 1.0;
-
-			// For the directional light we have to normalize the color and set the scalar as the
-			// intensity, since WebXR can return color values that exceed 1.0.
-			const intensityScalar = Math.max( 1.0,
-				Math.max( lightEstimate.primaryLightIntensity.x,
-					Math.max( lightEstimate.primaryLightIntensity.y,
-						lightEstimate.primaryLightIntensity.z ) ) );
-
-			this.xrLight.directionalLight.color.setRGB(
-				lightEstimate.primaryLightIntensity.x / intensityScalar,
-				lightEstimate.primaryLightIntensity.y / intensityScalar,
-				lightEstimate.primaryLightIntensity.z / intensityScalar );
-			this.xrLight.directionalLight.intensity = intensityScalar;
-			this.xrLight.directionalLight.position.copy( lightEstimate.primaryLightDirection );
-
-			if ( this.estimationStartCallback ) {
-
-				this.estimationStartCallback();
-				this.estimationStartCallback = null;
-
-			}
-
-		}
-
-	}
-
-	dispose() {
-
-		this.xrLight = null;
-		this.renderer = null;
-		this.lightProbe = null;
-		this.xrWebGLBinding = null;
-
-	}
-
-}
-
-export class XREstimatedLight extends Group {
-
-	constructor( renderer, environmentEstimation = true ) {
-
-		super();
-
-		this.lightProbe = new LightProbe();
-		this.lightProbe.intensity = 0;
-		this.add( this.lightProbe );
-
-		this.directionalLight = new DirectionalLight();
-		this.directionalLight.intensity = 0;
-		this.add( this.directionalLight );
-
-		// Will be set to a cube map in the SessionLightProbe is environment estimation is
-		// available and requested.
-		this.environment = null;
-
-		let sessionLightProbe = null;
-		let estimationStarted = false;
-		renderer.xr.addEventListener( 'sessionstart', () => {
-
-			const session = renderer.xr.getSession();
-
-			if ( 'requestLightProbe' in session ) {
-
-				session.requestLightProbe( {
-
-					reflectionFormat: session.preferredReflectionFormat
-
-				} ).then( ( probe ) => {
-
-					sessionLightProbe = new SessionLightProbe( this, renderer, probe, environmentEstimation, () => {
-
-						estimationStarted = true;
-
-						// Fired to indicate that the estimated lighting values are now being updated.
-						this.dispatchEvent( { type: 'estimationstart' } );
-
-					} );
-
-				} );
-
-			}
-
-		} );
-
-		renderer.xr.addEventListener( 'sessionend', () => {
-
-			if ( sessionLightProbe ) {
-
-				sessionLightProbe.dispose();
-				sessionLightProbe = null;
-
-			}
-
-			if ( estimationStarted ) {
-
-				// Fired to indicate that the estimated lighting values are no longer being updated.
-				this.dispatchEvent( { type: 'estimationend' } );
-
-			}
-
-		} );
-
-		// Done inline to provide access to sessionLightProbe.
-		this.dispose = () => {
-
-			if ( sessionLightProbe ) {
-
-				sessionLightProbe.dispose();
-				sessionLightProbe = null;
-
-			}
-
-			this.remove( this.lightProbe );
-			this.lightProbe = null;
-
-			this.remove( this.directionalLight );
-			this.directionalLight = null;
-
-			this.environment = null;
-
-		};
-
-	}
-
-}