Carousel3D

Carousel3D is an interactive rotating 3D HTML/JS carousel made with ThreeJS. The Carousel3D object uses the ThreeJS CSS3DRenderer to display and rotate 3D tiles. Each tile is actually just an HTML div element so you should be able to generate and load your own HTML elements, such as images, videos, or text.

	Source Code

Parameters

this.containerName

String - ID of the canvas element where the Carousel is to be created. This attribute is required.

this.textSelectable

Boolean - Determines whether HTML values in the Caoursel can be selected or highlighted. Default is true.

this.tileBackgroundColor

String - Determines whether background color of the tiles. Default is "black".

this.tileBorderColor

String - Determines the color of the border. Can either be "blue" or "red".

this.tileSize

Dict - Determines the width and height of the tiles in pixels. Default is: { 'w':120, 'h':160 }.

this.spotLightPosition

Dict - Determines the 3D position of the spot light. Default is: {'x':0, 'y':250, 'z':-200}.

this.tileMargin

Number - Determines the margin between tiles in pixels. Default is: 20.

this.tileElements

List - List of HTML contents of each tile. This attribute is required to display content on the tiles.

this.planeHeight

List - Determines the height of the plane on which shadows is generated. Generally needs to be adjusted as the size of tiles changes. Default is: -46.

this.backgroundColor

Hex - Determines the color of the Carousel background. Default is: #000000.

this.planeColor

Hex - Determines the color of the plane surface where light is shining. Default is: #ffffff.

this.ambientLight

Boolean - Determines whether or not to include ambient light. Recommended if background color isn't black. Default is: false.

this.cameraZoom

Number - Determines how zoomed in the user perspective is. Generally needs to be adjusted as the size of tiles changes. Default is: 0.

this.cameraHeight

Number - Determines the y position of the user perspective. Generally needs to be adjusted as the size of tiles changes. Default is: 40.

Callbacks

this.onSelectionChange

Called after completing a rotation.

this.onStart

Called after init.

Methods

this.init()

Initiates Carousel3D object. Parameters need to be set beofre calling this function.

this.getSelected()

Returns the index of the currently selected tile.

this.rotateTo( index )

Rotates to specified index.