cesartevisual/threejs-skills

threejs-scene

Build or correct Three.js scene hierarchies, camera framing, coordinate transforms, and responsive renderer lifecycles.

소스 보기

사용 방법

  1. 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
  2. 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
  3. 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/cesartevisual/threejs-skills --skill threejs-scene

시작 전 확인

  • 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
  • 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

Scenes, Cameras, and Math

Use the project's installed versions and existing architecture. These instructions supplement the user's task; they do not authorize unrelated changes or external actions.

Inspect the host element size, renderer ownership, world scale, handedness, up axis, and camera type before changing the scene. Prefer a single renderer for one experience; use viewports/scissors when multiple views genuinely benefit from shared resources.

Separate imported model transforms from interaction pivots using groups. Distinguish local and world coordinates; update world matrices before synchronous bounds or coordinate queries when transforms just changed. Use quaternion interpolation for orientations and reusable vectors in hot paths. Avoid repeatedly converting between Euler angles and quaternions.

Fit a perspective camera against object bounds and both horizontal and vertical field of view; fitting only height can crop a wide subject. Choose a positive near plane and useful far plane for perspective depth precision. Orthographic cameras may use a zero near plane. Update the projection matrix after projection changes.

Size from the canvas container with ResizeObserver, skip zero dimensions, and keep CSS size separate from drawing-buffer size. Apply a deliberate pixel-ratio budget. Update camera, renderer, and size-dependent render targets together. Do not overwrite layout CSS with renderer sizing.

Use one render-loop owner. setAnimationLoop integrates with XR; an existing framework or requestAnimationFrame loop can be valid outside XR. Stop the loop, disconnect observers, remove listeners, and release owned GPU resources on teardown. Renderer disposal alone does not dispose scene resources.

Verify a non-square container, mobile orientation, hidden-to-visible transitions, repeated mounting, and framing of unusually wide or tall assets.

API reference

Consult the official documentation for exact signatures and revision-specific behavior. If documentation access is unavailable, inspect installed types/source and state any remaining uncertainty.

같은 저장소의 Skills

더 많은 Skills

모든 Skills