Circles, squares, spheres, cubes, custom geometry…we’ll use circles to create an image carousel.
You can create a local server yourself using NodeJS/Express or use a
third-party extension in your favorite text editor.
I use Visual Studio Code and as such, use the Live Server extension; ‘Extension Id: ritwickdey.liveserver’.
We’ll start by downloading the THREE.JS library.
You can find the files here:
https://github.com/mrdoob/three.js/archive/master.zip
All you need is the ‘three.js’ file in the ‘/build’ folder.
After you’ve done so, make sure to include it in your ‘index.html’
<script src="./three.js"></script>
While we’re setting up our html, we’ll normalize our page and center the canvas our carousel will be placed on with a bit of CSS.
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
First things first, let’s get some general variables we’ll be needing out of the way.
const image_radius = 100;
const number_of_images = 8;
const radius = 400;
const radian_interval = (2.0 * Math.PI) / number_of_images;
const center_of_wheel = {
x: 0,
y: 0
}
Note:
1. image_radius — the radius of our image, keep in mind ‘diameter’ or width of our circle will be double this
2. number_of_images— number of images/objects we want in our circle
3. radius— the radius of our entire wheel (how we “space out” ALL of the images from the center)
4. radian_interval— where each image/object falls in our circle; currently at 45 degree increments
5. center_of_wheel — geometrically(in space), the center of our circle
#web-development #web-design #threejs #programming #front-end-development #amazon web services