Skip to content

Examples: Remove usage of THREE namespace. #29748

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 25, 2024
Merged

Examples: Remove usage of THREE namespace. #29748

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions examples/jsm/tsl/lighting/TiledLightsNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ] ) => {

Expand Down Expand Up @@ -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() {

Expand All @@ -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;

}

Expand Down Expand Up @@ -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
Expand Down
42 changes: 21 additions & 21 deletions examples/jsm/webxr/OculusHandPointerModel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 ) {

Expand Down Expand Up @@ -96,15 +96,15 @@ 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 )
);
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
Expand All @@ -122,22 +122,22 @@ 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 )
);
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;

Expand All @@ -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 );
Expand Down Expand Up @@ -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 );
Expand All @@ -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 );
Expand Down Expand Up @@ -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 ];
Expand All @@ -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 ) );
Expand Down
12 changes: 6 additions & 6 deletions examples/jsm/webxr/Text2D.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as THREE from 'three';
import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Texture } from 'three';

function createText( message, height ) {

Expand All @@ -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;

}
Expand Down