three#Camera TypeScript Examples

public updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void
	{
		camera.getWorldPosition(pov);

		view.children[0].traverse((node: any) =>
		{
			node.getWorldPosition(position);

			let distance = pov.distanceTo(position);
			distance /= Math.pow(2, view.provider.maxZoom - node.level);

			if (distance < this.subdivideDistance) 
			{
				node.subdivide();
			}
			else if (distance > this.simplifyDistance && node.parentNode) 
			{
				node.parentNode.simplify();
			}
		});
	}

public updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void
	{
		projection.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
		frustum.setFromProjectionMatrix(projection);
		camera.getWorldPosition(pov);

		view.children[0].traverse((node: any) => 
		{
			node.getWorldPosition(position);
			let distance = pov.distanceTo(position);
			distance /= Math.pow(2, view.provider.maxZoom - node.level);

			const inFrustum = this.pointOnly ? frustum.containsPoint(position) : frustum.intersectsObject(node);

			if (distance < this.subdivideDistance && inFrustum) 
			{
				node.subdivide();
			}
			else if (distance > this.simplifyDistance && node.parentNode) 
			{
				node.parentNode.simplify();
			}
		});
	}

/**
	 * Ajust node configuration depending on the camera distance.
	 *
	 * Called everytime before render.
	 */
	public onBeforeRender: (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group)=> void = (renderer, scene, camera, geometry, material, group) => 
	{
		this.lod.updateLOD(this, camera, renderer, scene);
	};

public _getRenderCamera(): Camera {
        let p = this._obj3D;
        while (p) {
            let dobj = p["$owner"];
            if (dobj && dobj.camera)
                return dobj.camera;

            p = p.parent;
        }
        return Stage.camera;
    }

export function screenToWorld(camera: Camera, x: number, y: number, outPt: Vector3, outDir: Vector3) {
    outPt.set((x / _width) * 2 - 1, - (y / _height) * 2 + 1, 0);
    outPt.unproject(camera);

    if (camera["isPerspectiveCamera"]) {
        s_v3.setFromMatrixPosition(camera.matrixWorld);
        outDir.copy(outPt).sub(s_v3).normalize();
        outDir.multiplyScalar(-1);
    }
    else
        outDir.set(0, 0, 1);
}

useSpringVelocity = (bodyApi: Api[1], speed: number) => {
  const direction = useRef(new Vector3());
  const { device } = useEnvironment();
  const dummy = useMemo(() => new Vector3(), []);

  const updateVelocity = (cam: Camera, velocity: Vector3) => {
    // get forward/back movement and left/right movement velocities
    dummy.x = direction.current.x * 0.75;
    dummy.z = direction.current.y; // forward/back
    dummy.multiplyScalar(speed);

    const moveQuaternion = cam.quaternion.clone();
    moveQuaternion.x = 0;
    moveQuaternion.z = 0;
    dummy.applyQuaternion(moveQuaternion);
    dummy.y = velocity.y;

    // keep y velocity intact and update velocity
    if (!device.desktop) {
      bodyApi.velocity.set(dummy.x, dummy.y, dummy.z);
    } else {
      const newX = MathUtils.lerp(velocity.x, dummy.x, 0.25);
      const newZ = MathUtils.lerp(velocity.z, dummy.z, 0.25);
      bodyApi.velocity.set(newX, dummy.y, newZ);
    }
  };

  return {
    direction,
    updateVelocity,
  };
}

object: Camera;

public updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void
	{
		const intersects = [];

		for (let t = 0; t < this.subdivisionRays; t++) 
		{
			// Raycast from random point
			this.mouse.set(Math.random() * 2 - 1, Math.random() * 2 - 1);

			// Check intersection
			this.raycaster.setFromCamera(this.mouse, camera);
			this.raycaster.intersectObjects(view.children, true, intersects);
		}

		for (let i = 0; i < intersects.length; i++) 
		{
			const node = intersects[i].object;
			let distance = intersects[i].distance;

			if (this.powerDistance) 
			{
				distance = Math.pow(distance * 2, node.level);
			}

			if (this.scaleDistance) 
			{
				const matrix = node.matrixWorld.elements;
				const vector = new Vector3(matrix[0], matrix[1], matrix[2]);
				distance = vector.length() / distance;
			}

			if (distance > this.thresholdUp) 
			{
				node.subdivide();
				return;
			}
			else if (distance < this.thresholdDown) 
			{
				if (node.parentNode !== null) 
				{
					node.parentNode.simplify();
					return;
				}
			}
		}
	}

updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void;

updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void;

updateLOD(view: MapView, camera: Camera, renderer: WebGLRenderer, scene: Object3D): void;

