Rich-Harris/svelte-cubed

Access the camera from the canvas context via binding is returning null.

raglandc opened this issue · 2 comments

Hello, fellow cubers,

I am attempting to access the current camera of the scene via the context I receive from binding to the canvas and accessing it in the on-mount. I want to be able to get ahold of the position of the current camera.

additionally in the console => "warn: no camera is set"

I looked inside Rich's code for Canvas.svelte and when he calls set_root for const root, he sets the callback to warn this, so I know where it is coming from but I'm not sure how to set the camera and access it.

<script>
let canvas: SC.Canvas;
let locationVector: THREE.Vector3 | any; //chor: remove any when able to find point

onMount(() => {
		loader.load('../../static/earth.glb', (gltf) => {
			model = gltf;
		});

		const mapIter = canvas.$$.context.values();
		mapIter.next();
		const ctx = mapIter.next().value;
		locationVector = ctx.camera.position;

		// I have found the camera through context but it returns null

		if (canvas) {
		     console.log(locationVector);
		}
	});
</script>

<section class="section-one">
	<div class="three-scene">
		<SC.Canvas bind:this={canvas} antialias alpha>
			<SC.PerspectiveCamera position={[0, 0, 5]} />
			<SC.PointLight position={[0, 7, 1]} />
			<SC.AmbientLight />
			{#if model}
				<SC.Primitive
					scale={1.2}
					object={model.scene}
					position={[0, -1, 0]}
					rotation={[0, spin, -Math.PI * 0.15]}
				/>
			{/if}
		</SC.Canvas>
	</div>
</section>

In advance thank you.

@raglandc , try something like this (just replace your if statement with this) :

		if (canvas) {
			console.log(locationVector);
			setTimeout(() => {
                locationVector = ctx.camera?.object?.position
                console.log(locationVector);
                console.log(JSON.stringify(locationVector)); //Here you can have the confirmation that the data is available at this point.
			}, 1);
		}

If you found a better solution,please let me know. thx