three#Frustum JavaScript Examples

update() {

		const group = this.group;
		const cameras = this.cameras;
		const cameraMap = this.cameraMap;
		const cameraInfo = this.cameraInfo;

		if ( cameras.length === 0 ) {

			console.warn( 'TilesRenderer: no cameras defined. Cannot update 3d tiles.' );
			return;

		}

		// automatically scale the array of cameraInfo to match the cameras
		while ( cameraInfo.length > cameras.length ) {

			cameraInfo.pop();

		}

		while ( cameraInfo.length < cameras.length ) {

			cameraInfo.push( {

				frustum: new Frustum(),
				isOrthographic: false,
				sseDenominator: - 1, // used if isOrthographic:false
				position: new Vector3(),
				invScale: - 1,
				pixelSize: 0, // used if isOrthographic:true

			} );

		}

		// extract scale of group container
		tempMat2.copy( group.matrixWorld ).invert();

		tempVector.setFromMatrixScale( tempMat2 );
		const invScale = tempVector.x;

		if ( Math.abs( Math.max( tempVector.x - tempVector.y, tempVector.x - tempVector.z ) ) > 1e-6 ) {

			console.warn( 'ThreeTilesRenderer : Non uniform scale used for tile which may cause issues when calculating screen space error.' );

		}

		// store the camera cameraInfo in the 3d tiles root frame
		for ( let i = 0, l = cameraInfo.length; i < l; i ++ ) {

			const camera = cameras[ i ];
			const info = cameraInfo[ i ];
			const frustum = info.frustum;
			const position = info.position;
			const resolution = cameraMap.get( camera );

			if ( resolution.width === 0 || resolution.height === 0 ) {

				console.warn( 'TilesRenderer: resolution for camera error calculation is not set.' );

			}

			// Read the calculated projection matrix directly to support custom Camera implementations
			const projection = camera.projectionMatrix.elements;

			// The last element of the projection matrix is 1 for orthographic, 0 for perspective
			info.isOrthographic = projection[ 15 ] === 1;

			if ( info.isOrthographic ) {

				// See OrthographicCamera.updateProjectionMatrix and Matrix4.makeOrthographic:
				// the view width and height are used to populate matrix elements 0 and 5.
				const w = 2 / projection[ 0 ];
				const h = 2 / projection[ 5 ];
				info.pixelSize = Math.max( h / resolution.height, w / resolution.width );

			} else {

				// See PerspectiveCamera.updateProjectionMatrix and Matrix4.makePerspective:
				// the vertical FOV is used to populate matrix element 5.
				info.sseDenominator = ( 2 / projection[ 5 ] ) / resolution.height;

			}

			info.invScale = invScale;

			// get frustum in group root frame
			tempMat.copy( group.matrixWorld );
			tempMat.premultiply( camera.matrixWorldInverse );
			tempMat.premultiply( camera.projectionMatrix );

			frustum.setFromProjectionMatrix( tempMat );

			// get transform position in group root frame
			position.set( 0, 0, 0 );
			position.applyMatrix4( camera.matrixWorld );
			position.applyMatrix4( tempMat2 );

		}

		super.update();

	}

async init () {
    await this.al.init()
    Setup(this)
    this.socket.on('blockUpdate', (block) => {
      this.world.setBlock(block[0], block[1] + 16, block[2], block[3])
    })
    this.socket.on('spawn', (yaw, pitch) => {
      console.log('Player spawned')
      this.ls.hide()
      this.camera.rotation.y = yaw
      this.camera.rotation.x = pitch
    })
    this.socket.on('players', (players) => {
      this.tl.update(players)
    })
    this.socket.on('dimension', (dim) => {
      this.dimension = dim
      console.log(`Player dimension has been changed: ${dim}`)
      this.world.resetWorld()
      if (this.dimBg[dim] === undefined) {
        dim = 'minecraft:overworld'
      }
      const bg = this.dimBg[dim]
      this.scene.background = new Color(...bg)
      this.distanceBasedFog.color.x = bg[0]
      this.distanceBasedFog.color.y = bg[1]
      this.distanceBasedFog.color.z = bg[2]
      this.distanceBasedFog.color.w = 1

      this.ls.show('Loading terrain...')
    })
    this.socket.on('mapChunk', (sections, biomes, x, z) => {
      this.world.computeSections(sections, biomes, x, z)
    })
    this.socket.on('game', (gameData) => {
      this.inv_bar.updateGamemode(gameData.gameMode)
    })
    this.socket.on('hp', (points) => {
      this.inv_bar.setHp(points)
    })
    this.socket.on('inventory', (inv) => {
      this.inv_bar.updateInv(inv)
    })
    this.socket.on('food', (points) => {
      this.inv_bar.setFood(points)
    })
    this.socket.on('msg', (msg) => {
      this.chat.log(msg)
    })
    this.socket.on('kicked', (reason) => {
      document.exitPointerLock()
      console.log(reason)
      reason = JSON.parse(reason)
      swal({
        title: "You've been kicked!",
        text:
          reason.extra !== undefined
            ? reason.extra[0].text
            : reason.text,
        icon: 'error',
        button: 'Rejoin'
      }).then(function () {
        document.location.reload()
      })
    })
    this.socket.on('xp', (xp) => {
      this.inv_bar.setXp(xp.level, xp.progress)
    })
    this.socket.on('move', (pos) => {
      this.playerPos = [pos.x - 0.5, pos.y, pos.z - 0.5]
      const to = {
        x: pos.x - 0.5,
        y: pos.y + this.headHeight,
        z: pos.z - 0.5
      }
      new TWEEN.Tween(this.camera.position)
        .to(to, 100)
        .easing(TWEEN.Easing.Quadratic.Out)
        .start()
    })
    this.socket.on('entities', (entities) => {
      this.ent.update(entities)
    })
    this.socket.on('diggingCompleted', () => {
      this.bb.done = true
    })
    this.socket.on('digTime', (time) => {
      this.bb.startDigging(time)
    })
    setInterval(() => {
      if (this.params.frustumtest) {
        const frustum = new Frustum()
        const cameraViewProjectionMatrix = new Matrix4()

        this.camera.updateMatrixWorld()
        this.camera.matrixWorldInverse.copy(this.camera.matrixWorld).invert()
        cameraViewProjectionMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse)
        frustum.setFromProjectionMatrix(cameraViewProjectionMatrix)

        this.scene.traverse((node) => {
          if (node instanceof Mesh) {
            if (frustum.intersectsObject(node)) {
              node.visible = true
            } else {
              node.visible = false
            }
          }
        })
      }
    }, 2000)
    return this.animate()
  }