Skip to content

Extract duplicated Three.js boilerplate into shared utilities#10

Closed
CloudAI-X wants to merge 1 commit into
mainfrom
devin/1783629942-shared-utils
Closed

Extract duplicated Three.js boilerplate into shared utilities#10
CloudAI-X wants to merge 1 commit into
mainfrom
devin/1783629942-shared-utils

Conversation

@CloudAI-X

Copy link
Copy Markdown
Owner

Summary

The skill files repeated the same setup/teardown boilerplate over and over — renderer/scene bootstrap, the requestAnimationFrame loop, resize handling, resource disposal, and the mouse→NDC conversion (the (clientX / innerWidth) * 2 - 1 line alone appeared ~8× in threejs-interaction). This PR extracts those patterns into a single shared module and points the examples at it.

New shared module lib/three-utils.js (ESM, three as a peer dep):

createRenderer(opts)                -> configured WebGLRenderer (size + clamped pixelRatio)
createScene(opts)                   -> { scene, camera, renderer }
resizeRendererToDisplay(cam, r, o)  -> resize cam/renderer/composer (+ onResize cb)
bindResize(cam, r, o)               -> window resize listener; returns unsubscribe
createRenderLoop({renderer,scene,camera,update,composer}) -> { start, stop }, Clock delta/elapsed
getPointerNDC(event, out?, element?)-> {x,y} NDC (handles touch + element rect)
disposeObject(obj, {recursive})     -> dispose geometry/material(s)/textures + detach
clampedPixelRatio(max) / getViewportSize()

Docs refactor — duplicated blocks now import the helpers instead of re-implementing them:

  • threejs-interaction: all pointer→NDC conversions replaced with getPointerNDC(...).
  • threejs-animation / threejs-postprocessing: Quick Start loops use createRenderLoop (the latter renders through the composer); postprocessing resize uses bindResize with an onResize callback for pass-specific resolutions.
  • threejs-fundamentals: keeps its explanatory boilerplate (it's the reference) but cross-references the helpers.
  • New skills/threejs-utils/SKILL.md documents the API; README.md gets a row + a Shared Utilities section.

Tooling — the repo had none. Added package.json (Prettier + node --test), test/three-utils.test.mjs (6 tests for the pure helpers getPointerNDC / disposeObject / clampedPixelRatio), a .github/workflows/ci.yml running format:check + test, and .gitignore/.prettierignore. All existing markdown was already Prettier-clean, so prettier --check . passes repo-wide.

Notes

The three version pin uses a widely-used release published well over a week ago; three is declared as a peer dependency since consumers bring their own.

Link to Devin session: https://app.devin.ai/sessions/f592e1dac0c44cc68b9bb49a2947e933
Requested by: @CloudAI-X

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@CloudAI-X CloudAI-X self-assigned this Jul 9, 2026
@devin-ai-integration

Copy link
Copy Markdown

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

@CloudAI-X CloudAI-X closed this Jul 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant