Stacks

Extract a Shared Helper from Duplicated Code in Three.js with Atlas in 2026

Updated 7 min read

Atlas helps Three.js developers in 2026 efficiently extract shared helper functions from duplicated code, ensuring a cleaner codebase and preventing common issues like GPU memory leaks. It leverages semantic search to find near-identical logic, then uses `write` to create new modules and `apply_patch` to replace duplicates, all while integrating with `vitest`, `npm`, and `prettier` for a robust workflow.

How Atlas Finds Duplicated Three.js Logic Semantically

Atlas identifies duplicated Three.js logic by semantic meaning, not just exact text, a significant advantage over traditional `grep` in 2026. It uses hybrid semantic and keyword retrieval, fused by reciprocal rank fusion, to surface code blocks that perform the same operation even if variable names or formatting differ across 2 or more files.

When refactoring a Three.js project, identical logic often appears in different contexts, such as initializing a `WebGLRenderer` or disposing of `Geometry` and `Material` instances. For example, a common pattern for releasing GPU resources might be duplicated across `src/scenes/MyScene.js` and `src/components/ObjectViewer.js`. Atlas's `codebase_search` tool indexes your code by AST declarations using tree-sitter, allowing it to understand the structure and intent of the code. This means it can find all instances of a specific disposal pattern, like `geometry.dispose(); material.dispose();`, even if one file uses `myGeometry` and another uses `this.geometry`. You can even build Atlas's code index with local Ollama embeddings, keeping your proprietary Three.js code off third-party servers, ensuring privacy and security for your 3D projects.

Creating a New Three.js Helper Module with Atlas

After identifying duplicated logic, Atlas creates a new Three.js helper module using its `write` tool, streamlining the refactoring process in 2026. This tool drafts the new file, for instance, `src/utils/disposeThreeObject.js`, and presents a full diff for your approval before any changes are written to disk, ensuring you maintain control over your codebase.

Once you've confirmed the duplicated logic, such as a common `dispose` pattern for Three.js objects, Atlas can generate a new, dedicated module. For instance, if you have repeated code for safely disposing of `BufferGeometry` and `Material` instances to prevent GPU memory leaks, you might ask Atlas to create `src/utils/disposeThreeObject.js`. Atlas will propose the content for this new file, including the necessary imports from `three` and the exported helper function. Before writing, Atlas presents a unified diff of the proposed file, allowing you to review the exact code that will be added. This permission-gated step ensures that the new helper aligns with your project's coding standards, including formatting enforced by `prettier`, and is ready for integration into your `vitest` suite.

Replacing Duplicates with Helper Calls and Reviewing Patches

Atlas replaces each instance of duplicated Three.js code with a call to the new helper using `apply_patch`, generating one reviewable patch per file in 2026. This granular approach allows you to review and approve each change independently, ensuring that every modification to your scene graph setup or render loop is correct and safe.

After the shared helper module is created, Atlas systematically replaces each identified duplicate with a call to the new function. For example, if `src/scenes/MyScene.js` and `src/components/ObjectViewer.js` both contained the same disposal logic, Atlas would use `apply_patch` to modify each file. It generates a separate git patch for each file, showing the removal of the old duplicated code and the addition of the new helper call, like `disposeThreeObject(geometry, material)`. This means you get a distinct diff for `src/scenes/MyScene.js` and another for `src/components/ObjectViewer.js`. Atlas computes a unified diff for every file edit and surfaces it for approval before writing, allowing you to verify that the refactoring correctly integrates with your existing Three.js code and doesn't introduce regressions. You can then run your `vitest` suite with `npm test` after each patch to confirm functionality.

Ensuring Code Quality and Safety with Three.js Tooling

Atlas integrates directly with your Three.js development toolchain, running `vitest` and `prettier` behind permission prompts to ensure code quality and safety in 2026. After each `apply_patch` operation, Atlas can execute `npm test` to validate that no regressions were introduced, and then `prettier` to maintain consistent formatting across your codebase.

Maintaining a high standard of code quality is paramount in Three.js projects, especially when dealing with performance-critical aspects like render loops or object disposal. Atlas connects to Model Context Protocol servers and exposes their tools to the agent, allowing it to interact with your local environment. After each `apply_patch` operation, Atlas can run `bash` commands like `npm test` to execute your `vitest` suite, verifying that the refactoring has not broken any existing functionality. Furthermore, Atlas can run `npm run format` (or `prettier . --write`) to ensure that all modified files adhere to your project's formatting standards. Every Atlas tool call is permission-gated against allow, ask, and deny rules, giving you explicit control over when and how these commands are executed. Atlas also reads git branches, status, and diffs, and can stage and create commits on your behalf, providing a complete and safe refactoring experience.

