Skip to content

Instantly share code, notes, and snippets.

@ngarske
Created Aug 12, 2022
Embed
What would you like to do?
Lets make some 3D (with physics) in Svelte: Part 3
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment