backend/libs/three/helpers/CameraHelper.js

import { Camera } from '../cameras/Camera.js';
import { Vector3 } from '../math/Vector3.js';
import { LineSegments } from '../objects/LineSegments.js';
import { Color } from '../math/Color.js';
import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
import { BufferGeometry } from '../core/BufferGeometry.js';
import { Float32BufferAttribute } from '../core/BufferAttribute.js';

const _vector = /*@__PURE__*/ new Vector3();
const _camera = /*@__PURE__*/ new Camera();

/**
 *	- shows frustum, line of sight and up of the camera
 *	- suitable for fast updates
 * 	- based on frustum visualization in lightgl.js shadowmap example
 *		https://github.com/evanw/lightgl.js/blob/master/tests/shadowmap.html
 */

class CameraHelper extends LineSegments {
	constructor(camera) {
		const geometry = new BufferGeometry();
		const material = new LineBasicMaterial({ color: 0xffffff, vertexColors: true, toneMapped: false });

		const vertices = [];
		const colors = [];

		const pointMap = {};

		// colors

		const colorFrustum = new Color(0xffaa00);
		const colorCone = new Color(0xff0000);
		const colorUp = new Color(0x00aaff);
		const colorTarget = new Color(0xffffff);
		const colorCross = new Color(0x333333);

		// near

		addLine('n1', 'n2', colorFrustum);
		addLine('n2', 'n4', colorFrustum);
		addLine('n4', 'n3', colorFrustum);
		addLine('n3', 'n1', colorFrustum);

		// far

		addLine('f1', 'f2', colorFrustum);
		addLine('f2', 'f4', colorFrustum);
		addLine('f4', 'f3', colorFrustum);
		addLine('f3', 'f1', colorFrustum);

		// sides

		addLine('n1', 'f1', colorFrustum);
		addLine('n2', 'f2', colorFrustum);
		addLine('n3', 'f3', colorFrustum);
		addLine('n4', 'f4', colorFrustum);

		// cone

		addLine('p', 'n1', colorCone);
		addLine('p', 'n2', colorCone);
		addLine('p', 'n3', colorCone);
		addLine('p', 'n4', colorCone);

		// up

		addLine('u1', 'u2', colorUp);
		addLine('u2', 'u3', colorUp);
		addLine('u3', 'u1', colorUp);

		// target

		addLine('c', 't', colorTarget);
		addLine('p', 'c', colorCross);

		// cross

		addLine('cn1', 'cn2', colorCross);
		addLine('cn3', 'cn4', colorCross);

		addLine('cf1', 'cf2', colorCross);
		addLine('cf3', 'cf4', colorCross);

		function addLine(a, b, color) {
			addPoint(a, color);
			addPoint(b, color);
		}

		function addPoint(id, color) {
			vertices.push(0, 0, 0);
			colors.push(color.r, color.g, color.b);

			if (pointMap[id] === undefined) {
				pointMap[id] = [];
			}

			pointMap[id].push(vertices.length / 3 - 1);
		}

		geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3));
		geometry.setAttribute('color', new Float32BufferAttribute(colors, 3));

		super(geometry, material);

		this.type = 'CameraHelper';

		this.camera = camera;
		if (this.camera.updateProjectionMatrix) this.camera.updateProjectionMatrix();

		this.matrix = camera.matrixWorld;
		this.matrixAutoUpdate = false;

		this.pointMap = pointMap;

		this.update();
	}

	update() {
		const geometry = this.geometry;
		const pointMap = this.pointMap;

		const w = 1,
			h = 1;

		// we need just camera projection matrix inverse
		// world matrix must be identity

		_camera.projectionMatrixInverse.copy(this.camera.projectionMatrixInverse);

		// center / target

		setPoint('c', pointMap, geometry, _camera, 0, 0, -1);
		setPoint('t', pointMap, geometry, _camera, 0, 0, 1);

		// near

		setPoint('n1', pointMap, geometry, _camera, -w, -h, -1);
		setPoint('n2', pointMap, geometry, _camera, w, -h, -1);
		setPoint('n3', pointMap, geometry, _camera, -w, h, -1);
		setPoint('n4', pointMap, geometry, _camera, w, h, -1);

		// far

		setPoint('f1', pointMap, geometry, _camera, -w, -h, 1);
		setPoint('f2', pointMap, geometry, _camera, w, -h, 1);
		setPoint('f3', pointMap, geometry, _camera, -w, h, 1);
		setPoint('f4', pointMap, geometry, _camera, w, h, 1);

		// up

		setPoint('u1', pointMap, geometry, _camera, w * 0.7, h * 1.1, -1);
		setPoint('u2', pointMap, geometry, _camera, -w * 0.7, h * 1.1, -1);
		setPoint('u3', pointMap, geometry, _camera, 0, h * 2, -1);

		// cross

		setPoint('cf1', pointMap, geometry, _camera, -w, 0, 1);
		setPoint('cf2', pointMap, geometry, _camera, w, 0, 1);
		setPoint('cf3', pointMap, geometry, _camera, 0, -h, 1);
		setPoint('cf4', pointMap, geometry, _camera, 0, h, 1);

		setPoint('cn1', pointMap, geometry, _camera, -w, 0, -1);
		setPoint('cn2', pointMap, geometry, _camera, w, 0, -1);
		setPoint('cn3', pointMap, geometry, _camera, 0, -h, -1);
		setPoint('cn4', pointMap, geometry, _camera, 0, h, -1);

		geometry.getAttribute('position').needsUpdate = true;
	}

	dispose() {
		this.geometry.dispose();
		this.material.dispose();
	}
}

function setPoint(point, pointMap, geometry, camera, x, y, z) {
	_vector.set(x, y, z).unproject(camera);

	const points = pointMap[point];

	if (points !== undefined) {
		const position = geometry.getAttribute('position');

		for (let i = 0, l = points.length; i < l; i++) {
			position.setXYZ(points[i], _vector.x, _vector.y, _vector.z);
		}
	}
}

export { CameraHelper };