onBeforeRender: (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => void;

_camera: Camera

export function worldToScreen(camera: Camera, input: Vector3, output: Vector2) {
    s_v3.copy(input);
    s_v3.project(camera);
    output.set((s_v3.x + 1) / 2 * _width, (1 - s_v3.y) / 2 * _height);
}

private _camera: Camera;

public camera?: Camera;

// API

    camera: Camera;

constructor(object: Camera, domElement?: HTMLElement);

constructor(object: Camera, domElement?: HTMLElement);

object: Camera;

constructor(object: Camera, domElement?: HTMLElement);

constructor(objects: Object3D[], camera: Camera, domElement?: HTMLElement);

/**
 * Player represents a physics-enabled player in the environment, complete with a
 * control scheme and a physical representation that interacts with other physics-
 * enabled objects.
 *
 * There should only be one player per environment.
 *
 * @constructor
 */
export default function Player(
  props: { children: ReactNode[] | ReactNode } & PlayerProps
) {
  const { children, pos = [0, 1, 0], rot = 0, speed = SPEED, controls } = props;

  const camera = useThree((state) => state.camera);
  const gl = useThree((state) => state.gl);
  const defaultRaycaster = useThree((state) => state.raycaster);

  const { device } = useEnvironment();

  // physical body
  const [bodyRef, bodyApi] = useCapsuleCollider(pos);
  const { direction, updateVelocity } = useSpringVelocity(bodyApi, speed);

  // local state
  const position = useRef(new Vector3());
  const velocity = useRef(new Vector3());
  const lockControls = useRef(false);
  const raycaster = useMemo(
    () => new Raycaster(new Vector3(), new Vector3(), 0, 1.5),
    []
  );
  const { connected, frequency, sendEvent } = useSimulation();
  const simulationLimiter = useLimiter(frequency);

  // setup player
  useEffect(() => {
    // store position and velocity
    bodyApi.position.subscribe((p) => position.current.fromArray(p));
    bodyApi.velocity.subscribe((v) => velocity.current.fromArray(v));

    // rotation happens before position move
    camera.rotation.setFromQuaternion(
      new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), rot)
    );
  }, []);

  useFrame(({ clock }) => {
    const cam: Camera = device.xr ? gl.xr.getCamera(camera) : camera;

    // update raycaster
    if (device.desktop) {
      raycaster.ray.origin.copy(position.current);
      const lookAt = new Vector3(0, 0, -1);
      lookAt.applyQuaternion(cam.quaternion);
      raycaster.ray.direction.copy(lookAt);
    }

    // update camera position
    camera.position.copy(position.current);

    // update velocity
    if (!lockControls.current) {
      updateVelocity(cam, velocity.current);
    }

    // p2p stream position and rotation
    if (connected && simulationLimiter.isReady(clock)) {
      sendEvent(
        "player",
        JSON.stringify({
          position: camera.position
            .toArray()
            .map((p) => parseFloat(p.toPrecision(3))),
          rotation: camera.rotation
            .toArray()
            .slice(0, 3)
            .map((r) => parseFloat(r.toPrecision(3))),
        })
      );
    }
  });

  const state = createPlayerState(
    bodyApi,
    position,
    velocity,
    lockControls,
    device.mobile ? defaultRaycaster : raycaster
  );

  return (
    <PlayerContext.Provider value={state}>
      {device.mobile && (
        <>
          {controls?.disableGyro ? (
            <TouchFPSCamera />
          ) : (
            <GyroControls fallback={<TouchFPSCamera />} />
          )}
          <NippleMovement direction={direction} />
        </>
      )}
      {device.desktop && (
        <>
          <KeyboardMovement direction={direction} />
          <PointerLockControls />
        </>
      )}
      {device.xr && (
        <>
          <VRControllerMovement position={position} direction={direction} />
        </>
      )}
      <group name="player" ref={bodyRef}>
        {SHOW_PLAYER_HITBOX && <VisibleCapsuleCollider />}
      </group>
      {children}
    </PlayerContext.Provider>
  );
}

/**
 * Three.js helper
 */
