Add missing properties to objects

src/lib/components/objects/Bone.svelte

@@ -7,10 +7,19 @@
 	export let position = defaults.position;
 	export let rotation = defaults.rotation;
 	export let scale = defaults.scale;
+	export let castShadow = false;
+	export let receiveShadow = false;
+	export let frustumCulled = true;
+	export let renderOrder = 0;
 
 	const { root, self } = setup(new THREE.Bone());
 
 	$: {
+		self.castShadow = castShadow;
+		self.receiveShadow = receiveShadow;
+		self.frustumCulled = frustumCulled;
+		self.renderOrder = renderOrder;
+
 		transform(self, position, rotation, scale);
 		root.invalidate();
 	}

src/lib/components/objects/Group.svelte

@@ -7,12 +7,29 @@
 	export let position = defaults.position;
 	export let rotation = defaults.rotation;
 	export let scale = defaults.scale;
+	export let castShadow = false;
+	export let receiveShadow = false;
+	export let frustumCulled = true;
 	export let renderOrder = 0;
 
 	const { root, self } = setup(new THREE.Group());
 
 	$: {
+		self.traverse(node => {
+			if (node instanceof THREE.Mesh) {
+				node.castShadow = castShadow;
+				node.receiveShadow = receiveShadow;
+				node.frustumCulled = frustumCulled;
+			}
+		})
+	}
+
+	$: {
+		self.castShadow = castShadow;
+		self.receiveShadow = receiveShadow;
+		self.frustumCulled = frustumCulled;
 		self.renderOrder = renderOrder;
+
 		transform(self, position, rotation, scale);
 		root.invalidate();
 	}

src/lib/components/objects/Primitive.svelte

@@ -10,12 +10,26 @@
 	export let position = defaults.position;
 	export let rotation = defaults.rotation;
 	export let scale = defaults.scale;
+	export let castShadow = false;
+	export let receiveShadow = false;
+	export let frustumCulled = true;
+	export let renderOrder = 0;
 
 	const { root, self } = setup(new THREE.Object3D());
 
 	/** @type {THREE.Object3D} */
 	let previous;
 
+	$: {
+		object.traverse(node => {
+			if (node instanceof THREE.Mesh) {
+				node.castShadow = castShadow;
+				node.receiveShadow = receiveShadow;
+				node.frustumCulled = frustumCulled;
+			}
+		})
+	}
+
 	$: {
 		if (previous) {
 			self.remove(previous);
@@ -30,6 +44,11 @@
 	}
 
 	$: {
+		self.castShadow = castShadow;
+		self.receiveShadow = receiveShadow;
+		self.frustumCulled = frustumCulled;
+		self.renderOrder = renderOrder;
+
 		transform(self, position, rotation, scale);
 		root.invalidate();
 	}

src/routes/examples/_content/03-rotating-helmet/index.svelte

@@ -0,0 +1,58 @@
+<script>
+	import * as THREE from 'three';
+	import * as SC from 'svelte-cubed';
+	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+	import { onMount } from 'svelte';
+
+	let spin = 0;
+
+	SC.onFrame(() => {
+		spin += 0.01;
+	});
+	const loader = new GLTFLoader();
+	/** @type {THREE.Group} */
+	let c64;
+
+	onMount(() => {
+		loader.load('/gltf/DamagedHelmet.glb', (loaded) => {
+			c64 = loaded.scene;
+		});
+	});
+</script>
+
+<SC.Canvas
+	antialias
+	background={new THREE.Color('papayawhip')}
+	fog={new THREE.FogExp2('papayawhip', 0.1)}
+	shadows
+>
+	<SC.Group position={[0, -0.5, 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, '#000', '#000')}
+			position={[0, 0.01, 0]}
+			receiveShadow
+		/>
+	</SC.Group>
+
+	{#if c64}
+		 <SC.Primitive
+			 castShadow
+			 receiveShadow
+			 object={c64}
+			 scale={[0.5, 0.5, 0.5]}
+			 position={[0, 0.25, 0]}
+			 rotation={[spin, spin, spin]}
+		 />
+	{/if}
+
+	<SC.PerspectiveCamera position={[1, 1, 3]} />
+	<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-rotating-helmet/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Rotating Helmet"
+}