three#BoxBufferGeometry JavaScript Examples

Sky = function () {

	var shader = Sky.SkyShader;

	var material = new ShaderMaterial( {
		fragmentShader: shader.fragmentShader,
		vertexShader: shader.vertexShader,
		uniforms: UniformsUtils.clone( shader.uniforms ),
		side: BackSide,
		depthWrite: false
	} );

	Mesh.call( this, new BoxBufferGeometry( 1, 1, 1 ), material );

}

CubeTexturePass = function (camera, envMap, opacity) {
    Pass.call(this);

    this.camera = camera;

    this.needsSwap = false;

    this.cubeShader = ShaderLib["cube"];
    this.cubeMesh = new Mesh(
        new BoxBufferGeometry(10, 10, 10),
        new ShaderMaterial({
            uniforms: this.cubeShader.uniforms,
            vertexShader: this.cubeShader.vertexShader,
            fragmentShader: this.cubeShader.fragmentShader,
            depthTest: false,
            depthWrite: false,
            side: BackSide,
        })
    );

    Object.defineProperty(this.cubeMesh.material, "envMap", {
        get: function () {
            return this.uniforms.envMap.value;
        },
    });

    this.envMap = envMap;
    this.opacity = opacity !== undefined ? opacity : 1.0;

    this.cubeScene = new Scene();
    this.cubeCamera = new PerspectiveCamera();
    this.cubeScene.add(this.cubeMesh);
}

constructor (game) {
    this.game = game
    this.texture = this.game.al.get('blocksAtlasSnap')
    this.texture.magFilter = NearestFilter
    this.cursor = new Mesh(
      new BoxBufferGeometry(1.001, 1.001, 1.001),
      new MeshBasicMaterial({
        map: this.texture,
        transparent: true
      })
    )
    this.lastPos = []
    this.cursorOut = new LineSegments(
      new EdgesGeometry(this.cursor.geometry),
      new LineBasicMaterial({
        color: 0x000000
      })
    )
    this.game.scene.add(this.cursor, this.cursorOut)
    this.uv = {}
    this.isDigging = false
    this.done = true
    this.setState(0)
  }

////////////////
   //            //
  //   Protos   //
 //            //
////////////////


//  Let’s define all the methods we want to
//  glob on to any object that we “make handy”.
//  We’ll store them in Handy’s ‘protos’ object.
//  https://en.wikipedia.org/wiki/Prototype-based_programming