export default function useThree(params: ThreeConfigInterface): ThreeInterface {
  // default config
  const config: ThreeConfigInterface = {
    antialias: true,
    alpha: false,
    autoClear: true,
    orbitCtrl: false,
    pointer: false,
    resize: false,
    width: 300,
    height: 150,
  }

  if (params) {
    Object.entries(params).forEach(([key, value]) => {
      config[key] = value
    })
  }

  // size
  const size: SizeInterface = {
    width: 1, height: 1,
    wWidth: 1, wHeight: 1,
    ratio: 1,
  }

  const beforeRenderCallbacks: {(): void}[] = []

  const intersectObjects: Object3D[] = []

  const renderer = createRenderer()

  // returned object
  const obj: ThreeInterface = {
    config,
    renderer,
    size,
    init,
    dispose,
    render,
    renderC,
    setSize,
    addIntersectObject, removeIntersectObject,
  }

  return obj

  /**
   * create WebGLRenderer
   */
  function createRenderer(): WebGLRenderer {
    const renderer = new WebGLRenderer({ canvas: config.canvas, antialias: config.antialias, alpha: config.alpha, ...config.params })
    renderer.autoClear = config.autoClear
    return renderer
  }

  /**
   * init three
   */
  function init() {
    if (!obj.scene) {
      console.error('Missing Scene')
      return false
    }

    if (!obj.camera) {
      console.error('Missing Camera')
      return false
    }

    if (config.resize) {
      onResize()
      window.addEventListener('resize', onResize)
    } else if (config.width && config.height) {
      setSize(config.width, config.height)
    }

    initPointer()

    if (config.orbitCtrl) {
      const cameraCtrl = new OrbitControls(obj.camera, obj.renderer.domElement)
      if (config.orbitCtrl instanceof Object) {
        Object.entries(config.orbitCtrl).forEach(([key, value]) => {
          // @ts-ignore
          cameraCtrl[key] = value
        })
      }
      onBeforeRender(() => { cameraCtrl.update() })
      obj.cameraCtrl = cameraCtrl
    }

    return true
  }

  /**
   * init pointer
   */
  function initPointer() {
    let pointerConf: PointerConfigInterface = {
      camera: obj.camera!,
      domElement: obj.renderer!.domElement,
      intersectObjects,
    }

    if (config.pointer && config.pointer instanceof Object) {
      pointerConf = { ...pointerConf, ...config.pointer }
    }

    const pointer = obj.pointer = usePointer(pointerConf)
    if (config.pointer || intersectObjects.length) {
      pointer.addListeners()
      if (pointerConf.intersectMode === 'frame') {
        onBeforeRender(pointer.intersect)
      }
    }
  }

  /**
   * add before render callback
   */
  function onBeforeRender(cb: {(): void}) {
    beforeRenderCallbacks.push(cb)
  }

  /**
   * default render
   */
  function render() {
    // if (obj.cameraCtrl) obj.cameraCtrl.update()
    beforeRenderCallbacks.forEach(c => c())
    obj.renderer!.render(obj.scene!, obj.camera!)
  }

  /**
   * composer render
   */
  function renderC() {
    // if (obj.cameraCtrl) obj.cameraCtrl.update()
    beforeRenderCallbacks.forEach(c => c())
    obj.composer!.render()
  }

  /**
   * add intersect object
   */
  function addIntersectObject(o: Object3D) {
    if (intersectObjects.indexOf(o) === -1) {
      intersectObjects.push(o)
    }
    // add listeners if needed
    if (obj.pointer && !obj.pointer.listeners) {
      obj.pointer.addListeners()
    }
  }

  /**
   * remove intersect object
   */
  function removeIntersectObject(o: Object3D) {
    const i = intersectObjects.indexOf(o)
    if (i !== -1) {
      intersectObjects.splice(i, 1)
    }
    // remove listeners if needed
    if (obj.pointer && !config.pointer && intersectObjects.length === 0) {
      obj.pointer.removeListeners()
    }
  }

  /**
   * remove listeners and dispose
   */
  function dispose() {
    // beforeRenderCallbacks = []
    window.removeEventListener('resize', onResize)
    if (obj.pointer) obj.pointer.removeListeners()
    if (obj.cameraCtrl) obj.cameraCtrl.dispose()
    if (obj.renderer) obj.renderer.dispose()
  }

  /**
   * resize listener
   */
  function onResize() {
    if (config.resize === 'window') {
      setSize(window.innerWidth, window.innerHeight)
    } else {
      const elt = obj.renderer!.domElement.parentNode as Element
      if (elt) setSize(elt.clientWidth, elt.clientHeight)
    }
    config.onResize?.(size)
  }

  /**
   * update renderer size and camera
   */
  function setSize(width: number, height: number) {
    size.width = width
    size.height = height
    size.ratio = width / height

    obj.renderer!.setSize(width, height, false)

    // already done in EffectComposer
    // if (obj.composer) {
    //   obj.composer.setSize(width, height)
    // }

    const camera = (<Camera>obj.camera!)
    if (camera.type === 'PerspectiveCamera') {
      const pCamera = (<PerspectiveCamera>camera)
      pCamera.aspect = size.ratio
      pCamera.updateProjectionMatrix()
    }

    if (camera.type === 'OrthographicCamera') {
      const oCamera = (<OrthographicCamera>camera)
      size.wWidth = oCamera.right - oCamera.left
      size.wHeight = oCamera.top - oCamera.bottom
    } else {
      const wsize = getCameraSize()
      size.wWidth = wsize[0]
      size.wHeight = wsize[1]
    }
  }

  /**
   * calculate camera visible area size
   */
  function getCameraSize() {
    const camera = (<PerspectiveCamera>obj.camera!)
    const vFOV = (camera.fov * Math.PI) / 180
    const h = 2 * Math.tan(vFOV / 2) * Math.abs(camera.position.z)
    const w = h * camera.aspect
    return [w, h]
  }
}