GitBucket
Newer
import * as THREE from 'three';
const PINCH_MAX = 0.05;
const PINCH_THRESHOLD = 0.02;
const PINCH_MIN = 0.01;
const POINTER_ADVANCE_MAX = 0.02;
const POINTER_OPACITY_MAX = 1;
const POINTER_OPACITY_MIN = 0.4;
const POINTER_FRONT_RADIUS = 0.002;
const POINTER_REAR_RADIUS = 0.01;
const POINTER_REAR_RADIUS_MIN = 0.003;
const POINTER_LENGTH = 0.035;
const POINTER_SEGMENTS = 16;
const POINTER_RINGS = 12;
const POINTER_HEMISPHERE_ANGLE = 110;
const YAXIS = new THREE.Vector3( 0, 1, 0 );
const ZAXIS = new THREE.Vector3( 0, 0, 1 );
const CURSOR_RADIUS = 0.02;
const CURSOR_MAX_DISTANCE = 1.5;
class OculusHandPointerModel extends THREE.Object3D {
constructor( hand, controller ) {
super();
this.hand = hand;
this.controller = controller;
this.motionController = null;
this.envMap = null;
this.mesh = null;
this.pointerGeometry = null;
this.pointerMesh = null;
this.pointerObject = null;
this.pinched = false;
this.attached = false;
this.cursorObject = null;
this.raycaster = null;
hand.addEventListener( 'connected', ( event ) => {
const xrInputSource = event.data;
if ( xrInputSource.hand ) {
this.visible = true;
this.xrInputSource = xrInputSource;
if ( this.pointerObject === null ) {
this.createPointer();
}
}
} );
}
_drawVerticesRing( vertices, baseVector, ringIndex ) {
const segmentVector = baseVector.clone();
for ( let i = 0; i < POINTER_SEGMENTS; i ++ ) {
segmentVector.applyAxisAngle( ZAXIS, ( Math.PI * 2 ) / POINTER_SEGMENTS );
const vid = ringIndex * POINTER_SEGMENTS + i;
vertices[ 3 * vid ] = segmentVector.x;
vertices[ 3 * vid + 1 ] = segmentVector.y;
vertices[ 3 * vid + 2 ] = segmentVector.z;
}
}
_updatePointerVertices( rearRadius ) {
const vertices = this.pointerGeometry.attributes.position.array;
// first ring for front face
const frontFaceBase = new THREE.Vector3(
POINTER_FRONT_RADIUS,
0,
- 1 * ( POINTER_LENGTH - rearRadius )
);
this._drawVerticesRing( vertices, frontFaceBase, 0 );
// rings for rear hemisphere
const rearBase = new THREE.Vector3(
Math.sin( ( Math.PI * POINTER_HEMISPHERE_ANGLE ) / 180 ) * rearRadius,
Math.cos( ( Math.PI * POINTER_HEMISPHERE_ANGLE ) / 180 ) * rearRadius,
0
);
for ( let i = 0; i < POINTER_RINGS; i ++ ) {
this._drawVerticesRing( vertices, rearBase, i + 1 );
rearBase.applyAxisAngle(
YAXIS,
( Math.PI * POINTER_HEMISPHERE_ANGLE ) / 180 / ( POINTER_RINGS * - 2 )
);
}
// 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(
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 );
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 )
);
// verticesNeedUpdate = true;
}
createPointer() {
let i, j;
const vertices = new Array(
( ( POINTER_RINGS + 1 ) * POINTER_SEGMENTS + 2 ) * 3
).fill( 0 );
// const vertices = [];
const indices = [];
this.pointerGeometry = new THREE.BufferGeometry();
this.pointerGeometry.setAttribute(
'position',
new THREE.Float32BufferAttribute( vertices, 3 )
);
this._updatePointerVertices( POINTER_REAR_RADIUS );
// construct faces to connect rings
for ( i = 0; i < POINTER_RINGS; i ++ ) {
for ( j = 0; j < POINTER_SEGMENTS - 1; j ++ ) {
indices.push(
i * POINTER_SEGMENTS + j,
i * POINTER_SEGMENTS + j + 1,
( i + 1 ) * POINTER_SEGMENTS + j
);
indices.push(
i * POINTER_SEGMENTS + j + 1,
( i + 1 ) * POINTER_SEGMENTS + j + 1,
( i + 1 ) * POINTER_SEGMENTS + j
);
}
indices.push(
( i + 1 ) * POINTER_SEGMENTS - 1,
i * POINTER_SEGMENTS,
( i + 2 ) * POINTER_SEGMENTS - 1
);
indices.push(
i * POINTER_SEGMENTS,
( i + 1 ) * POINTER_SEGMENTS,
( i + 2 ) * POINTER_SEGMENTS - 1
);
}
// construct front and rear face
const frontCenterIndex = POINTER_SEGMENTS * ( 1 + POINTER_RINGS );
const rearCenterIndex = POINTER_SEGMENTS * ( 1 + POINTER_RINGS ) + 1;
for ( i = 0; i < POINTER_SEGMENTS - 1; i ++ ) {
indices.push( frontCenterIndex, i + 1, i );
indices.push(
rearCenterIndex,
i + POINTER_SEGMENTS * POINTER_RINGS,
i + POINTER_SEGMENTS * POINTER_RINGS + 1
);
}
indices.push( frontCenterIndex, 0, POINTER_SEGMENTS - 1 );
indices.push(
rearCenterIndex,
POINTER_SEGMENTS * ( POINTER_RINGS + 1 ) - 1,
POINTER_SEGMENTS * POINTER_RINGS
);
const material = new THREE.MeshBasicMaterial();
material.transparent = true;
material.opacity = POINTER_OPACITY_MIN;
this.pointerGeometry.setIndex( indices );
this.pointerMesh = new THREE.Mesh( this.pointerGeometry, material );
this.pointerMesh.position.set( 0, 0, - 1 * POINTER_REAR_RADIUS );
this.pointerObject = new THREE.Object3D();
this.pointerObject.add( this.pointerMesh );
this.raycaster = new THREE.Raycaster();
// create cursor
const cursorGeometry = new THREE.SphereGeometry( CURSOR_RADIUS, 10, 10 );
const cursorMaterial = new THREE.MeshBasicMaterial();
cursorMaterial.transparent = true;
cursorMaterial.opacity = POINTER_OPACITY_MIN;
this.cursorObject = new THREE.Mesh( cursorGeometry, cursorMaterial );
this.pointerObject.add( this.cursorObject );
this.add( this.pointerObject );
}
_updateRaycaster() {
if ( this.raycaster ) {
const pointerMatrix = this.pointerObject.matrixWorld;
const tempMatrix = new THREE.Matrix4();
tempMatrix.identity().extractRotation( pointerMatrix );
this.raycaster.ray.origin.setFromMatrixPosition( pointerMatrix );
this.raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
}
}
_updatePointer() {
this.pointerObject.visible = this.controller.visible;
const indexTip = this.hand.joints[ 'index-finger-tip' ];
const thumbTip = this.hand.joints[ 'thumb-tip' ];
const distance = indexTip.position.distanceTo( thumbTip.position );
const position = indexTip.position
.clone()
.add( thumbTip.position )
.multiplyScalar( 0.5 );
this.pointerObject.position.copy( position );
this.pointerObject.quaternion.copy( this.controller.quaternion );
this.pinched = distance <= PINCH_THRESHOLD;
const pinchScale = ( distance - PINCH_MIN ) / ( PINCH_MAX - PINCH_MIN );
const focusScale = ( distance - PINCH_MIN ) / ( PINCH_THRESHOLD - PINCH_MIN );
if ( pinchScale > 1 ) {
this._updatePointerVertices( POINTER_REAR_RADIUS );
this.pointerMesh.position.set( 0, 0, - 1 * POINTER_REAR_RADIUS );
this.pointerMesh.material.opacity = POINTER_OPACITY_MIN;
} else if ( pinchScale > 0 ) {
const rearRadius =
( POINTER_REAR_RADIUS - POINTER_REAR_RADIUS_MIN ) * pinchScale +
POINTER_REAR_RADIUS_MIN;
this._updatePointerVertices( rearRadius );
if ( focusScale < 1 ) {
this.pointerMesh.position.set(
0,
0,
- 1 * rearRadius - ( 1 - focusScale ) * POINTER_ADVANCE_MAX
);
this.pointerMesh.material.opacity =
POINTER_OPACITY_MIN +
( 1 - focusScale ) * ( POINTER_OPACITY_MAX - POINTER_OPACITY_MIN );
} else {
this.pointerMesh.position.set( 0, 0, - 1 * rearRadius );
this.pointerMesh.material.opacity = POINTER_OPACITY_MIN;
}
} else {
this._updatePointerVertices( POINTER_REAR_RADIUS_MIN );
this.pointerMesh.position.set(
0,
0,
- 1 * POINTER_REAR_RADIUS_MIN - POINTER_ADVANCE_MAX
);
this.pointerMesh.material.opacity = POINTER_OPACITY_MAX;
}
this.cursorObject.material.opacity = this.pointerMesh.material.opacity;
}
updateMatrixWorld( force ) {
super.updateMatrixWorld( force );
if ( this.pointerGeometry ) {
this._updatePointer();
this._updateRaycaster();
}
}
isPinched() {
return this.pinched;
}
setAttached( attached ) {
this.attached = attached;
}
isAttached() {
return this.attached;
}
intersectObject( object, recursive = true ) {
if ( this.raycaster ) {
return this.raycaster.intersectObject( object, recursive );
}
}
intersectObjects( objects, recursive = true ) {
if ( this.raycaster ) {
return this.raycaster.intersectObjects( objects, recursive );
}
}
checkIntersections( objects, recursive = false ) {
if ( this.raycaster && ! this.attached ) {
const intersections = this.raycaster.intersectObjects( objects, recursive );
const direction = new THREE.Vector3( 0, 0, - 1 );
if ( intersections.length > 0 ) {
const intersection = intersections[ 0 ];
const distance = intersection.distance;
this.cursorObject.position.copy( direction.multiplyScalar( distance ) );
} else {
this.cursorObject.position.copy( direction.multiplyScalar( CURSOR_MAX_DISTANCE ) );
}
}
}
setCursor( distance ) {
const direction = new THREE.Vector3( 0, 0, - 1 );
if ( this.raycaster && ! this.attached ) {
this.cursorObject.position.copy( direction.multiplyScalar( distance ) );
}
}
}
export { OculusHandPointerModel };