← ClaudeAtlas

vectojs-threelisted

Use when embedding VectoJS in Three.js or WebXR with @vectojs/three, ThreeAdapter, canvas textures, raycaster input, UV-to-scene event routing, hover/wheel behavior, or disposal.
vectojs/vectojs-skills · ★ 0 · AI & Automation · score 72
Install: claude install-skill vectojs/vectojs-skills
# VectoJS Three Use this skill to place a live VectoJS 2D interface onto a Three.js texture and route 3D pointer input back into the VectoJS scene. ## Integration workflow 1. Install `@vectojs/core`, `@vectojs/three`, `three`, and `@vectojs/ui` if using UI components. 2. Create one `ThreeAdapter` per VectoJS panel texture. 3. Add VectoJS entities to `adapter.vectoScene`, then start the inner scene. 4. Add `adapter.mesh` or the adapter texture/material to the host Three.js scene. 5. In the host pointer/wheel loop, raycast against the adapter mesh and call `adapter.updateIntersection(...)`. 6. Call `adapter.dispose()` when removing the panel. Read `references/three-recipes.md` for snippets. ## Constraints - The default output is a flat textured plane, not DOM rendered in 3D. - VectoJS logical hit-testing remains 2D even when the mesh is transformed in world space. - The host application owns the camera, renderer, controls, XR session, raycaster, and occlusion rules. - Raycast UVs should map to the adapter’s logical `width`/`height`; do not use backing-store size for layout math. - Texture resolution affects sharpness and upload cost. Choose dimensions for the viewing distance. ## Common mistakes | Mistake | Correction | | --------------------------------------------- | -------------------------------------------------------------------------------- | | Adding an o