A Free and Simple way for a 3D Gallery on your website.
Transform a simple images list in a 3D gallery. No complex parameter, no javascript modification.
Circle.js is based on THREE JS.
Example of a simple 3D gallery
- Transform picture blocks into 3D gallery
- 100% responsive
- Customizable background color
- No GIF compatibilty
Circle.js supports all last generation browsers : Chrome, Firefox, Edge.
- SCRIPT : https://cdn.jsdelivr.net/gh/getLib/circle.js@main/circle.min.js
- CSS : https://cdn.jsdelivr.net/gh/getLib/circle.js@main/circle.css
You can also directly download Circle.js from GitHub.
If this plugin is free, you can still support me by offering me a coffee ;)
First of all create the images list. Create a div #circle3dImg
and add all your images inside.
You can place this block where you want, it will be hide.
You need to specify the original width data-width
and original height data-height
of each image.
<div id="circle3dImg">
<img data-width="1200" data-height="900" src="gallerie/img1.webp" />
<img data-width="1200" data-height="900" src="gallerie/img2.png" />
<img data-width="1000" data-height="750" src="gallerie/img3.webp" />
<img data-width="800" data-height="600" src="gallerie/img4.webp" />
</div>
Then you will place your canvas block canvas #circle3dCanvas
. Your 3D gallery will be print there.
You can place it where you want in your page.
Change the background-color with the data-background
parameter.
<canvas id="circle3dCanvas" data-background="#fff"></canvas>
Then, define your canvas style. You can do what you want with this block.
For responsive size, you just need to add !important
after height and width.
Exemple :
#circle3dCanvas{height:40vw !important;width:90vw !important;}
Add the Circle .js and .css files at the end of your page.
<link rel="stylesheet" href="circle.css">
<script type="module" src="circle.min.js"></script>
That's it !