From 3f7243bb670f15681daf411ba743f4b53481c109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E7=82=B3=E6=9D=83?= <695601626@qq.com> Date: Fri, 25 Oct 2024 17:46:06 +0800 Subject: [PATCH] Examples: Remove usage of `THREE` namespace. (#29748) --- examples/jsm/tsl/lighting/TiledLightsNode.js | 18 ++++----- examples/jsm/webxr/OculusHandPointerModel.js | 42 ++++++++++---------- examples/jsm/webxr/Text2D.js | 12 +++--- 3 files changed, 36 insertions(+), 36 deletions(-) diff --git a/examples/jsm/tsl/lighting/TiledLightsNode.js b/examples/jsm/tsl/lighting/TiledLightsNode.js index 49cf9b976a3ec3..6d4f29b10d4847 100644 --- a/examples/jsm/tsl/lighting/TiledLightsNode.js +++ b/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 diff --git a/examples/jsm/webxr/OculusHandPointerModel.js b/examples/jsm/webxr/OculusHandPointerModel.js index 422764cd7aefd3..5fb0f2bd34327e 100644 --- a/examples/jsm/webxr/OculusHandPointerModel.js +++ b/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 ) ); diff --git a/examples/jsm/webxr/Text2D.js b/examples/jsm/webxr/Text2D.js index d50c06c9766ec1..d8437b39a269c3 100644 --- a/examples/jsm/webxr/Text2D.js +++ b/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; }