Create GLTF component

src/lib/components/objects/GLTF.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import * as THREE from 'three';
+	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+	import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+    import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';
+	import { setup } from '../../utils/context.js';
+	import { transform } from '../../utils/object.js';
+	import * as defaults from '../../utils/defaults.js';
+
+	/** @type {string} */
+	export let path = null;
+	/** @type {string} */
+	export let filename = null;
+	export let useDraco = false;
+	export let useKTX2 = false;
+
+	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;
+
+	/** @type {Object} */
+	let gltfScene = null;
+
+	const { root, parent, self } = setup(new THREE.Object3D());
+
+	$: {
+		if(gltfScene) {
+			gltfScene.traverse( function( node ) {
+				if ( node.isMesh ) { 
+					node.castShadow = castShadow;
+					node.receiveShadow = receiveShadow;
+					node.frustumCulled = frustumCulled;
+					node.renderOrder = renderOrder;
+				}
+			} );
+		}
+
+		transform(self, position, rotation, scale);
+		root.invalidate();
+	}
+
+	onMount(() => {
+
+		const loader = new GLTFLoader()
+		  .setPath( path )
+		  .setDRACOLoader( useDraco ? new DRACOLoader().setDecoderPath( '/loaders/draco/' ) : null )
+		  .setKTX2Loader( useKTX2 ? new KTX2Loader()
+				.setTranscoderPath( '/loaders/basis/' )
+				.detectSupport( root.renderer ) : null )
+		  .load( filename, function ( gltf ) {
+			gltfScene = gltf.scene;
+			self.add(gltf.scene);
+		} );
+
+		return () => {};
+	});
+</script>
+
+<slot />

src/lib/index.js

@@ -4,6 +4,7 @@ export { default as Canvas } from './components/Canvas.svelte';
 export { default as Bone } from './components/objects/Bone.svelte';
 export { default as Group } from './components/objects/Group.svelte';
 export { default as Mesh } from './components/objects/Mesh.svelte';
+export { default as GLTF } from './components/objects/GLTF.svelte';
 export { default as Skeleton } from './components/objects/Skeleton.svelte';
 export { default as SkinnedMesh } from './components/objects/SkinnedMesh.svelte';
 export { default as Primitive } from './components/objects/Primitive.svelte';

src/routes/examples/_content/04-gltf-simple/index.svelte

@@ -0,0 +1,59 @@
+<script>
+	import * as THREE from 'three';
+	import * as SC from 'svelte-cubed';
+
+	let cameraX = 0.0;
+
+	SC.onFrame((elapsedTime, deltaTime) => {
+		cameraX = Math.pow(Math.sin(elapsedTime/1000),3)*3;
+	});
+</script>
+
+<SC.Canvas
+	antialias
+	environment={new THREE.TextureLoader().load('/textures/kiara_1_dawn.jpeg',
+	(tex) => {
+			tex.mapping = THREE.EquirectangularReflectionMapping;
+			tex.encoding = THREE.sRGBEncoding;
+		})}
+	background={new THREE.TextureLoader().load('/textures/kiara_1_dawn.jpeg',
+	(tex) => {
+			tex.mapping = THREE.EquirectangularReflectionMapping;
+			tex.encoding = THREE.sRGBEncoding;
+		})}
+	shadows
+>
+
+	<SC.Group position={[0, -1, 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>
+
+	<SC.GLTF path="/gltf/" filename="DamagedHelmet.glb"
+	    position={[0, 0, 0]}
+		castShadow
+		receiveShadow />
+	<SC.GLTF path="/gltf/waterbottle/" filename="WaterBottle.gltf"
+		position={[3, 0, 0]}
+		useDraco
+		castShadow
+		receiveShadow />
+	<SC.GLTF path="/gltf/stainedglasslamp-KTX2/" filename="StainedGlassLamp.gltf"
+		position={[-3, 0, 0]}
+		useKTX2
+		castShadow
+		receiveShadow />
+
+	<SC.PerspectiveCamera position={[1, 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/04-gltf-simple/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "glTF simple"
+}