use is instead of instanceof

threlte · Dec 17, 2023 · b1c7172 · b1c7172
1 parent 50fbb3b
commit b1c7172
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 18 deletions.
diff --git a/src/lib/components/Bindings/Bindings.svelte b/src/lib/components/Bindings/Bindings.svelte
@@ -7,11 +7,8 @@
 	import Scene from './Scene.svelte'
 	import Material from './Material.svelte'
 
-	export let object: THREE.Object3D
+	export let object: THREE.Scene | THREE.Light | THREE.PerspectiveCamera | THREE.OrthographicCamera
 
-	$: scene = object as THREE.Scene
-	$: light = object as THREE.Light
-	$: camera = object as THREE.PerspectiveCamera | THREE.OrthographicCamera
 	$: userData = JSON.stringify(object.userData)
 </script>
 
@@ -63,20 +60,20 @@
 	options={{ step: 1 }}
 />
 
-{#if 'isPerspectiveCamera' in camera || 'isOrthographicCamera' in camera}
+{#if 'isPerspectiveCamera' in object || 'isOrthographicCamera' in object}
 	<Folder
 		title="Camera"
 		expanded={false}
 	>
-		<Camera object={camera} />
+		<Camera {object} />
 	</Folder>
 
-{:else if light.isLight}
+{:else if 'isDirectionalLight' in object || 'isPointLight' in object || 'isSpotLight' in object || 'isHemisphereLight' in object || 'isRectAreaLight' in object}
 	<Folder
 		title="Light"
 		expanded={false}
 	>
-		<Light object={light} />
+		<Light {object} />
 	</Folder>
 
 {:else if 'material' in object && object.material instanceof THREE.Material}
@@ -87,12 +84,12 @@
 		<Material object={object.material} />
 	</Folder>
 
-{:else if scene.isScene}
+{:else if 'isScene' in object}
 	<Folder
 		title="Scene"
 		expanded={false}
 	>
-		<Scene object={scene} />
+		<Scene {object} />
 	</Folder>
 
 {/if}

diff --git a/src/lib/components/Bindings/Light.svelte b/src/lib/components/Bindings/Light.svelte
@@ -4,7 +4,7 @@
 	import Color from './Color.svelte'
 	import Shadow from './Shadow.svelte'
 
-	export let object: THREE.Light
+	export let object: THREE.DirectionalLight | THREE.PointLight | THREE.SpotLight | THREE.HemisphereLight | THREE.RectAreaLight
 </script>
 
 <Color
@@ -19,13 +19,13 @@
 	options={{ step: 0.05 }}
 />
 
-{#if object instanceof THREE.DirectionalLight}
+{#if 'isDirectionalLight' in object}
 	<Binding
 		bind:object={object.target}
 		key="position"
 		label="target"
 	/>
-{:else if object instanceof THREE.PointLight}
+{:else if 'isPointLight' in object}
 	<Binding
 		bind:object
 		key="decay"
@@ -41,7 +41,7 @@
 		key="power"
 		label="power"
 	/>
-{:else if object instanceof THREE.SpotLight}
+{:else if 'isSpotLight' in object}
 	<Binding
 		bind:object={object.target}
 		key="position"
@@ -79,13 +79,13 @@
 		key="position"
 		label="position"
 	/>
-{:else if object instanceof THREE.HemisphereLight}
+{:else if 'isHemisphereLight' in object}
 	<Binding
 		bind:object
 		key="groundColor"
 		label="groundColor"
 	/>
-{:else if object instanceof THREE.RectAreaLight}
+{:else if 'isRectAreaLight' in object}
 	<Binding
 		bind:object
 		key="power"

diff --git a/src/lib/components/Bindings/Material.svelte b/src/lib/components/Bindings/Material.svelte
@@ -79,7 +79,7 @@
 	/>
 {/if}
 
-{#if object instanceof THREE.MeshStandardMaterial}
+{#if 'isMeshStandardMaterial' in object}
 	<Binding
 		bind:object
 		key="roughness"
@@ -94,7 +94,7 @@
 	/>
 {/if}
 
-{#if object instanceof THREE.MeshPhysicalMaterial}
+{#if 'isMeshPhysicalMaterial' in object}
 	<Binding
 		bind:object
 		key="clearcoat"