Lets make some 3D in Svelte: Part 2

Scene.svelte

<script lang="ts">
  import {
    CircleBufferGeometry,
    MeshStandardMaterial,
    DoubleSide,
    BoxBufferGeometry,
  } from "three";
  import {
    AmbientLight,
    DirectionalLight,
    Group,
    Mesh,
    OrbitControls,
    PerspectiveCamera,
    useFrame,
  } from "@threlte/core";
  import { useLoader } from "@threlte/core";
  import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";

  let rotation = 0;

  const loader = useLoader(OBJLoader, () => new OBJLoader());
  loader.load("island.obj", (obj) => {
    console.log(obj.children[0]);
    island = obj;
  });

  useFrame(() => {
    rotation += 0.01;
  });
  let island = null;
</script>

<PerspectiveCamera position={{ x: 30, y: 10, z: 5 }} fov={24}>
  <OrbitControls
    target={{ y: 3 }}
  />
</PerspectiveCamera>
<DirectionalLight shadow position={{ x: 10, y: 10, z: 10 }} />
<AmbientLight intensity={0.2} />
{#if island != null}
  <Group position={{ y: 2 }}>
        <Mesh
          interactive
          castShadow
          recieveShadow
          geometry={island.children[0].geometry}
          material={new MeshStandardMaterial()}
        />
  </Group>
{/if}
<!-- Floor -->
<Mesh
    receiveShadow
    rotation={{ x: -90 * (Math.PI / 180) }}
    geometry={new CircleBufferGeometry(4, 72)}
    material={new MeshStandardMaterial({ side: DoubleSide, color: "white" })}
  />