3D carousel with threejs in Angular
Threejs is an amazing WEBGL library allowing developers to create a user experience, which is one step ahead. Thus, by using UI elements based on the threejs library it is possible to distinguish your website from other sites, which just use regular elements. In this article I am going to show you how you can create your own carousel in an Angular application easily. In order to save your time creating such a 3D carousel in your Angular applications, I created an Angular component and added this component to the ngx-acuw library on npm.
To keep your interest, I show you at first the carousel in action.
Why a carousel?
Since I like to experiment with threejs in Angular, I had the idea to use the concept of a carousel and make a 3D experience out of it. The carousel concept is usually used in order to show images of a gallery, where it is possible to slide through the images. In order to really have a 3D experience the target was to give the user the possibility to rotate the carousel freely via drag and drop. And still it should be possible to navigate from one image to the next by pressing a button. Such a 3D carousel could be used for various use cases. Besides simply showing a gallery of images, it could be also used to show team members of an organization in this extraordinary way. Another example would be to illustrate different products or services of a company. As you see there are quite a lot of use cases for using such a 3D carousel.
How to create a 3D carousel in your application
Now I’m going to show you how to create the carousel component in an Angular application by using the ngx-acuw library.
1. Install the library including the dependencies
The first step is to install the npm package of ngx-acuw and the dependencies.
npm install three @types/three @angular/cdk ngx-acuw2. Import module
Now we have to import the module ‘CourselModule’ and the ‘BrowserAnimationsModule’.
import { CarouselModule } from 'ngx-acuw';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";@NgModule({
declarations: [AppComponent, ...],
imports: [CarouselModule, BrowserAnimationsModule],
bootstrap: [AppComponent]
})
export class AppModule {
}
3. Usage of the ‘acuw-carousel’ component
For this example I’m going to show photos as well as some text in the elements of the carousel. For the photos I just create a string array, which contains the links to the images. The photos are again by David Clode at Unsplash.
import { Component } from "@angular/core";@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})export class AppComponent {
carouselItems = [
'https://source.unsplash.com/7BLRSG-AkJs',
'https://source.unsplash.com/rcJbbK5_iIA',
'https://source.unsplash.com/yQUwIlUeU4o',
'https://source.unsplash.com/MlaQmWvzRTw',
'https://source.unsplash.com/6dTpYUcr1yg',
];
}
In the template (app.component.html) the carousel from the ngx-acuw library can be used like shown below. Inside the <acuw-carousel> tag each carousel element can be specified by using the <acuw-carousel-item> tag. For this example project we just iterate over the ‘carouselItems’ array by using the structural directive *ngFor. Each carousel element contains a header, a photo and a description text, which is in my case just dummy text.
<div class="container">
<!-- Carousel -->
<acuw-carousel #carousel class="carousel">
<acuw-carousel-item *ngFor="let item of carouselItems;index as i"
class="carousel-item">
<h2>Item {{ i+1 }}</h2>
<img [src]="item" loading="lazy" />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.
</p>
</acuw-carousel-item>
</acuw-carousel>
</div>Here is the CSS I use for the carousel as well as the items:
.container {
width: 100%;
height: calc(100vh - 150px);
}.carousel {
position: relative;
background-color: rgb(0, 0, 0);
}.carousel-item {
position: relative;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.7);
width: 250px;
height: 350px;
padding: 10px;
pointer-events: none;
}.carousel-item img {
width: 100%;
object-fit: cover;
}.carousel-item h2 {
width: 100%;
text-align: center;
text-transform: uppercase;
color: rgb(0, 0, 0);
margin: 5px 0 10px 0;
}.carousel-item p {
text-align: center;
color: rgb(0, 0, 0);
font-size: medium;
white-space: normal;
line-height: normal;
}
If you build your application now, you should already see the carousel including the five elements in the browser. As you have seen by using the <acuw-carousel-item> tag it is possible to freely define the content of the single carousel elements. You can also use as many elements as you want, but you have to consider that depending on the amount of elements it might be necessary to decrease or increase the radius of the carousel. When adapting the radius of the carousel also the camera distance should be changed according to the needs.
A complete description of the API can be found in the description of the acuw-carousel at ngx-acuw.
4. Extend with previous and next buttons
Now the example project can be extended by buttons, allowing the user to navigate through the elements by pressing the buttons. Therefore, I just add two buttons, which listen on the click-event. When the click-event of a button is fired either the previous() or the next() method of the carousel component is called.
<div class="roate-button-container">
<button (click)="carousel.previous()">
Previous
</button>
<button (click)="carousel.next()">
Next
</button>
</div>Depending on whether the next or previous button is clicked, the carousel automatically rotates to the next or previous element.
The whole example project you can find on StackBlitz for reference.
If you like this 3D carousel or have some feedback on it, I would be glad, if you write me in the comments and tell me what you think about it. Anyway, by writing this article I hope that I was able to inspire some web developers on using such a 3D carousel or even other components of the ngx-acuw library.
