feat(core): slim createTresApp alternative for tree-shakeable Three.js usage by alvarosabu · Pull Request #1345 · Tresjs/tres

alvarosabu · 2026-02-19T17:03:59Z

Summary

Add createTresApp programmatic API as a slim alternative to <TresCanvas> that does not auto-extend the full THREE namespace, enabling proper tree-shaking
Add slim.ts entry point (@tresjs/core/slim) exporting only createTresApp
Move extend(THREE) into TresCanvas directly (no change for existing users)
Lazy-load devtools registration in Context (dev-only, dynamic import)
Add apps/bundle-test app with Rollup Visualizer to compare full vs slim build sizes
Add playground demo page for the manual-extend approach

Usage

import { createTresApp } from '@tresjs/core/slim'
import { Mesh, BoxGeometry, MeshStandardMaterial } from 'three'
import MyScene from './MyScene.vue'

const app = createTresApp(canvas, { windowSize: true })
app.extend({ Mesh, BoxGeometry, MeshStandardMaterial })
app.render(MyScene)

Test plan

<TresCanvas> still works as before (extends all of THREE automatically)
createTresApp renders scene correctly with only registered classes
createTresApp with no extend() call does NOT include unused Three.js classes in bundle
Existing tests pass (pnpm t)
Bundle-test app builds and visualizer shows size difference between full/slim modes

Closes #1292
Closes TRES-214

…ss registration - Introduced the `extends` prop in the `Context` component to allow users to specify which Three.js classes to register, enabling tree-shaking. - Updated the `TresCanvas` component to utilize the `extends` prop. - Added a new `index.vue` page for manual extension demonstration. - Updated routing to include the new manual extend page. - Added tests to verify the behavior of the `extends` prop.

netlify · 2026-02-19T17:04:05Z

✅ Deploy Preview for tresjs-docs ready!

Name	Link
🔨 Latest commit	`7a143c9`
🔍 Latest deploy log	https://app.netlify.com/projects/tresjs-docs/deploys/69afafc3240b8400083ff714
😎 Deploy Preview	https://deploy-preview-1345--tresjs-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-02-19T17:04:05Z

✅ Deploy Preview for tresjs-lab ready!

Name	Link
🔨 Latest commit	`7a143c9`
🔍 Latest deploy log	https://app.netlify.com/projects/tresjs-lab/deploys/69afafc3302273000849460a
😎 Deploy Preview	https://deploy-preview-1345--tresjs-lab.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-02-19T17:04:06Z

✅ Deploy Preview for cientos-tresjs ready!

Name	Link
🔨 Latest commit	`7a143c9`
🔍 Latest deploy log	https://app.netlify.com/projects/cientos-tresjs/deploys/69afafc357ed050008e9217f
😎 Deploy Preview	https://deploy-preview-1345--cientos-tresjs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

pkg-pr-new · 2026-02-19T17:11:55Z

Open in StackBlitz

@tresjs/cientos

npm i https://pkg.pr.new/@tresjs/cientos@1345

@tresjs/core

npm i https://pkg.pr.new/@tresjs/core@1345

@tresjs/eslint-config

npm i https://pkg.pr.new/@tresjs/eslint-config@1345

@tresjs/leches

npm i https://pkg.pr.new/@tresjs/leches@1345

@tresjs/nuxt

npm i https://pkg.pr.new/@tresjs/nuxt@1345

@tresjs/post-processing

npm i https://pkg.pr.new/@tresjs/post-processing@1345

commit: 7a143c9

- Created a new bundle-test application with multiple HTML entry points for different build modes (full, slim, createTres). - Added Vue components for rendering scenes using Tres.js, including AppFull.vue and SceneCreateTres.vue. - Configured Vite for building the application with rollup visualizer integration. - Updated pnpm-lock.yaml to include new dependencies and devDependencies for the bundle-test app. - Introduced various HTML files for visualizing build statistics and rendering different app configurations.

- Added `tsdown` as a dependency and created build scripts for slim and full configurations. - Introduced new HTML stats files for both slim and full builds. - Updated `vite.config.ts` to target ESNext and disable module preload polyfill. - Enhanced `pnpm-lock.yaml` with new dependencies and updated versions for existing packages.

Tinoooo · 2026-03-11T05:26:15Z

+    expect(catalogue.value).toHaveProperty('Mesh')
+    expect(catalogue.value).toHaveProperty('BoxGeometry')
+    sceneWrapper.unmount()
+  })


suggestion(non-blocking): It would be nice to have a test for the manual extending here.

Tinoooo · 2026-03-11T05:28:34Z

+import { extend as catalogueExtend } from '../../core/catalogue'
+import type { TresContext } from '../useTresContextProvider'
+
+type ContextExposed = { context: ShallowRef<TresContext>, dispose: () => void }


suggestion: The lint check fails. This should be an interface.

Suggested change

type ContextExposed = { context: ShallowRef<TresContext>, dispose: () => void }

interface ContextExposed { context: ShallowRef<TresContext>, dispose: () => void }

Tinoooo · 2026-03-11T05:30:54Z

+  Object.assign(canvas.style, {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    position: windowSize ? 'fixed' : 'relative',
+    top: '0',
+    left: '0',
+    pointerEvents: 'auto',
+    touchAction: 'none',
+  })


suggestion: For better maintainability, I suggest putting the styles in a central position and using them in both this composable and TresCanvas.

