Technical Implementation & WebXR

How to programmatically add clickable hotspots and multimedia pop-ups in a Three.js 3D environment?

three-js, hotspots, development, interactive

In Three.js, create hotspot markers as sprite meshes or HTML overlay elements positioned in 3D space using CSS2DRenderer. Use raycasting (THREE.Raycaster) to detect mouse/touch intersections with hotspot objects. On click, trigger pop-up overlays containing images, video, text, or links. For VR mode, implement gaze-based interaction where hovering the reticle on a hotspot for a threshold duration triggers the same action.

three-jshotspotsdevelopmentinteractive

Was this article helpful?

Back to Knowledge Base

Related Articles

Technical Implementation & WebXR

How to completely fix tripod shadows and the nadir in a 360 real estate virtual tour?

The nadir (bottom blind spot showing the tripod) is fixed through several methods: automated AI nadir patching tools in platforms like Matterport handle it automatically. For manual workflows, use Photoshop's clone stamp on the equirectangular projection, or capture an extra handheld shot looking down from each position and composite it in. Some photographers also use nadir caps — pre-made branded images that cover the tripod position.

Technical Implementation & WebXR

Why are the vertical lines converging in my real estate 360 panoramic interior photos?

Converging verticals in 360 panoramas are caused by lens distortion and imprecise leveling of the camera during capture. The 360 camera must be perfectly level (use a leveling base or tripod with bubble level). In post-processing, apply tilt-shift corrections in PTGui or your stitching software. Some cameras offer in-camera horizon leveling that corrects minor misalignment automatically during capture.

Technical Implementation & WebXR

How to optimize a large 3D real estate Gaussian Splat model to load faster on mobile browsers?

Gaussian Splatting models can be massive. Optimize by: reducing splat count through decimation while preserving visual quality, implementing level-of-detail (LOD) streaming that loads nearby detail first, compressing the point cloud data with quantization, and using progressive loading so users see a coarse preview within seconds while full detail streams in the background. Three.js and custom WebGL shaders are the primary tools for browser-based splat rendering.

Technical Implementation & WebXR

What causes severe stitching errors when capturing a 3D virtual tour in a narrow hallway?

Narrow hallways create parallax errors because nearby surfaces shift dramatically between the camera's multiple lenses. The stitching algorithm struggles when objects are very close to the camera (under 1–2 meters). Solutions: position the camera in the center of the hallway, use a lens with less parallax offset, capture more positions closer together, and in post-production use parallax-aware stitching software that handles close-range geometry.