Object.assign( Handy.protos, {


	//  Traverse down this THREE.Group to find
	//  a child with an ‘xrInputSource’ property,
	//  which should have a ‘handedness’ property.
	//  This will both assign that value to this Handy object
	// (if such a value is found)
	//  and return the current ‘handedness’ of this Handy object.

	//  NOTE: Is there a more efficient way to do this??

	checkHandedness: function(){

		const hand = this
		this.traverse( function( obj ){

			if( obj.xrInputSource !== undefined &&
				obj.xrInputSource.handedness !== undefined ){

				hand.handedness = obj.xrInputSource.handedness
				hand.name = 'hand '+ hand.handedness			
			}
		})
		return this.handedness
	},


	//  Find the distance (in CENTIMETERS!) between two joints
	//  by using joint name Strings.
	//  You can use the constant style ‘INDEX_PHALANX_INTERMEDIATE’
	//  or a more friendly lowercase-and-spaces style:
	// “index phalanx intermediate”. Both are valid styles here.
	//  This makes writing the pose detection logic super legible.
	//  Here’s some pinch detection logic:
	//
	//      return this.distanceBetweenJoints(
	//
	//          'index phalanx tip',
	// 		    'thumb phalanx tip'
	//	
	//       ) < 3
	//
	//  Easy, right?! Now you can write your own! :)

	distanceBetweenJoints: function( jointNameA, jointNameB ){

		if( this.joints.length === 0 ) return NaN

		const
		hand = this,
		[ jointA, jointB ] = [ jointNameA, jointNameB ]
		.map( function( name ){

			return hand.joints[ 

				// Handy[ name.toUpperCase().replace( /\s+/g, '_' )]
				name.toLowerCase().replace( /\s+/g, '-' )
			]
		})

		if( jointA.position && 
			jointB.position &&
			( !jointA.position.equals( jointB.position ))){

			return jointA.position.distanceTo( jointB.position ) * 100
		}
		else return NaN
	},


	//  Find the angle (in DEGREES!) from a finger’s base to its tip.
	//  Here’s how to check if your index finger is extended:
	//
	//      return this.digitAngle( 'index' ) < 20
	//  
	//  Not bad, eh?

	digitAngle: function( fingerName ){

		fingerName = fingerName.toLowerCase()

		const
		fingerTip = fingerName === 'thumb' ? 
			this.joints[ 'thumb-tip' ] :
			this.joints[ fingerName +'-finger-tip' ],
		fingerProximal = fingerName === 'thumb' ?
			this.joints[ 'thumb-phalanx-proximal' ] :
			this.joints[ fingerName +'-finger-phalanx-proximal' ]

		if( fingerTip && 
			fingerProximal && 
			fingerTip.quaternion &&
			fingerProximal.quaternion ){

			return MathUtils.radToDeg( 

				fingerProximal.quaternion.angleTo( fingerTip.quaternion )
			)
		}
		return NaN
	},


	//  Some useful helper functions that
	//  check the angle from digit base to digit tip
	//  to determine if that digit is extended
	//  or contracted.

	digitIsExtended: function( digitName ){

		return this.digitAngle( digitName ) < 45
	},
	digitIsContracted: function( digitName ){

		return this.digitAngle( digitName ) > 110
	},


	//  Useful for assessing 
	//  what values you may want to use
	//  in your detection functions.

	reportDigits: function(){

		const hand = this
		Handy.digitNames
		.forEach( function( digitName ){

			const 
			proximalName = digitName === 'thumb' ?
				'thumb-phalanx-proximal' :
				digitName +'-finger-phalanx-proximal',
			tipName = digitName === 'thumb' ?
				'thumb-tip' : 
				digitName + '-finger-tip',
			distance = hand.distanceBetweenJoints(

				proximalName,
				tipName
			),
			digitAngle = hand.digitAngle( digitName )

			console.log( 

				hand.handedness, 
				digitName +'.', 
				'angle:',
				Math.round( digitAngle )+'˚',
				'distance:',
				( Math.round( distance * 10 ) / 10 ) +'cm',
				hand.digitIsExtended( digitName ) ?
					'is extended' :
					'is contracted'
			)
		})
	},






	    ////////////////
	   //            //
	  //   Record   //
	 //            //
	////////////////


	//  Take a snapshot of this hand’s pose.

	readLivePoseData: function(){

		const 
		hand  = this,
		wrist = hand.joints[ 'wrist' ],
		jointPositions    = [],
		digitTipPositions = [],


		//  Take a position in global space,
		//  and make it relative to the wrist joint position
		//  also taking into account the wrist’s rotation.
		// (So we cannot simply subtract position vectors here!
		//  We must multiply the full transform matrices!)
		//  Also, let’s round these positions to the nearest
		//  millimeter to make things tidier to look at
		//  and save string space when stored as JSON data.

		preparePosition = function( joint ){

			const 
			jointMatrix = joint.matrix
			.clone()
			.premultiply( 

				// new THREE.Matrix4().copy( wrist.matrixWorld.invert() )
				wrist.matrixWorld.clone().invert()
			)

			
			//  Extract the X, Y, Z positions from the resulting matrix
			//  and return this as a flat Array
			//  with distances rounded to the nearest millimeter.
			
			return [ 

				Math.round( jointMatrix.elements[ 12 ] * 1000 ),
				Math.round( jointMatrix.elements[ 13 ] * 1000 ),
				Math.round( jointMatrix.elements[ 14 ] * 1000 )
			]
		},


		//  Store head (camera) position relative to the wrist. 
		//  In the future we’ll use this to identify hand gestures
		//  that relate to the position of the head / body.

		//  NOTE: Camera position is unreliable because of XR camera rig.
		//  Need to come back and investigate alternatives.

		headPosition = 
			wrist !== undefined && !wrist.position.equals( Handy.VECTOR3_ZERO )
			? preparePosition( hand.camera )
			: null,
		headRotation = 
			headPosition === null
			? null
			: hand.camera.quaternion.toArray()


		//  Store the positions of each joint relative to the wrist.
		//  Note that if a position is not “ready” 
		//  then that entry in the Array will be undefined.
		//  This is important during pose detection:
		//  Undefined elements will NOT accrue “distance”, ie.
		//  If the pinky finger positions don’t matter to a particular
		//  hand pose, you can just delete those entries!

		
		Object.values( hand.joints )
		.forEach( function( joint, i ){

			// console.log( i, 'joint', joint )

			if( joint !== undefined &&
				joint.position !== undefined &&
				joint.position.equals( Handy.VECTOR3_ZERO ) === false ){

				const preparedPosition = preparePosition( joint )
				jointPositions[ i ] = preparedPosition

				if( Handy.isDigitTipIndex( i )){

					digitTipPositions.push( preparedPosition )
				}
			}
		})
		
		// for( let i = 0; i < hand.joints.length; i ++ ){
			// const joint = hand.joints[ i ]
		// 	if( joint !== undefined &&
		// 		joint.position !== undefined &&
		// 		joint.position.equals( Handy.VECTOR3_ZERO ) === false ){

		// 		const preparedPosition = preparePosition( joint )
		// 		jointPositions[ i ] = preparedPosition

		// 		if( Handy.isDigitTipIndex( i )){

		// 			digitTipPositions.push( preparedPosition )
		// 		}
		// 	}
		// }


		//  Package it up and send it off.

		return { 

			headPosition,
			headRotation,
			jointPositions,
			digitTipPositions
		}
	},


	//  Grab a snapshot of the live hand pose,
	//  output its data to the JavaScript console
	// (so you can copy and paste it into your poses file),
	//  and also add it to the poses list
	//  so you can query for it immediately :)

	recordLivePose: function( name, showIt ){

		const 
		hand = this,
		handedness = hand.checkHandedness(),
		pose = Object.assign(

			{
				names: [ name ],
				handedness,				
				handyRevision: Handy.REVISION,
				time: Date.now()
			},
			hand.readLivePoseData()
		)
		
		console.log( '\n\nPOSE DEFINITION\n\n'+ JSON.stringify( pose ) +',\n\n\n' )
		Handy.poses[ handedness ].push( pose )
		if( showIt ) hand.showPose( pose, hand.joints[ 0 ].matrixWorld )
		return pose
	},


	//  Did your pose record correctly just now?
	//  This is a quick and dirty way to see 
	// (within XR!) if it’s roughly correct.

	showPose: function( pose, matrix ){

		const
		hand  = this,
		handRoot = new Object3D(),
		size = 0.02

		pose.jointPositions
		.forEach( function( position ){

			const box = new Mesh(
				new BoxBufferGeometry( size, size, size ),
				new MeshBasicMaterial()
			)
			box.position.fromArray( position ).multiplyScalar( 0.001 )
			if( matrix !== undefined ){
			
				box.updateMatrix()
				box.matrix.multiply( matrix )
			}
			else {

				box.position.y += 1
			}
			handRoot.add( box )
		})
		handRoot.position.copy( hand.position )
		hand.camera.parent.add( handRoot )
	},


	//  We can also show previously recorded poses.

	showPoseByName: function( poseName, matrix ){

		const
		hand  = this,
		pose = Handy.poses[ hand.handedness ]
		.find( function( pose ){ 

			return pose.names.includes( poseName )
		})

		if( pose ) hand.showPose( pose, matrix )
	},






	    ////////////////
	   //            //
	  //   Search   //
	 //            //
	////////////////


	//  Upon casually discussing Handy with a good friend of mine,
	//  Robert Gerard Pietrusko (http://warning-office.org),
	//  he suggessted I try recording hand poses and measuring the
	//  Euclidean distance between them.
	//  https://en.wikipedia.org/wiki/K-means_clustering
	//  This turned out to be very efficient! Sort of like Word2Vec,
	//  but for hands. https://en.wikipedia.org/wiki/Word2vec
	//
 	//  Question is, do we try Cosine Distance in the future?
	//  https://cmry.github.io/notes/euclidean-v-cosine

	livePoseData: [],
	searchLoopBeganAt: null,
	searchLoopsCounter: 0,
	searchLoopsCounterMax: 0,
	searchPoseIndex: 0,
	searchResultsBuffer:  [],
	searchResults: [],
	searchResultsHistory: [],//  For future use. (Will add gesture recognition.)
	searchMethod: 'jointPositions',
	lastSearchResult: { name: 'null' },

	search: function(){
		
		const 
		hand   = this,
		handedness = hand.checkHandedness(),
		poses = Handy.poses[ handedness ],
		method = hand.searchMethod


		//  Is our handedness undefined?
		//  Do we have zero poses to detect?
		//  If so, bail immediately!

		if( poses === undefined || poses.length === 0 ) return


		//  We’re going to do some serious “Array clutching” here.
		//  That means we may NOT finish looping through the Array
		//  before we “run out of time.” Why do this? Because if we’re
		//  running at 72fps or 90fps, etc. and we really only need
		//  to do a full poses search a few times per second,
		//  then we have render loops to spare and we ought to get
		//  out of the way as quickly as possible so that YOU can
		//  use that render loop time for yourself :)

		//  If you want more performance than this, then it’s time
		//  for Web Workers. But for now this seems to do the trick.
		//  https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

		hand.searchLoopBeganAt = window.performance.now()
		for( let 
			
			i = hand.searchPoseIndex; 
			i < poses.length; 
			i ++ 
		){
		

			//  If we’re just beginning a new search
			//  we need to reset our results buffer
			//  and ask for new live hand pose data.

			if( i === 0 ){

				hand.searchLoopsCounter = 0
				hand.searchResultsBuffer = []
				hand.livePoseData = hand.readLivePoseData()


				//  If there’s no joint position data
				//  or if the wrist position of this hand is EXACTLY zero 
				// (in which case it’s likely ALL joint positions are zero)
				//  then this live data is useless. (So bail!)

				if( hand.livePoseData.jointPositions.length === 0 ||
					( 
						hand.livePoseData.jointPositions[ 0 ][ 0 ] === 0 &&
						hand.livePoseData.jointPositions[ 0 ][ 1 ] === 0 &&
						hand.livePoseData.jointPositions[ 0 ][ 2 ] === 0
					)){

					return
				}


				//  These flags assert that we are 
				//  NOT taking the square root of each distance.
				//  As this might change in the future
				//  I wanted a way for you to query / write logic
				//  around that.
				
				hand.searchResultsBuffer.distancesAreSquared = true
				hand.searchResultsBuffer.distancesAreRooted  = false
			}
	

			//  Go about our normal business.
			//  eg, evaluate the distance between this hand pose
			//  and the current-ish state of our real hand.

			const pose = poses[ i ]


			//  Currently we have two methods for detecting poses.
			// (Down from FOUR in a previous iteration! Sadly,
			//  the angles between wrist quaternion and digit tip
			//  weren’t sufficient once we added all of ASL.)
			//  We may eventually remove this digitTipPositions method
			//  as [all] jointPositions is obviously more accurate
			//  and seems speedy enough. 

			if( method === 'digitTipPositions' ){
				
				hand.searchResultsBuffer.push({

					pose,
					distance: pose.digitTipPositions
					.reduce( function( distance, digitTipPosition, i ){

						if( digitTipPosition.length !== undefined && 
							hand.livePoseData.digitTipPositions[ i ] !== undefined &&
							hand.livePoseData.digitTipPositions[ i ].length > 0 ){


							//  The “correct” way to do this is to take the square root
							//  of this sum. But find a square root is inherently slow.
							//  Thankfully we can do just as well by NOT taking the root.
							//  I leave it here (commented out) for your edification ;)

							distance += //Math.sqrt(

								Math.pow( digitTipPosition[ 0 ] - hand.livePoseData.digitTipPositions[ i ][ 0 ], 2 ) +
								Math.pow( digitTipPosition[ 1 ] - hand.livePoseData.digitTipPositions[ i ][ 1 ], 2 ) +
								Math.pow( digitTipPosition[ 2 ] - hand.livePoseData.digitTipPositions[ i ][ 2 ], 2 )
							//)
						}
						return distance

					}, 0 )
				})
			}
			else if( method === 'jointPositions' ){

				hand.searchResultsBuffer.push({

					pose,
					distance: pose.jointPositions
					.reduce( function( distance, jointPosition, i ){

						if( jointPosition.length !== undefined && 
							hand.livePoseData.jointPositions[ i ] !== undefined &&
							hand.livePoseData.jointPositions[ i ].length > 0 ){


							//  The “correct” way to do this is to take the square root
							//  of this sum. But find a square root is inherently slow.
							//  Thankfully we can do just as well by NOT taking the root.
							//  I leave it here (commented out) for your edification ;)

							distance += //Math.sqrt(

								Math.pow( jointPosition[ 0 ] - hand.livePoseData.jointPositions[ i ][ 0 ], 2 ) +
								Math.pow( jointPosition[ 1 ] - hand.livePoseData.jointPositions[ i ][ 1 ], 2 ) +
								Math.pow( jointPosition[ 2 ] - hand.livePoseData.jointPositions[ i ][ 2 ], 2 )
							//)
						}
						return distance

					}, 0 )
				})
			}


			//  Let’s keep track of how many loops it’s taking
			//  to finish searching through our whole poses library;
			//  accessible with something like:
			//  Handy.hands.getLeft().searchLoopsCounterMax

			hand.searchLoopsCounter ++
			hand.searchLoopsCounterMax = Math.max(

				hand.searchLoopsCounterMax,
				hand.searchLoopsCounter
			)


			//  Are we done? (If so, shut it down.)

			if( i === poses.length - 1 ){

				hand.searchResults = hand.searchResultsBuffer
				.sort( function( a, b ){

					return a.distance - b.distance
				})
				const searchResult = hand.searchResults[ 0 ]


				//   Does this search result differ from the previous one?

				if( hand.lastSearchResult.pose !== searchResult.pose ){

					if( hand.lastSearchResult && hand.lastSearchResult.pose ){


						//  Fire custom events.
						//  We need to fire events for each name
						//  that is associated with this pose.
						//  Why would there be multiple names??
						//  For example, “ASL_2” is the same as “Peace”.
						//  Someone unfamiliar with American Sign Language
						//  and only concerned with recognizing “peace”
						//  ought to have that convenience.
						// (And the other way ’round as well!)

						hand.lastSearchResult.pose.names
						.forEach( function( poseName ){

							hand.dispatchEvent({

								type: poseName +' pose ended', 
								hand,
								pose: hand.lastSearchResult.pose,
								

								//  Open question here:
								//  Should this “distance” property be from this pose’s
								//  previous top-result status (as it is currently)
								//  or should it be from its new not-top-result status?
	
								distance: hand.lastSearchResult.distance,
								message:  hand.handedness.toUpperCase() +
									' hand “'+ poseName +'” pose ended'+
									' at a Euclidean distance of '+ hand.lastSearchResult.distance +'mm.'
							})
						})

						
						//  Should you need it, 
						//  here’s an easy way to get a “from / to” alert.
						//  NOTE: Do we need to include distances in here too?

						hand.dispatchEvent({

							type: 'pose changed', 
							hand,
							resultWas: hand.lastSearchResult,
							resultIs:  searchResult,
							message:   hand.handedness.toUpperCase() +
								' hand pose changed from '+ 
								JSON.stringify( hand.lastSearchResult.pose.names ) +
								' to '+ 
								JSON.stringify( searchResult.pose.names ) +'.'
						})
					}
					

					searchResult.pose.names
					.forEach( function( poseName ){

						hand.dispatchEvent({

							type: poseName +' pose began', 
							hand,
							pose:     searchResult.pose,
							distance: searchResult.distance,
							message:  hand.handedness.toUpperCase() +
								' hand “'+ poseName +'” pose began'+
								' at a Euclidean distance of '+ searchResult.distance +'mm.'
						})
					})


					//  We’re ready to make it final.
					//  Replace the prior searh result 
					//  with the current search result.

					hand.lastSearchResult = searchResult
				}
				else {

					// console.log( 'Same hand pose as last time' )
				}
				

				//  Get things ready for next search.

				hand.searchIndex = 0
				hand.searchResultsBuffer = []


				//  Bail both from this local “for” loop 
				//  and from this entire function.

				return searchResult
			}

		
			//  If we’re not done with our search, 
			//  check if this search is taking too long per update() loop.

			else {


				//  If we’re taking too long
				//  let’s note what index we should start at next time
				//  and bail for now.

				if( window.performance.now() 
					- hand.searchLoopBeganAt 
					> Handy.searchLoopDurationLimit ){

					hand.findPoseIndex = i + 1
					break
				}
			}
		}
	},


	//  If the pose is the top search result
	// (or it’s in the results list above a given distance threshold)
	//  return the result itself so it includes 
	//  all of the pose data as well as distance.
	//  Otherwise return false.

	//  NOTE: This “threshold” argument is tricky
	//  because search() calculates distance in mm
	//  from the recorded model.
	//  But we might need NORMALIZED results instead.

	isPose: function( poseName, threshold ){

		const hand = this
		if( typeof threshold === 'number' ){
			
			const result = hand.searchResults
			.find( function( result ){ 

				return (

					result.distance <= threshold &&
					result.pose.names.includes( poseName )
				)
			})
			return result ? result : false
		}
		else if( hand.searchResults.length ){

			return hand.searchResults[ 0 ].pose.names.includes( poseName ) ?
				hand.searchResults[ 0 ] :
				false
		}
		return false
	},




	//  Some leftover debugging functions.

	comparePoses: function( poseAName, poseBName ){

		const 
		hand = this,
		posesList = Handy.poses[ hand.handedness ],
		poseA = posesList.find( function( pose ){ return pose.name === poseAName }),
		poseB = posesList.find( function( pose ){ return pose.name === poseBName })
		
		let
		poseDistanceAbs = 0,
		poseDistanceSqr = 0

		for( let i = 0; i < poseA.positions.length; i ++ ){

			const 
			positionA = poseA.positions[ i ],
			positionB = poseB.positions[ i ],
			jointDistanceAbs = 
				Math.abs( positionA[ 0 ] - positionB[ 0 ]) +
				Math.abs( positionA[ 1 ] - positionB[ 1 ]) +
				Math.abs( positionA[ 2 ] - positionB[ 2 ]),
			jointDistanceSqr = Math.sqrt(
				
				Math.pow( positionA[ 0 ] - positionB[ 0 ], 2 ) +
				Math.pow( positionA[ 1 ] - positionB[ 1 ], 2 ) +
				Math.pow( positionA[ 2 ] - positionB[ 2 ], 2 )
			)
			
			// console.log( 

			// 	'i', i, 
			// 	'\n', positionA, 
			// 	'\n', positionB, 
			// 	'\nSqr distance:', jointDistanceSqr,
			// 	'\nAbs distance:', jointDistanceAbs,
			// )

			poseDistanceAbs += jointDistanceAbs
			poseDistanceSqr += jointDistanceSqr
		}
		console.log( 

			'\nThe distance between', poseAName, 'and', poseBName, 'is', 
			'\nAbs:', poseDistanceAbs, 
			'\nSqr:', poseDistanceSqr, 
			'\n\n'
		)
		return poseDistanceSqr
	},
	compareAllTo: function( inputPose ){
		
		const
		hand = this,
		posesList = Handy.poses[ hand.handedness ]

		return posesList
		.reduce( function( list, pose ){ 

			return list.concat({ 

				name: pose.name, 
				distance: hands.left.comparePoses( 'Fist', pose.name )
			})

		}, [])
		.sort( function( a, b ){ 

			return a.distance - b.distance
		})
	},






	    ////////////////
	   //            //
	  //   Update   //
	 //            //
	////////////////


	//  Did you add a pose name to the Handy.poseNames Array?
	//  Did you also define a check function for it?
	//  If so, this function -- which you must remember to call 
	//  from within your update loop -- will check the status 
	//  of each pose, set the boolean flags accordingly,
	//  and fire off events on the frame when the state changes.

	update: function( callback ){

		const hand = this

		//  Do you believe in magic?

		hand.search()


		//  Are we supposed to do something?
		
		if( typeof callback === 'function' ) callback( hand )
	}
})