Circles, squares, spheres, cubes, custom geometry…we’ll use circles to create an image carousel.

This tutorial requires that you run your page on a live server.

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’.

---

Let’s begin.

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>

---

Let’s start building the carousel.

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