3d-virtual-tour

Build guided and interactive virtual tours through 3D environments with Three.js.

6.3k|743|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/MengTo/Skills --skill 3d-virtual-tour-mengto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 3d-virtual-tour
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/3d/3d-virtual-tour
Command: npx skills add https://github.com/MengTo/Skills --skill 3d-virtual-tour-mengto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating navigable 3D walkthroughs requires coordinating camera paths, room navigation, orbit inspection, and asset loading without clipping through walls or losing state during mode transitions. ## Core Features & Use Cases - Authored Camera Routes: Define timed Hermite or spline-based camera paths through real openings with stable horizons and arc-length sampling. - Navigation State Machine: Give one controller final camera ownership with smooth handoffs between guided tours, room destinations, and orbit inspection. - Room and Floor-Plan Integration: Drive room cards, chapter rails, floor-plan regions, and hotspots from a single stop registry with synchronized labels and URLs. - Use Case: Build an architectural walkthrough for a real-estate listing where viewers follow a guided route through rooms, jump to destinations from a floor plan, and inspect the exterior model with orbit controls. ## Quick Start Use the 3d-virtual-tour skill to build a guided walkthrough of this Three.js scene with room navigation, floor-plan links, and orbit inspection.

Frequently Asked Questions about 3d-virtual-tour

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a guided camera path in Three.js?▼

Store route keys as progress, position, look target, and field of view, then interpolate with timed Hermite keys or a CatmullRomCurve3 spline. Use arc-length sampling for constant speed and quaternion slerp for orientation to avoid direction flips.

How to switch between guided tour and orbit controls in Three.js?▼

Use a navigation state machine where only one controller writes the camera per frame. Save the route coordinate and playback state before entering inspection, blend position and orientation during handoff, and restore the saved state on return.

Can I build a virtual tour from panoramic images only?▼

Yes, but use linked panorama viewpoints rather than implying navigable geometric depth. Panoramic sources lack real 3D geometry, so free walking and collision-based movement are not applicable to that format.

Why does my Three.js camera path clip through walls?▼

Smooth curves can cut corners between collision-free keys even when waypoints are valid. Inspect the complete interpolated path including near-plane clearance against walls, ceilings, and doorframes, and place keys before, within, and after narrow openings.

Does OrbitControls support first-person walkable interiors?▼

No, OrbitControls alone does not provide a walkable interior. Free walking requires a first-person controller such as PointerLockControls with collision detection, floor following, and clearance checks constrained to walkable surfaces.