Examples: Remove usage of `THREE` namespace. (#29748)

examples/jsm/tsl/lighting/TiledLightsNode.js

@@ -3,7 +3,7 @@ import {
 	Fn, If, Return, textureLoad, instanceIndex, screenCoordinate, directPointLight
 } from 'three/tsl';
 
-import * as THREE from 'three';
+import { DataTexture, FloatType, LightsNode, NodeUpdateType, RGBAFormat, StorageBufferAttribute, Vector2, Vector3 } from 'three';
 
 export const circleIntersectsAABB = /*@__PURE__*/ Fn( ( [ circleCenter, radius, minBounds, maxBounds ] ) => {
 
@@ -31,10 +31,10 @@ export const circleIntersectsAABB = /*@__PURE__*/ Fn( ( [ circleCenter, radius,
 	]
 } );
 
-const _vector3 = /*@__PURE__*/ new THREE.Vector3();
-const _size = /*@__PURE__*/ new THREE.Vector2();
+const _vector3 = /*@__PURE__*/ new Vector3();
+const _size = /*@__PURE__*/ new Vector2();
 
-class TiledLightsNode extends THREE.LightsNode {
+class TiledLightsNode extends LightsNode {
 
 	static get type() {
 
@@ -60,11 +60,11 @@ class TiledLightsNode extends THREE.LightsNode {
 
 		this.lightsCount = uniform( 0, 'int' );
 		this.tileLightCount = 8;
-		this.screenSize = uniform( new THREE.Vector2() );
+		this.screenSize = uniform( new Vector2() );
 		this.cameraProjectionMatrix = uniform( 'mat4' );
 		this.cameraViewMatrix = uniform( 'mat4' );
 
-		this.updateBeforeType = THREE.NodeUpdateType.RENDER;
+		this.updateBeforeType = NodeUpdateType.RENDER;
 
 	}
 
@@ -281,17 +281,17 @@ class TiledLightsNode extends THREE.LightsNode {
 
 		const { tileSize, maxLights } = this;
 
-		const bufferSize = new THREE.Vector2( width, height );
+		const bufferSize = new Vector2( width, height );
 		const lineSize = Math.floor( bufferSize.width / tileSize );
 		const count = Math.floor( ( bufferSize.width * bufferSize.height ) / tileSize );
 
 		// buffers
 
 		const lightsData = new Float32Array( maxLights * 4 * 2 ); // 2048 lights, 4 elements(rgba), 2 components, 1 component per line (position, distance, color, decay)
-		const lightsTexture = new THREE.DataTexture( lightsData, lightsData.length / 8, 2, THREE.RGBAFormat, THREE.FloatType );
+		const lightsTexture = new DataTexture( lightsData, lightsData.length / 8, 2, RGBAFormat, FloatType );
 
 		const lightIndexesArray = new Int32Array( count * 4 * 2 );
-		const lightIndexesAttribute = new THREE.StorageBufferAttribute( lightIndexesArray, 4 );
+		const lightIndexesAttribute = new StorageBufferAttribute( lightIndexesArray, 4 );
 		const lightIndexes = storageObject( lightIndexesAttribute, 'ivec4', lightIndexesAttribute.count ).label( 'lightIndexes' );
 
 		// compute

examples/jsm/webxr/OculusHandPointerModel.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { BufferGeometry, Float32BufferAttribute, Matrix4, Mesh, MeshBasicMaterial, Object3D, Raycaster, SphereGeometry, Vector3 } from 'three';
 
 const PINCH_MAX = 0.05;
 const PINCH_THRESHOLD = 0.02;
@@ -13,13 +13,13 @@ const POINTER_LENGTH = 0.035;
 const POINTER_SEGMENTS = 16;
 const POINTER_RINGS = 12;
 const POINTER_HEMISPHERE_ANGLE = 110;
-const YAXIS = /* @__PURE__ */ new THREE.Vector3( 0, 1, 0 );
-const ZAXIS = /* @__PURE__ */ new THREE.Vector3( 0, 0, 1 );
+const YAXIS = /* @__PURE__ */ new Vector3( 0, 1, 0 );
+const ZAXIS = /* @__PURE__ */ new Vector3( 0, 0, 1 );
 
 const CURSOR_RADIUS = 0.02;
 const CURSOR_MAX_DISTANCE = 1.5;
 
-class OculusHandPointerModel extends THREE.Object3D {
+class OculusHandPointerModel extends Object3D {
 
 	constructor( hand, controller ) {
 
@@ -96,7 +96,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 
 		const vertices = this.pointerGeometry.attributes.position.array;
 		// first ring for front face
-		const frontFaceBase = new THREE.Vector3(
+		const frontFaceBase = new Vector3(
 			POINTER_FRONT_RADIUS,
 			0,
 			- 1 * ( POINTER_LENGTH - rearRadius )
@@ -104,7 +104,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 		this._drawVerticesRing( vertices, frontFaceBase, 0 );
 
 		// rings for rear hemisphere
-		const rearBase = new THREE.Vector3(
+		const rearBase = new Vector3(
 			Math.sin( ( Math.PI * POINTER_HEMISPHERE_ANGLE ) / 180 ) * rearRadius,
 			Math.cos( ( Math.PI * POINTER_HEMISPHERE_ANGLE ) / 180 ) * rearRadius,
 			0
@@ -122,7 +122,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 		// front and rear face center vertices
 		const frontCenterIndex = POINTER_SEGMENTS * ( 1 + POINTER_RINGS );
 		const rearCenterIndex = POINTER_SEGMENTS * ( 1 + POINTER_RINGS ) + 1;
-		const frontCenter = new THREE.Vector3(
+		const frontCenter = new Vector3(
 			0,
 			0,
 			- 1 * ( POINTER_LENGTH - rearRadius )
@@ -130,14 +130,14 @@ class OculusHandPointerModel extends THREE.Object3D {
 		vertices[ frontCenterIndex * 3 ] = frontCenter.x;
 		vertices[ frontCenterIndex * 3 + 1 ] = frontCenter.y;
 		vertices[ frontCenterIndex * 3 + 2 ] = frontCenter.z;
-		const rearCenter = new THREE.Vector3( 0, 0, rearRadius );
+		const rearCenter = new Vector3( 0, 0, rearRadius );
 		vertices[ rearCenterIndex * 3 ] = rearCenter.x;
 		vertices[ rearCenterIndex * 3 + 1 ] = rearCenter.y;
 		vertices[ rearCenterIndex * 3 + 2 ] = rearCenter.z;
 
 		this.pointerGeometry.setAttribute(
 			'position',
-			new THREE.Float32BufferAttribute( vertices, 3 )
+			new Float32BufferAttribute( vertices, 3 )
 		);
 		// verticesNeedUpdate = true;
 
@@ -151,11 +151,11 @@ class OculusHandPointerModel extends THREE.Object3D {
 		).fill( 0 );
 		// const vertices = [];
 		const indices = [];
-		this.pointerGeometry = new THREE.BufferGeometry();
+		this.pointerGeometry = new BufferGeometry();
 
 		this.pointerGeometry.setAttribute(
 			'position',
-			new THREE.Float32BufferAttribute( vertices, 3 )
+			new Float32BufferAttribute( vertices, 3 )
 		);
 
 		this._updatePointerVertices( POINTER_REAR_RADIUS );
@@ -213,27 +213,27 @@ class OculusHandPointerModel extends THREE.Object3D {
 			POINTER_SEGMENTS * POINTER_RINGS
 		);
 
-		const material = new THREE.MeshBasicMaterial();
+		const material = new MeshBasicMaterial();
 		material.transparent = true;
 		material.opacity = POINTER_OPACITY_MIN;
 
 		this.pointerGeometry.setIndex( indices );
 
-		this.pointerMesh = new THREE.Mesh( this.pointerGeometry, material );
+		this.pointerMesh = new Mesh( this.pointerGeometry, material );
 
 		this.pointerMesh.position.set( 0, 0, - 1 * POINTER_REAR_RADIUS );
-		this.pointerObject = new THREE.Object3D();
+		this.pointerObject = new Object3D();
 		this.pointerObject.add( this.pointerMesh );
 
-		this.raycaster = new THREE.Raycaster();
+		this.raycaster = new Raycaster();
 
 		// create cursor
-		const cursorGeometry = new THREE.SphereGeometry( CURSOR_RADIUS, 10, 10 );
-		const cursorMaterial = new THREE.MeshBasicMaterial();
+		const cursorGeometry = new SphereGeometry( CURSOR_RADIUS, 10, 10 );
+		const cursorMaterial = new MeshBasicMaterial();
 		cursorMaterial.transparent = true;
 		cursorMaterial.opacity = POINTER_OPACITY_MIN;
 
-		this.cursorObject = new THREE.Mesh( cursorGeometry, cursorMaterial );
+		this.cursorObject = new Mesh( cursorGeometry, cursorMaterial );
 		this.pointerObject.add( this.cursorObject );
 
 		this.add( this.pointerObject );
@@ -245,7 +245,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 		if ( this.raycaster ) {
 
 			const pointerMatrix = this.pointerObject.matrixWorld;
-			const tempMatrix = new THREE.Matrix4();
+			const tempMatrix = new Matrix4();
 			tempMatrix.identity().extractRotation( pointerMatrix );
 			this.raycaster.ray.origin.setFromMatrixPosition( pointerMatrix );
 			this.raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
@@ -372,7 +372,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 		if ( this.raycaster && ! this.attached ) {
 
 			const intersections = this.raycaster.intersectObjects( objects, recursive );
-			const direction = new THREE.Vector3( 0, 0, - 1 );
+			const direction = new Vector3( 0, 0, - 1 );
 			if ( intersections.length > 0 ) {
 
 				const intersection = intersections[ 0 ];
@@ -391,7 +391,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 
 	setCursor( distance ) {
 
-		const direction = new THREE.Vector3( 0, 0, - 1 );
+		const direction = new Vector3( 0, 0, - 1 );
 		if ( this.raycaster && ! this.attached ) {
 
 			this.cursorObject.position.copy( direction.multiplyScalar( distance ) );

examples/jsm/webxr/Text2D.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Texture } from 'three';
 
 function createText( message, height ) {
 
@@ -17,20 +17,20 @@ function createText( message, height ) {
 	context.fillStyle = '#ffffff';
 	context.fillText( message, textWidth / 2, textHeight / 2 );
 
-	const texture = new THREE.Texture( canvas );
+	const texture = new Texture( canvas );
 	texture.needsUpdate = true;
 
-	const material = new THREE.MeshBasicMaterial( {
+	const material = new MeshBasicMaterial( {
 		color: 0xffffff,
-		side: THREE.DoubleSide,
+		side: DoubleSide,
 		map: texture,
 		transparent: true,
 	} );
-	const geometry = new THREE.PlaneGeometry(
+	const geometry = new PlaneGeometry(
 		( height * textWidth ) / textHeight,
 		height
 	);
-	const plane = new THREE.Mesh( geometry, material );
+	const plane = new Mesh( geometry, material );
 	return plane;
 
 }