https://github.com/flo-bit/svelte-depth-3d-component
svelte component to show a fake 3d image with depth map
https://github.com/flo-bit/svelte-depth-3d-component
Last synced: about 1 year ago
JSON representation
svelte component to show a fake 3d image with depth map
- Host: GitHub
- URL: https://github.com/flo-bit/svelte-depth-3d-component
- Owner: flo-bit
- License: mit
- Created: 2024-05-20T02:27:04.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-21T21:25:26.000Z (over 1 year ago)
- Last Synced: 2025-04-06T06:31:46.260Z (about 1 year ago)
- Language: Svelte
- Homepage: https://flo-bit.dev/svelte-depth-3d-component/
- Size: 11.2 MB
- Stars: 14
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte depth 3d component
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.
[Try the demo here.](https://flo-bit.github.io/svelte-depth-3d-component/)
https://github.com/user-attachments/assets/74b05fd6-feef-49da-9b38-523b65bf5da8
## How to use
1. Copy and paste the [`src/lib/Depth3D/`](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2Fflo-bit%2Fsvelte-depth-3d-component%2Ftree%2Fmain%2Fsrc%2Flib%2FDepth3D) folder of this repository into your svelte projects `src/lib/` folder.
2. Install [tailwindcss](https://tailwindcss.com/docs/guides/sveltekit) and [threlte (core and extras)](https://threlte.xyz/docs/learn/getting-started/installation) (work through their setup or see below for commands)
3. Get an image and generate a accompanying depth map, for example using [zoedepth](https://replicate.com/cjwbw/zoedepth)
4. Use the `Depth3D` component in your pages directly like so:
```svelte
// Depth3D example
import Depth3D from '$lib/Depth3D';
```
## Which images work well
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.
## Installing the dependencies
### TailwindCSS (assuming you created your svelte app with the svelte create command)
1. Install
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
2. Update your tailwind.config.js file to find files with tailwind classes:
```js
content: ['./src/**/*.{html,js,svelte,ts}'],
```
3. Create a app.css file in your src folder.
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
4. Import the css file in your +layout.svelte file
```svelte
import "../app.css";
```
### Threlte (core and extras)
1. Install
```bash
npm install three @threlte/core \
@threlte/extras \
@types/three
```
## License
MIT