Display an image with a fake 3D effect, using a depth map. Made for svelte, using threlte, threejs and tailwindcss. Still a work in progress, but usable.
https://github.com/user-attachments/assets/74b05fd6-feef-49da-9b38-523b65bf5da8
src/lib/Depth3D/
folder of this repository into your svelte projects src/lib/
folder.Depth3D
component in your pages directly like so:<script>
// Depth3D example
import Depth3D from '$lib/Depth3D';
</script>
<!-- will adjust to the parents size/position -->
<Depth3D
image={{
image: 'your-image.png',
depth: 'your-depth.png'
}}
/>
This effect only simulates 3D, so some images will show weird artifacts. Portraits with a single person in the middle tend to work well. The effect will also depend on the quality of the depth map. Some trial and error might be necessary to get the desired effect.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
content: ['./src/**/*.{html,js,svelte,ts}'],
@tailwind base;
@tailwind components;
@tailwind utilities;
npm install three @threlte/core \
@threlte/extras \
@types/three
MIT