export get_root

[pkrogel-kws]

I am working on a library that exposes https://github.com/vanruesc/postprocessing as svelte components. I need access to the root three object, and didn't see any other way to access it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/svelte/svelte-cubed/99KuVhfc5qGHPgY9BqBNH2n5ugxt
✅ Preview: https://svelte-cubed-git-fork-pkrogel-kws-exportgetroot-svelte.vercel.app

[aewing]

Testing this locally, the exported get_root() returns undefined whenever I call it in routes or components. What condition did you test it in where it worked for you? Maybe I'm doing something wrong.

@Rich-Harris Is the purpose of the empty object context key to force a unique context for each three instance? Perhaps requiring an ID at the Canvas level (when multiple instances are detected) would allow context to be constructed using strings based on the canvas ID, making it easier to get to with getContext.

[pkrogel-kws]

@aewing - The first thing I did was a quick and dirty edit of the svelte-cubed code in node_modules. As you mentioned, I was getting undefined. I would like to understand why. However - once I forked the repo, linked it, made the modification, and then built it, everything started working as expected.

[camjackson]

This would be nice to have. It would also simplify the implementation of the interactivity example in #20, which currently exposes the root via a binding on the Canvas component.

[camjackson]

I have figured out a partial workaround to this, for those who don't want to fork the library or wait for something like this to be merged. With some hacking, it's possible to obtain references to the canvas, scene, and camera. I haven't figured out how to find the renderer or controls yet but it's probably doable.

• canvas: You can find this using document.querySelector('canvas')
• scene: You can find this by injecting your own Object3D into the scene using <Primitive />, and then traversing the object's ancestry all the way up to the root
• camera: You can find this by traversing the scene's descendants

I have created a <ThreeProvider> component which does all of the above, and then sets the result as context. So if you put that as the only child under <Canvas>, then all of your components will be able to access the canvas, scene, and camera by doing getThree(). I'm planning on releasing these, along with some other helpers, as a library soon.

[camjackson]

I've just published svelte-trois, which may solve this problem for some of you. It gives the ability to get access to the three.js scene, camera, canvas, and more. It also has some simple mouse event / raycasting functionality. You can give it a look here: https://www.npmjs.com/package/svelte-trois

[Levyks]

This would be great to have, I'm currently having to bind the SC.Canvas component to a variable, and finding what I want from there

[DefinitelyMaybe]

Hey all, have noticed Rich doing the following to get root

svelte-cubed/src/lib/components/objects/Mesh.svelte

Line 21 in 4f7a3b2

const { root, self } = setup(new THREE.Mesh(geometry, material));

Here's the setup function:

svelte-cubed/src/lib/utils/context.js

Line 15 in 4f7a3b2

export function setup(self) {

Could we use this?

[Levyks]

Hey all, have noticed Rich doing the following to get root

svelte-cubed/src/lib/components/objects/Mesh.svelte

Line 21 in 4f7a3b2

const { root, self } = setup(new THREE.Mesh(geometry, material));

Here's the setup function:

svelte-cubed/src/lib/utils/context.js

Line 15 in 4f7a3b2

export function setup(self) {

Could we use this?

Not really, for that we would need for the key to that context to be exported, in this case, the object called ROOT, so it's easier to just export the get_root function

[DefinitelyMaybe]

What do you mean? they both give you getContext(ROOT);

export function setup(self) {
	const root = getContext(ROOT);
	
        // other stuff
        
	return {
		root,
		parent,
		self
	};
}

/** @returns {import('../types/context').RootContext} */
function get_root() {
	return getContext(ROOT);
}