vectojs-threelisted
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