Lets make some 3D (with physics) in Svelte: Part 3

App.svelte

<script lang="ts">
  import { Canvas } from "@threlte/core";
  import { World } from "@threlte/rapier";

  import Scene from "./Scene.svelte";
</script>

<div>
  <Canvas size={{ width: 1280, height: 720 }}>
    <World>
      <Scene />
    </World>
  </Canvas>
</div>

<style>
  div {
    height: 100%;
    width: 100%;
  }
</style>

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";

  import { AutoColliders, Collider, RigidBody } from "@threlte/rapier";

  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 }} />
{#if island != null}
  <Group position={{ y: 0.5 }}>
    <AutoColliders shape={"convexHull"} >
        <Mesh
          interactive
          castShadow
          receiveShadow
          
          geometry={island.children[0].geometry}
          material={new MeshStandardMaterial()}
        />
      </AutoColliders>
  </Group>
{/if}

<AmbientLight intensity={0.2} />

<AutoColliders shape={"trimesh"} rotation={{y: rotation}} >
  <Mesh
  receiveShadow
  rotation={{ x: -90 * (Math.PI / 180) }}
  geometry={new CircleBufferGeometry(4, 72)}
  material={new MeshStandardMaterial({ side: DoubleSide, color: "white" })}
/>
</AutoColliders>


<RigidBody type={"dynamic"} position={{ y: 8 }}>
  <Collider
    shape={"cuboid"}
    args={[0.5, 0.5, 0.5]}
  />
  <Mesh
    receiveShadow
    castShadow
    geometry={new BoxBufferGeometry(1, 1, 1)}
    material={new MeshStandardMaterial({ side: DoubleSide, color: "white" })}
  />
</RigidBody>