Tinoooo · 2026-03-11T05:34:20Z

+  let contextInstance: ContextExposed | null = null
+  const eventHandlers: Partial<Record<keyof ContextEmits, ((...args: unknown[]) => void)[]>> = {}
+
+  function buildEmitBindings(): Record<string, (...args: unknown[]) => void> {


nitpick: I think arrow functions are more common in our codebase.

Suggested change

function buildEmitBindings(): Record<string, (...args: unknown[]) => void> {

const buildEmitBindings = (): Record<string, (...args: unknown[]) => void> => {

Tinoooo · 2026-03-11T05:56:42Z

+    on(event, handler) {
+      if (!eventHandlers[event]) {
+        eventHandlers[event] = []
+      }
+      eventHandlers[event]!.push(handler as (...args: unknown[]) => void)
+      return tresApp
+    },


question: How is this supposed to work? eventHandlers is already used above in it's original state. I tried using event hooks for context emits here, but it dod not work. What was the intention here?

Tinoooo · 2026-03-11T06:03:37Z

+/* import {
+  AmbientLight,
+  BoxGeometry,
+  DirectionalLight,
+  Mesh,
+  MeshStandardMaterial,
+  PerspectiveCamera,
+} from 'three'
+import { createTresApp } from '@tresjs/core/slim'
+import SceneCreateTres from './SceneCreateTres.vue'
+
+const canvas = document.getElementById('canvas') as HTMLCanvasElement
+
+const root = createTresApp(canvas, { windowSize: true })
+
+root
+  .extend({ AmbientLight, BoxGeometry, DirectionalLight, Mesh, MeshStandardMaterial, PerspectiveCamera })
+  .render(SceneCreateTres)
+ */


Suggested change

/* import {

AmbientLight,

BoxGeometry,

DirectionalLight,

Mesh,

MeshStandardMaterial,

PerspectiveCamera,

} from 'three'

import { createTresApp } from '@tresjs/core/slim'

import SceneCreateTres from './SceneCreateTres.vue'

const canvas = document.getElementById('canvas') as HTMLCanvasElement

const root = createTresApp(canvas, { windowSize: true })

root

.extend({ AmbientLight, BoxGeometry, DirectionalLight, Mesh, MeshStandardMaterial, PerspectiveCamera })

.render(SceneCreateTres)

*/

Tinoooo · 2026-03-11T06:09:28Z

issue/suggestion/question: The bundle test pages throw an error and don't show anything. Shall we maybe not have the bundle-test folder in the repo? This might reduce maintenance work in the future.

alvarosabu requested a review from Tinoooo February 19, 2026 17:05

lint

561b807

alvarosabu changed the title ~~feat(core): add extends prop to TresCanvas for selective Three.js class registration~~ feat(core): selective Three.js registration via extends prop and slim createTresApp Feb 20, 2026

alvarosabu changed the title ~~feat(core): selective Three.js registration via extends prop and slim createTresApp~~ feat(core): slim createTresApp alternative for tree-shakeable Three.js usage Feb 20, 2026

alvarosabu marked this pull request as draft February 20, 2026 08:30

alvarosabu added 3 commits February 24, 2026 09:04

Merge branch 'main' into feat/1292-manual-extends-opt-in

3368c15

Merge branch 'main' into feat/1292-manual-extends-opt-in

c55b3eb

alvarosabu marked this pull request as ready for review March 10, 2026 05:44

Merge branch 'main' into feat/1292-manual-extends-opt-in

7a143c9

Tinoooo requested changes Mar 11, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(core): slim createTresApp alternative for tree-shakeable Three.js usage#1345

feat(core): slim createTresApp alternative for tree-shakeable Three.js usage#1345
alvarosabu wants to merge 7 commits intomainfrom
feat/1292-manual-extends-opt-in

alvarosabu commented Feb 19, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Feb 19, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Feb 19, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Feb 19, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Feb 19, 2026 •

edited

Loading

Uh oh!

Tinoooo Mar 11, 2026

Uh oh!

Tinoooo Mar 11, 2026

Uh oh!

Tinoooo Mar 11, 2026

Uh oh!

Tinoooo Mar 11, 2026

Uh oh!

Tinoooo Mar 11, 2026

Uh oh!

Tinoooo Mar 11, 2026

Uh oh!

Tinoooo Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	type ContextExposed = { context: ShallowRef<TresContext>, dispose: () => void }
	interface ContextExposed { context: ShallowRef<TresContext>, dispose: () => void }

	function buildEmitBindings(): Record<string, (...args: unknown[]) => void> {
	const buildEmitBindings = (): Record<string, (...args: unknown[]) => void> => {

Uh oh!

Conversation

alvarosabu commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Usage

Test plan

Uh oh!

netlify Bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for tresjs-docs ready!

Uh oh!

netlify Bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for tresjs-lab ready!

Uh oh!

netlify Bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cientos-tresjs ready!

Uh oh!

pkg-pr-new Bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Tinoooo Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Tinoooo Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Tinoooo Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Tinoooo Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Tinoooo Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Tinoooo Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Tinoooo Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alvarosabu commented Feb 19, 2026 •

edited

Loading

netlify Bot commented Feb 19, 2026 •

edited

Loading

netlify Bot commented Feb 19, 2026 •

edited

Loading

netlify Bot commented Feb 19, 2026 •

edited

Loading

pkg-pr-new Bot commented Feb 19, 2026 •

edited

Loading