Add timing arguments to the onFrame callback

src/lib/utils/lifecycle.js

@@ -1,14 +1,16 @@
 import { onMount } from 'svelte';
 
-/** @param {() => void} callback */
+/** @param {(elapsedTime: number, deltaTime: number) => void} callback */
 export function onFrame(callback) {
 	onMount(() => {
 		/** @type {number} */
 		let frame;
+		let lastTime = 0.0;
 
-		requestAnimationFrame(function loop() {
+		requestAnimationFrame(function loop(frameTime) {
 			frame = requestAnimationFrame(loop);
-			callback(); // TODO are there useful args we can pass here?
+			callback(frameTime, frameTime - lastTime);
+			lastTime = frameTime;
 		});
 
 		return () => {

src/routes/examples/_content/03-animated-cube/BugBox.svelte

@@ -0,0 +1,25 @@
+<script>
+	import * as THREE from 'three';
+	import * as SC from 'svelte-cubed';
+
+	let width = 1;
+	let height = 1;
+	let depth = 1;
+
+	SC.onFrame((elapsedTime, deltaTime) => {
+		let timeSeconds = elapsedTime / 1000;
+
+		width = Math.sin(timeSeconds*5) + 1.1;
+		height = Math.cos(timeSeconds*3) + 1.1;
+	});
+</script>
+
+
+<SC.Mesh
+  geometry={new THREE.BoxGeometry()}
+  material={new THREE.MeshStandardMaterial({ color: 0xff3e00 })}
+  scale={[width, height, depth]}
+  position={[0, height / 2, 0]}
+  rotation={[0, 0, 0]}
+  castShadow
+/>

src/routes/examples/_content/03-animated-cube/index.svelte

@@ -0,0 +1,39 @@
+<script>
+	import * as THREE from 'three';
+	import * as SC from 'svelte-cubed';
+
+	import BugBox from './BugBox.svelte';
+
+	let cameraX = 0.0;
+
+	SC.onFrame((elapsedTime, deltaTime) => {
+		cameraX = Math.pow(Math.sin(elapsedTime/1000),3)*3;
+	});
+</script>
+
+<SC.Canvas
+	antialias
+	background={new THREE.Color('papayawhip')}
+	fog={new THREE.FogExp2('papayawhip', 0.1)}
+	shadows
+>
+	<SC.Group position={[0, 0, 0]}>
+		<SC.Mesh
+			geometry={new THREE.PlaneGeometry(50, 50)}
+			material={new THREE.MeshStandardMaterial({ color: 'burlywood' })}
+			rotation={[-Math.PI / 2, 0, 0]}
+			receiveShadow
+		/>
+		<SC.Primitive
+			object={new THREE.GridHelper(50, 50, 'papayawhip', 'papayawhip')}
+			position={[0, 0.001, 0]}
+		/>
+	</SC.Group>
+
+	<BugBox/>
+
+	<SC.PerspectiveCamera position={[cameraX, 2, 6]} target={[0, 1, 0]} />
+	<!-- <SC.OrbitControls enableZoom={false} maxPolarAngle={Math.PI * 0.51} /> -->
+	<SC.AmbientLight intensity={0.6} />
+	<SC.DirectionalLight intensity={0.6} position={[-2, 3, 2]} shadow={{ mapSize: [2048, 2048] }} />
+</SC.Canvas>

src/routes/examples/_content/03-animated-cube/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Animated cube"
+}