Step by step

  1. 01Initialize Atlas in your Three.js project where `package.json` depends on `three`.
  2. 02Ask Atlas to `codebase_search` for the behavior of the duplicated logic, such as 'dispose Three.js geometry and material', to find near-duplicate implementations that `grep` would miss.
  3. 03Use `read` to examine each search hit, confirming that the copies are genuinely equivalent and suitable for collapsing into a single helper, paying attention to Three.js specific disposal patterns.
  4. 04Instruct Atlas to `write` the new shared helper module, for example, `src/utils/threeObjectDisposer.js`, which will include the common Three.js disposal logic. Review the full diff in the permission prompt before creation.
  5. 05For each duplicated instance, use `apply_patch` to replace the copy with a call to the new helper. Atlas will present one reviewable patch per file, such as `src/scenes/MyScene.js`.
  6. 06After each `apply_patch`, run your `vitest` suite using `bash -c 'npm test'` to ensure no regressions are introduced in your Three.js application.
  7. 07Once all duplicates are replaced, run `bash -c 'prettier . --write'` to format all modified files according to your project's standards.
  8. 08Finally, use `bash -c 'grep -r "geometry.dispose()" .'` (or similar for your specific logic) to confirm no surviving copies of the original duplicated Three.js code remain.

Frequently asked questions

How does Atlas find duplicated Three.js code that `grep` misses?
Atlas uses `codebase_search` with hybrid semantic and keyword retrieval, indexing code by AST declarations. This allows it to identify functionally identical Three.js code blocks, like object disposal patterns, even if variable names or formatting differ, which `grep` cannot do.
Can Atlas help prevent GPU memory leaks in Three.js when refactoring?
Yes, by extracting common Three.js disposal logic for geometries, materials, and textures into a shared helper, Atlas helps ensure consistent and correct resource release, directly preventing GPU memory leaks that often occur in complex 3D scenes.
How does Atlas ensure the new Three.js helper module is correct?
When creating a new helper with `write`, Atlas presents a full unified diff for your review and approval. This allows you to inspect the proposed code, ensure it aligns with Three.js best practices, and verify it's ready for your `vitest` suite before it's written to disk.
What if I need to roll back a refactoring change made by Atlas in my Three.js project?
Atlas snapshots file changes as git patches, so every edit is diffed and can be rolled back. Since `apply_patch` creates one patch per file, you can easily revert individual changes to your Three.js components or scenes using standard git commands.
Does Atlas integrate with my existing Three.js testing setup like `vitest`?
Absolutely. Atlas uses the `bash` tool to run your existing `vitest` suite via `npm test` after each code modification. This ensures that any refactoring, such as extracting a Three.js helper, does not introduce regressions and maintains the integrity of your application.
Can Atlas handle Three.js code that uses inline GLSL shader strings?
Yes, Atlas can read your scene graph setup, render loop, materials, and any GLSL you inline as shader strings. Its AST-based indexing helps it understand the structure of your Three.js project, regardless of where the shader code resides.
How does Atlas ensure my Three.js code stays formatted with `prettier`?
Atlas can execute `bash -c 'prettier . --write'` as part of its workflow. After applying patches or creating new files, Atlas can run your `prettier` formatter behind a permission prompt, ensuring all modified Three.js files adhere to your project's consistent formatting standards.

Try Atlas in your terminal

The terminal-native AI coding agent. Free core, single binary.

Install Atlas

Related guides

Extract a Shared Helper from Duplicated Code with Atlas (2026 Workflow)

How to extract a shared helper from duplicated code with Atlas in 2026: codebase_search finds the copies by meaning, write creates the module, apply_patch swaps each call.

Atlas for Three.js: Terminal-Native AI Coding for Scenes, Materials, and Disposal in 2026

Atlas is a terminal-native AI coding agent for Three.js in 2026, where geometry, material, and texture disposal is the difference between a demo and a leak.

Run the Three.js Test Suite and Triage Failures with Atlas in 2026

For Three.js developers in 2026, Atlas transforms overwhelming vitest output into a prioritized list of distinct root causes, streamlining debugging and ensuring robust scenes.

Upgrade a Three.js Dependency and Fix Breakage with Atlas in 2026

In 2026, Atlas helps Three.js developers upgrade dependencies like 'three' itself, fixing compile and test failures by integrating with 'npm', 'vitest', and 'prettier'.

Diagnose a hanging or long-running command in Three.js with Atlas in 2026

In 2026, use Atlas to diagnose why your Three.js `npm` or `vitest` commands are hanging or running slowly. Identify if a process is genuinely slow or silently blocked on interactive input, and get it unstuck with

Refactor a legacy Three.js module with Atlas in 2026

Safely refactor legacy Three.js modules in 2026 with Atlas. Map callsites, pin behavior with vitest, apply changes with apply_patch, and ensure no regressions.

Rename a symbol across the repo in Three.js with Atlas in 2026

Refactor Three.js code with Atlas in 2026. Rename functions, classes, or constants across your entire repository, ensuring all references are updated, including those missed by `grep` alone. Atlas uses `lsp`, `grep`

Add a Regression Test for a Three.js Bug Fix with Atlas in 2026

Lock in Three.js bug fixes with Atlas by writing red-first regression tests using vitest and npm, ensuring your scenes remain leak-free and performant.

Browse this resource hub