BradNut/svelte-3d
1
0
Fork 0
mirror of https://github.com/BradNut/svelte-3d synced 2025-09-08 17:40:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add collision to the cubes and rotation to cubes.

Browse source
This commit is contained in:
Bradley Shellnut 2022-05-05 11:30:38 -07:00
parent 97d810592d
commit 7759197b03
2 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/lib/Box.svelte
View file

@ -2,12 +2,20 @@
import * as SC from 'svelte-cubed'; import * as SC from 'svelte-cubed';
import * as THREE from 'three'; import * as THREE from 'three';
import * as PE from 'svelte-cannon'; import * as PE from 'svelte-cannon';
import * as CANNON from 'cannon-es';
const position = PE.writableVec3(0,5,0); const position = PE.writableVec3(0, 5, 0);
let rotation = PE.writableVec3(0, 0, 0);
let velocity = new CANNON.Vec3(1, 1, 1);
</script> </script>
<PE.Body mass={1} bind:position={$position}> <PE.Body on:collide={(e) => console.log(e)} mass={1} bind:position={$position} bind:rotation={$rotation} {velocity}>
<PE.Box size={[1,1,1]} /> <PE.Box size={[0.5,0.5,0.5]} />
</PE.Body> </PE.Body>
<SC.Mesh geometry={new THREE.BoxGeometry()} position={$position.toArray()} /> <SC.Mesh
castShadow
rotation={$rotation.toArray()}
geometry={new THREE.BoxGeometry()}
position={$position.toArray()}
/>

11
src/routes/index.svelte
View file

@ -3,20 +3,29 @@
import * as THREE from 'three'; import * as THREE from 'three';
import * as PE from 'svelte-cannon'; import * as PE from 'svelte-cannon';
import Box from '$lib/Box.svelte'; import Box from '$lib/Box.svelte';
let count = 1;
</script> </script>
<svelte:window on:click={() => count += 1} />
<PE.World gravity={[0, -9.8 ,0]}> <PE.World gravity={[0, -9.8 ,0]}>
<SC.Canvas antialias shadows> <SC.Canvas antialias shadows>
<PE.Body mass={0} rotation={[-Math.PI / 2, 0, 0]}> <PE.Body mass={0} rotation={[-Math.PI / 2, 0, 0]}>
<PE.Plane /> <PE.Plane />
</PE.Body> </PE.Body>
<SC.Mesh <SC.Mesh
receiveShadow
geometry={new THREE.PlaneGeometry(50, 50)} geometry={new THREE.PlaneGeometry(50, 50)}
rotation={[-Math.PI / 2, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}
material={new THREE.MeshStandardMaterial({ color: "grey"})} material={new THREE.MeshStandardMaterial({ color: "grey"})}
/> />
<Box /> {#each {length: count } as _}
<Box />
{/each}
<SC.DirectionalLight intensity={1} position={[15,15,15]} shadow={{ mapSize: [2048, 2048]}} />
<SC.AmbientLight intensity={1} /> <SC.AmbientLight intensity={1} />
<SC.PerspectiveCamera position={[ 2, 2, 15 ]} target={[0,0,0]} /> <SC.PerspectiveCamera position={[ 2, 2, 15 ]} target={[0,0,0]} />
<SC.OrbitControls />
</SC.Canvas> </SC.Canvas>
</PE.World> </PE.World>