cylindrical frustum hit testing

client/src/components/ThreeVIew.tsx

@@ -90,7 +90,7 @@ export const ThreeView = function (props: ThreeViewProps) {
         const { scene, camera } = setupScene({ w: W, h: H });
         cameraRef.current = camera;
 
-        props.sceneHelper.initialize(scene);
+        props.sceneHelper.initialize(scene, camera);
 
         const handleWindowResize = () => {
             const w = container.clientWidth;
@@ -102,6 +102,13 @@ export const ThreeView = function (props: ThreeViewProps) {
         window.addEventListener("resize", handleWindowResize);
 
         handleHover = (e: InteractionMouseEventArgs) => {
+
+            const ht = props.sceneHelper.hitTest(
+                e.position,
+                e.screenSize,
+            );
+            console.log(JSON.stringify(ht.map((h) => h.object.userData)));
+
             const hitTest = HitTestFactory.hitTest(
                 props.sceneHelper,
                 new THREE.Vector2(e.position.x, e.position.y),

client/src/components/Viewport.tsx

@@ -1,6 +1,6 @@
 import { useSceneHelper } from "../helpers/hooks/useSceneHelper";
 import { state } from "../state/root";
-import { ThreeView, type ThreeViewEventArgs, type ThreeViewMouseEventArgs } from "./ThreeVIew";
+import { ThreeView, type ThreeViewEventArgs, type ThreeViewMouseEventArgs } from "./ThreeView";
 
 export const Viewport = function () {
 
@@ -9,10 +9,10 @@ export const Viewport = function () {
     function handleMouseMove(e: ThreeViewMouseEventArgs) {
         state.setHitTest(e.hitTest);
 
-        sceneHelper.clearPoints();
+        sceneHelper.clear();
         if (e.hitTest.objects.length) {
             e.hitTest.objects.forEach((obj) => {
-                sceneHelper.setPoint(obj.object.uuid, obj.point);
+                sceneHelper.showPoint(obj.object.uuid, obj.point);
             })
             // console.log(e.position);
             // console.log(e.hitTest.objects.map((o) => o));
@@ -25,6 +25,8 @@ export const Viewport = function () {
         // console.log(hoveredFaceIds);
 
         sceneHelper.setSelection(hoveredFaceIds);
+
+        sceneHelper.showMouseFrustum();
     }
 
     function handleDispose(e: ThreeViewEventArgs): void {

client/src/helpers/bvh.ts

@@ -0,0 +1,16 @@
+import * as THREE from 'three';
+import {
+    computeBoundsTree, disposeBoundsTree,
+    computeBatchedBoundsTree, disposeBatchedBoundsTree, acceleratedRaycast,
+} from 'three-mesh-bvh';
+
+// Add the extension functions
+THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
+THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
+THREE.Mesh.prototype.raycast = acceleratedRaycast;
+
+THREE.BatchedMesh.prototype.computeBoundsTree = computeBatchedBoundsTree;
+THREE.BatchedMesh.prototype.disposeBoundsTree = disposeBatchedBoundsTree;
+THREE.BatchedMesh.prototype.raycast = acceleratedRaycast;
+
+export const dummy = {};

client/src/helpers/circularFrustum.ts

@@ -0,0 +1,84 @@
+import * as THREE from 'three';
+
+export class CircularFrustum {
+    public readonly apex = new THREE.Vector3(); // Cone apex (camera position)
+    public readonly axisNormalized = new THREE.Vector3(); // normalized (unit) axis direction (camera → screen point)
+
+    public halfAngle: number = 0; // Half-angle of the cone in radians
+    public cosHalfAngle: number = 0; // cos(halfAngle) — cached
+    public sinHalfAngle: number = 0; // sin(halfAngle) — cached
+
+    /**
+     * Build a CircularFrustum from a screen-space point and pixel threshold.
+     *
+     * @param screenPointNormalized   point in normalised device coordinates (NDC) [-1, 1]
+     * @param camera        PerspectiveCamera or OrthographicCamera
+     * @param thresholdPx   Screen-space radius in pixels
+     * @param screenSize  renderer viewport size in pixels (e.g. from viewport.getBoundingClientRect())
+     */
+    public setFromScreenPoint(
+        screenPointNormalized: THREE.Vector2Like, // in [-1, 1] space
+        screenSize: THREE.Vector2Like,
+        camera: THREE.PerspectiveCamera | THREE.OrthographicCamera,
+        thresholdPx: number, // in screen pixels
+    ): void {
+        // cone apex
+        camera.getWorldPosition(this.apex);
+
+        // cone central ray (axis)
+        const centerNDC = new THREE.Vector3(screenPointNormalized.x, screenPointNormalized.y, 0.5); // center
+        const centerWorld = centerNDC.clone().unproject(camera);
+        this.axisNormalized.copy(centerWorld.sub(this.apex)).normalize();
+
+        // frustum near circle bottommost point
+        const bottomNDC = centerNDC.clone().add({ x: 0, y: (thresholdPx / screenSize.y) * 2, z: 0 });
+        const bottomWorld = bottomNDC.clone().unproject(camera);
+        const downAxis = bottomWorld.sub(this.apex).normalize();
+
+        // cone half-angle
+        const halfAngle = Math.acos(THREE.MathUtils.clamp(this.axisNormalized.dot(downAxis), -1, 1));
+        this.set(this.apex, this.axisNormalized, halfAngle);
+
+        // console.log({
+        //     screenPointNormalized,
+        //     screenSize,
+        //     thresholdPx,
+        //     centerNDC: centerNDC.toArray(),
+        //     centerWorld: centerWorld.toArray(),
+        //     bottomNDC: bottomNDC.toArray(),
+        //     bottomWorld: bottomWorld.toArray(),
+        //     downAxis: downAxis.toArray(),
+        //     apex: this.apex.toArray(),
+        //     axisNormalized: this.axisNormalized,
+        //     halfAngle,
+        // });
+        // console.log(this.apex.toArray());
+    }
+    public getCircleAtDepth(depth: number): { center: THREE.Vector3Like, radius: number } {
+        const center = this.apex.clone().addScaledVector(this.axisNormalized, depth);
+        const radius = Math.tan(this.halfAngle) * depth;
+
+        return {
+            center,
+            radius,
+        }
+    }
+
+    private set(apex: THREE.Vector3Like, axisNormalized: THREE.Vector3Like, halfAngle: number) {
+        this.apex.copy(apex);
+        this.axisNormalized.copy(axisNormalized);
+        this.halfAngle = halfAngle;
+        this.cosHalfAngle = Math.cos(this.halfAngle);
+        this.sinHalfAngle = Math.sin(this.halfAngle);
+    }
+
+    public transform(matrix: THREE.Matrix4): CircularFrustum {
+        const transformed = new CircularFrustum();
+
+        const localApex = this.apex.clone().applyMatrix4(matrix);
+        const localAxis = this.axisNormalized.clone().transformDirection(matrix).normalize();
+        transformed.set(localApex, localAxis, this.halfAngle);
+
+        return transformed;
+    }
+}

client/src/helpers/circularFrustumIntersect.ts

@@ -0,0 +1,230 @@
+import * as THREE from 'three';
+import { CONTAINED, ExtendedTriangle, INTERSECTED, NOT_INTERSECTED } from 'three-mesh-bvh';
+import { CircularFrustum } from './circularFrustum';
+
+export type FrustumHitResult = {
+    object: THREE.Object3D;
+    point: THREE.Vector3;       // world-space closest hit point
+    depth: number;              // depth along frustum axis
+    triangle?: ExtendedTriangle; // only present when BVH was used
+}
+
+export type CircularFrustumIntersectionOptions = {
+    findAll?: boolean; // defaults to false
+    filter?: (object: THREE.Object3D) => boolean; // defaults to every object
+}
+
+export type IntersectionResult = 'NOT_INTERSECTED' | 'INTERSECTED' | 'CONTAINED';
+
+export function intersectionResultToBvh(value: IntersectionResult): typeof NOT_INTERSECTED | typeof INTERSECTED | typeof CONTAINED {
+    switch (value) {
+        case 'NOT_INTERSECTED':
+            return NOT_INTERSECTED;
+        case 'INTERSECTED':
+            return INTERSECTED;
+        case 'CONTAINED':
+            return CONTAINED;
+    }
+}
+
+export class CircularFrustumIntersection {
+    public readonly frustum: CircularFrustum;
+
+    constructor(frustum: CircularFrustum) {
+        this.frustum = frustum;
+    }
+
+    public insersectsSphere(sphere: THREE.Sphere): 'NOT_INTERSECTED' | number {
+        return CircularFrustumIntersection.insersectsSphere(sphere, this.frustum);
+    }
+
+    /**
+     * sphere and frustum both should be in the same coordinate space (local or world)
+     *
+     * Uses the Barros / van den Bergen separating-axis approach:
+     *  - Check whether the sphere centre is inside the cone (fast path)
+     *  - Otherwise check the distance from the sphere centre to the
+     *    nearest cone surface (lateral face + apex cap)
+     *
+     * @returns axial depth of sphere center or NOT_INTERSECTED
+     */
+    public static insersectsSphere(sphere: THREE.Sphere, frustum: CircularFrustum): 'NOT_INTERSECTED' | number {
+        const toCenter = sphere.center.clone().sub(frustum.apex);
+        const axialDist = toCenter.dot(frustum.axisNormalized);
+
+        if (axialDist + sphere.radius < 0) // behind the apex entirely
+            return 'NOT_INTERSECTED';
+
+        const lateralDist = toCenter.clone().addScaledVector(frustum.axisNormalized, -axialDist).length();
+        const distToConeEdge = lateralDist * frustum.cosHalfAngle - axialDist * frustum.sinHalfAngle;
+
+        if (distToConeEdge > sphere.radius) // fully outside lateral surface
+            return 'NOT_INTERSECTED';
+
+        return axialDist;
+    }
+
+    public intersectsBox(box: THREE.Box3): IntersectionResult {
+        return CircularFrustumIntersection.intersectsBox(box, this.frustum);
+    }
+
+    // box and this.frustum both should be in the same coordinate space (local or world)
+    public static intersectsBox(box: THREE.Box3, frustum: CircularFrustum): IntersectionResult {
+        const sphere = new THREE.Sphere();
+        box.getBoundingSphere(sphere);
+        if (CircularFrustumIntersection.insersectsSphere(sphere, frustum) === 'NOT_INTERSECTED')
+            return 'NOT_INTERSECTED';
+
+        // Check if all 8 corners are inside — if so, CONTAINED
+        const corners = Array(8)
+            .fill(0)
+            .map((_, i) => new THREE.Vector3(
+                i & 1 ? box.max.x : box.min.x,
+                i & 2 ? box.max.y : box.min.y,
+                i & 4 ? box.max.z : box.min.z,
+            ));
+        const allInside = corners.every((c) => CircularFrustumIntersection.pointAxialDepth(c, frustum) !== 'NOT_INTERSECTED');
+        return allInside
+            ? 'CONTAINED'
+            : 'INTERSECTED';
+    }
+
+    public pointAxialDepth(point: THREE.Vector3): 'NOT_INTERSECTED' | number {
+        return CircularFrustumIntersection.pointAxialDepth(point, this.frustum);
+    }
+
+    public static pointAxialDepth(point: THREE.Vector3, frustum: CircularFrustum): 'NOT_INTERSECTED' | number {
+        const toPoint = point.clone().sub(frustum.apex);
+        const dist = toPoint.length();
+        if (dist === 0)
+            return 0;
+
+        const axialDist = toPoint.dot(frustum.axisNormalized);
+        const cosAngle = axialDist / dist;
+        return cosAngle >= frustum.cosHalfAngle
+            ? axialDist
+            : 'NOT_INTERSECTED';
+    }
+
+    // ─── Local frustum construction ──────────────────────────────────────────────
+
+    /**
+     * Transform a world-space CircularFrustum into an object's local space.
+     * Note: halfAngle is only preserved exactly under uniform scale.
+     */
+    private toObjectLocalSpace(invWorldMatrix: THREE.Matrix4): CircularFrustum {
+        return this.frustum.transform(invWorldMatrix);
+    }
+
+    public intersectMesh(
+        mesh: THREE.Mesh,
+        findAll: boolean,
+    ): FrustumHitResult[] {
+        const geometry = mesh.geometry;
+        if (!geometry)
+            return [];
+
+        const matrix = mesh.matrixWorld;
+        const matrixInverted = matrix.clone().invert(); // world -> local matrix
+        const worldFrustum = this.frustum;
+        const localFrustum = this.toObjectLocalSpace(matrixInverted);
+
+        // quick check for bounding sphere
+        if (!geometry.boundingSphere)
+            geometry.computeBoundingSphere();
+        const boundingSphere = geometry.boundingSphere!.clone().applyMatrix4(matrix);
+        if (this.insersectsSphere(boundingSphere) === 'NOT_INTERSECTED')
+            return [];
+
+        const results: FrustumHitResult[] = [];
+
+        if (!geometry.boundsTree)
+            geometry.computeBoundsTree();
+        const bvh = geometry.boundsTree;
+        if (!bvh)
+            throw new Error('No BVH found for a mesh');
+        bvh.shapecast({
+            intersectsBounds: (box: THREE.Box3) => intersectionResultToBvh(CircularFrustumIntersection.intersectsBox(box, localFrustum)),
+
+            intersectsTriangle: (tri: ExtendedTriangle, _index: number, contained: boolean) => {
+                // If the whole node was CONTAINED, every triangle is inside — fast path
+                if (contained) {
+                    const worldPoint = tri.a.clone().applyMatrix4(mesh.matrixWorld);
+                    const depth = worldFrustum.axisNormalized.dot(worldPoint.clone().sub(worldFrustum.apex));
+                    results.push({ object: mesh, point: worldPoint, depth, triangle: tri });
+                    return !findAll;  // stop if we only need first hit
+                }
+
+                // Test all three vertices; take the closest that's inside
+                let bestDepth = Infinity;
+                let bestLocal: THREE.Vector3 | null = null;
+
+                for (const v of [tri.a, tri.b, tri.c] as THREE.Vector3[]) {
+                    const d = CircularFrustumIntersection.pointAxialDepth(v, localFrustum);
+                    if (d !== 'NOT_INTERSECTED') {
+                        if (d < bestDepth) {
+                            bestDepth = d;
+                            bestLocal = v;
+                        }
+                    }
+                }
+
+                // Also test closest point on triangle to the frustum axis ray
+                const ray = new THREE.Ray(localFrustum.apex, localFrustum.axisNormalized);
+                const closest = new THREE.Vector3();
+                tri.closestPointToPoint(ray.origin, closest); // ExtendedTriangle has this
+                const d = CircularFrustumIntersection.pointAxialDepth(closest, localFrustum);
+                if (d !== 'NOT_INTERSECTED') {
+                    if (d < bestDepth) {
+                        bestDepth = d;
+                        bestLocal = closest;
+                    }
+                }
+
+                if (bestLocal) {
+                    const worldPoint = bestLocal.clone().applyMatrix4(mesh.matrixWorld);
+                    const worldDepth = worldFrustum.axisNormalized.dot(worldPoint.clone().sub(worldFrustum.apex));
+                    results.push({ object: mesh, point: worldPoint, depth: worldDepth, triangle: tri });
+                    return !findAll;
+                }
+
+                return false;
+            },
+        });
+        // } else {
+        //     // ── Fallback: bounding box only ───────────────────────────────────
+        //     if (!geometry.boundingBox) 
+        //         geometry.computeBoundingBox();
+        //     const worldBox = geometry.boundingBox!.clone().applyMatrix4(mesh.matrixWorld);
+        //     const boxResult = this.intersectsBox(worldBox.clone());
+        //     if (boxResult !== NOT_INTERSECTED) {
+        //         const center = new THREE.Vector3();
+        //         worldBox.getCenter(center);
+        //         const depth = this.frustum.axis.dot(center.clone().sub(this.frustum.apex));
+        //         results.push({ object: mesh, point: center, depth });
+        //     }
+        // }
+
+        return results;
+    }
+
+    public intersectObject(
+        obj: THREE.Object3D,
+        options: CircularFrustumIntersectionOptions = {},
+    ): FrustumHitResult[] {
+        const results: FrustumHitResult[] = [];
+
+        obj.traverseVisible((object) => {
+            if (options.filter && !options.filter(object))
+                return;
+            if (!(object instanceof THREE.Mesh))
+                return;
+
+            results.push(...this.intersectMesh(object, !!options.findAll));
+        });
+
+        // sort closest first
+        results.sort((a, b) => a.depth - b.depth);
+        return results;
+    }
+}

client/src/helpers/hitTest.ts

@@ -1,19 +1,6 @@
 import * as THREE from 'three';
-import {
-    computeBoundsTree, disposeBoundsTree,
-    computeBatchedBoundsTree, disposeBatchedBoundsTree, acceleratedRaycast,
-} from 'three-mesh-bvh';
-import type { SceneSync } from '../layers/sceneSync';
 import type { SceneHelper } from './sceneHelper';
-
+import './bvh';
-// Add the extension functions
-THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
-THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
-THREE.Mesh.prototype.raycast = acceleratedRaycast;
-
-THREE.BatchedMesh.prototype.computeBoundsTree = computeBatchedBoundsTree;
-THREE.BatchedMesh.prototype.disposeBoundsTree = disposeBatchedBoundsTree;
-THREE.BatchedMesh.prototype.raycast = acceleratedRaycast;
 
 export type HitTest = {
     objects: THREE.Intersection<THREE.Object3D>[];

client/src/helpers/hooks/useInteration.ts

@@ -1,11 +1,13 @@
 import { useEffect, type RefObject } from "react";
 import * as THREE from "three";
+import { normalizeScreenPosition } from "../normalizeScreenPosition";
 
 const CLICK_THRESHOLD = 2; // px
 
 export type InteractionMouseEventArgs = {
-    position: { x: number, y: number },
+    position: THREE.Vector2Like,
-    pixelSize: { x: number, y: number },
+    screenSize: THREE.Vector2Like,
+    pixelSize: THREE.Vector2Like,
 };
 
 export type UseInteractionOptions = {
@@ -57,14 +59,8 @@ export function useInteraction(
 
             const onMouseUp = (e: MouseEvent) => {
                 isDragging = false;
-                if ((e.clientX - startX < CLICK_THRESHOLD) && (e.clientY - startY < CLICK_THRESHOLD)) {
+                if ((e.clientX - startX < CLICK_THRESHOLD) && (e.clientY - startY < CLICK_THRESHOLD))
-                    const rect = target.getBoundingClientRect();
+                    options.onMouseClick?.(normalizeScreenPosition({ x: e.clientX, y: e.clientY }, target));
-                    const position = {
-                        x: ((e.clientX - rect.left) / rect.width) * 2 - 1,
-                        y: -((e.clientY - rect.top) / rect.height) * 2 + 1,
-                    };
-                    options.onMouseClick?.({ position, pixelSize: { x: 2 / rect.width, y: 2 / rect.height } });
-                }
             };
 
             const onMouseMove = (e: MouseEvent) => {
@@ -84,12 +80,7 @@ export function useInteraction(
             };
 
             const onHover = (e: MouseEvent) => {
-                const rect = target.getBoundingClientRect();
+                options.onMouseMove?.(normalizeScreenPosition({ x: e.clientX, y: e.clientY }, target));
-                const position = {
-                    x: ((e.clientX - rect.left) / rect.width) * 2 - 1,
-                    y: -((e.clientY - rect.top) / rect.height) * 2 + 1,
-                };
-                options.onMouseMove?.({ position, pixelSize: { x: 2 / rect.width, y: 2 / rect.height } });
             };
 
             const onContextMenu = (e: Event) => e.preventDefault();

client/src/helpers/normalizeScreenPosition.ts

@@ -0,0 +1,27 @@
+import type { Vector2Like } from "three";
+
+export type NormalizedScreenPosition = {
+    position: Vector2Like,
+    screenSize: Vector2Like,
+    pixelSize: Vector2Like,
+}
+
+export function normalizeScreenPosition(pos: Vector2Like, viewport: DOMRect | HTMLElement): NormalizedScreenPosition {
+    let rect: DOMRect;
+    if (viewport instanceof DOMRect)
+        rect = viewport;
+    else
+        rect = viewport.getBoundingClientRect();
+
+    return {
+        position: {
+            x: ((pos.x - rect.left) / rect.width) * 2 - 1,
+            y: -((pos.y - rect.top) / rect.height) * 2 + 1,
+        },
+        screenSize: { x: rect.width, y: rect.height },
+        pixelSize: {
+            x: 2 / rect.width,
+            y: 2 / rect.height,
+        }
+    };
+}

client/src/helpers/point3dHelper.ts

@@ -1,53 +0,0 @@
-import * as THREE from "three";
-
-export type Point3d = {
-    position: THREE.Vector3,
-    mesh: THREE.Mesh,
-}
-
-export class Point3dHelper {
-
-    private scene: THREE.Scene;
-    private readonly baseMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
-
-    private readonly markers: Record<string, Point3d> = {};
-
-    constructor(scene: THREE.Scene) {
-        this.scene = scene;
-    }
-
-    private ensure(id: string): Point3d {
-        if (!this.markers[id]) {
-            this.markers[id] = {
-                position: new THREE.Vector3(),
-                mesh: new THREE.Mesh(
-                    new THREE.SphereGeometry(0.1, 8, 8),
-                    this.baseMaterial,
-                ),
-            };
-            this.scene.add(this.markers[id].mesh);
-        }
-
-        return this.markers[id];
-    }
-
-    private disposePoint(id: string) {
-        const point = this.markers[id];
-        if (point) {
-            this.scene.remove(point.mesh);
-            point.mesh.geometry.dispose();
-            delete (this.markers[id]);
-        }
-    }
-
-    public dispose() {
-        for (const id in this.markers)
-            this.disposePoint(id);
-    }
-
-    public set(id: string, position: THREE.Vector3Like) {
-        const point = this.ensure(id);
-        point.position.copy(position);
-        point.mesh.position.copy(position);
-    }
-}

client/src/helpers/sceneHelper.ts

@@ -1,26 +1,60 @@
-import type { Object3D, Object3DEventMap, Scene, Vector3 } from "three";
+import type { ColorRepresentation, Object3D, Object3DEventMap, OrthographicCamera, PerspectiveCamera, Scene, Vector2Like, Vector3, Vector3Like } from "three";
-import { Point3dHelper } from "./point3dHelper";
 import { SceneSync } from "../layers/sceneSync";
 import { GeometryCache } from "../layers/geometryCache";
 import type { Id } from "../types";
+import { CircularFrustumIntersection, type FrustumHitResult } from "./circularFrustumIntersect";
+import { CircularFrustum } from "./circularFrustum";
+import './bvh';
+import { VolatileGeometryHelper, type VolatileGeometryOptions } from "./volatileGeometryHelper";
 
 export class SceneHelper {
 
     private sync: SceneSync | undefined;
 
-    private pointHelper: Point3dHelper | undefined;
+    private hints: VolatileGeometryHelper | undefined;
+    private camera: PerspectiveCamera | OrthographicCamera | undefined;
 
-    constructor() {
+    private mouseFrustum = new CircularFrustumIntersection(new CircularFrustum());
 
-    }
+    public initialize(
-
+        scene: Scene,
-    public initialize(scene: Scene) {
+        camera: PerspectiveCamera | OrthographicCamera,
-        this.pointHelper = new Point3dHelper(scene);
+    ) {
+        this.hints = new VolatileGeometryHelper(scene, camera);
+        this.camera = camera;
 
         this.sync = new SceneSync(scene, new GeometryCache());
         this.sync.addWholeModel();
     }
 
+    public buildMouseFrustum(
+        mouseNormalized: Vector2Like,
+        screenSize: Vector2Like,
+        radius: number = 15,
+    ): void {
+        if (!this.camera)
+            throw new Error('Camera is not initialized');
+
+        this.mouseFrustum.frustum.setFromScreenPoint(
+            mouseNormalized,
+            screenSize,
+            this.camera,
+            radius,
+        );
+    }
+
+    public hitTest(
+        mouseNormalized: Vector2Like,
+        screenSize: Vector2Like,
+    ): FrustumHitResult[] {
+        this.buildMouseFrustum(mouseNormalized, screenSize);
+
+        const result: FrustumHitResult[] = [];
+        for (const object of this.objects)
+            result.push(...this.mouseFrustum.intersectObject(object));
+        return result;
+    }
+
     public setSelection(faceIds: Id[]) {
         this.sync?.setSelected(faceIds);
     }
@@ -30,17 +64,40 @@ export class SceneHelper {
         return this.sync?.meshes ?? [];
     }
 
-    public setPoint(id: string, point: Vector3) {
+    public showHint(id: string, position: Vector3Like, options: VolatileGeometryOptions) {
-        this.pointHelper?.set(id, point);
+        this.hints?.set(id, position, options);
     }
 
-    public clearPoints() {
+    public showPoint(id: string, position: Vector3Like, size: number = 0.05, color: ColorRepresentation = 0xffffff) {
-        this.pointHelper?.dispose();
+        this.hints?.set(id, position, { kind: "point", size, color });
+    }
+
+    public showCircle(id: string, position: Vector3Like, radius: number, thickness: number = 0.1, color: ColorRepresentation = 0xffffff) {
+        this.hints?.set(id, position, { kind: "circle", radius, thickness, color });
+    }
+
+    public showMouseFrustum() {
+        if (!this.camera)
+            throw new Error('Camera is not initialized');
+
+        const frustum = this.mouseFrustum.frustum;
+        const cameraDepth = this.camera.far - this.camera.near;
+        const nearDepth = this.camera.near + cameraDepth * 0.01;
+        const farDepth = this.camera.far - cameraDepth * 0.01;
+        const near = frustum.getCircleAtDepth(nearDepth);
+        const far = frustum.getCircleAtDepth(farDepth);
+
+        this.showCircle('hittest_near', near.center, near.radius, 0.05);
+        this.showCircle('hittest_far', far.center, far.radius, 0.1, 'red');
+    }
+
+    public clear() {
+        this.hints?.dispose();
     }
 
     public dispose() {
         this.sync?.dispose();
 
-        this.clearPoints();
+        this.clear();
     }
 }

client/src/helpers/volatileGeometryHelper.ts

@@ -0,0 +1,92 @@
+import * as THREE from "three";
+
+export type VolatileGeometry = {
+    mesh: THREE.Mesh,
+}
+
+export type VolatileGeometryBaseOptions = {
+    color: THREE.ColorRepresentation,
+}
+
+
+export type VolatileGeometryPointOptions = VolatileGeometryBaseOptions & {
+    kind: 'point',
+    size: number,
+}
+
+export type VolatileGeometryCicleOptions = VolatileGeometryBaseOptions & {
+    kind: 'circle',
+    radius: number,
+    thickness: number,
+}
+
+export type VolatileGeometryOptions = VolatileGeometryPointOptions | VolatileGeometryCicleOptions;
+
+export class VolatileGeometryHelper {
+
+    private scene: THREE.Scene;
+    private camera: THREE.PerspectiveCamera | THREE.OrthographicCamera;
+
+    private readonly baseMaterial = new THREE.MeshBasicMaterial({ color: 'red' });
+
+    private readonly markers: Record<string, VolatileGeometry> = {};
+
+    constructor(scene: THREE.Scene, camera: THREE.PerspectiveCamera | THREE.OrthographicCamera) {
+        this.scene = scene;
+        this.camera = camera;
+    }
+
+    private createGeometry(options: VolatileGeometryOptions): THREE.BufferGeometry {
+        switch (options.kind) {
+            case 'point':
+                return new THREE.SphereGeometry(options.size);
+            case 'circle':
+                return new THREE.TorusGeometry(options.radius, options.thickness * options.radius);
+            default:
+                throw new Error('Unknown volatile geometry type');
+        }
+    }
+
+    private ensure(id: string, options: VolatileGeometryOptions): VolatileGeometry {
+        if (!this.markers[id]) {
+            const material = this.baseMaterial.clone();
+            material.color.set(options.color);
+            this.markers[id] = {
+                mesh: new THREE.Mesh(
+                    this.createGeometry(options),
+                    material,
+                ),
+            };
+            this.scene.add(this.markers[id].mesh);
+        }
+
+        return this.markers[id];
+    }
+
+    private disposeGeometry(id: string) {
+        const point = this.markers[id];
+        if (point) {
+            this.scene.remove(point.mesh);
+            point.mesh.geometry.dispose();
+            delete (this.markers[id]);
+        }
+    }
+
+    public dispose() {
+        for (const id in this.markers)
+            this.disposeGeometry(id);
+    }
+
+    public set(id: string, position: THREE.Vector3Like, options: VolatileGeometryOptions) {
+        const point = this.ensure(id, options);
+
+        // additional actions
+        switch (options.kind) {
+            case 'circle':
+                point.mesh.lookAt(this.camera.position);
+                break;
+        }
+
+        point.mesh.position.copy(position);
+    }
+}

client/src/layers/sceneSync.ts

@@ -38,8 +38,9 @@ export class SceneSync {
             const meshes = Geometry
                 .tessellateSolid(id)
                 .map(meshToDto);
-            for (const mesh of meshes)
+            this.addSolid(meshes[2]);
-                this.addSolid(mesh);
+            // for (const mesh of meshes)
+            //     this.addSolid(mesh);
         }
     }