A fancy 3D timer for your website. See it in action
[here](https://codepen.io/sn4il/full/OOZNEv/),
[here](https://codepen.io/sn4il/full/mqLLWN/) and
[here](https://codepen.io/sn4il/full/ooddmr/).
## Installation
If you're using npm:
```
$ npm install --save timeglass-3d
```
Otherwise, you can just manually include Three.js and Timeglass 3D via a `
```
## Getting Started
First, we'll need some markup:
```html
Timeglass 3D — Getting Started
```
The example below should give you a basic idea on how to use the plugin. Let's take a look:
```js
timeglass3D({
container: document.getElementById('timeglass3DContainer'),
date: '10/31/2018', // A date to count from (or to count to).
mode: 'countdown', // Using the plugin as a countdown. By default it's used as a timer.
theme: 'dark', // Use dark theme. By default light theme is used.
// Set this property to the URL of an image you want to use as a background.
// The image will also be used as a reflection on the bulbs.
environment: 'https://images.unsplash.com/photo-1482263231623-6121096b0d3f?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=24f73a95a688362711adddbbf7e578af',
onTableMode: false, // Set this to true to make the hourglasses behave like if they are on a table.
lookAroundMode: true, // You'll be able to look around (using a mouse).
hourglasses: {
all: {
sides: {
material: 'glossy', // Make the framing glossy.
color: '#4e4e6e' // Set the color of the framing.
},
sands: {
color: '#cfcffe' // Set the color of the sand.
}
}
}
});
```
You can see the result [here](https://codepen.io/sn4il/full/BmVyRy/).
For more information, see the section below.
## API Reference
**timeglass3D([props] [, noInfo] [, noWarnings]) ⇒ `undefined`**
| Param | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| [props] | `object` | `{...}` | Plugin properties. |
| [noInfo] | `boolean` | `false` | If set to `true`, info won't be displayed. |
| [noWarnings] | `boolean` | `false` | If set to `true`, warnings won't be displayed. |
**[props] : `object`**
| Param | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| [container] | `HTMLElement` | `` | The DOM element you want the plugin to use as a container. |
| [date] | `Date` `string` `number` | `Date.now()` | The date or time to count from (or to count to). It can be an instance of `Date`, any supported date string or amount of time in milliseconds. |
| [mode] | `"timer"` `"countdown"` | `"timer"` | Tells whether to count up or to count down from the date mentioned above. |
| [theme] | `"lite"` `"dark"` | `"lite"` | Light or dark theme. |
| [environment] | `string` | | The URL to an image, that will be used as a reflection on the bulbs. If the `transparent` property is set to `false` (default), will also be used as a background. |
| [transparent] | `boolean` | `false` | If set to `true`, the background will be transparent. |
| [onTableMode] | `boolean` | `false` | If set to `true`, the hourglasses will rise and then go down while being turned and shadows under the hourglasses will appear. |
| [lookAroundMode] | `boolean` | `false` | If set to `true`, you will be able to look around (using a mouse). |
| [hourglasses] | `object` | `{...}` | Allows you to customize the look and feel of the hourglasses. |
| [scale] | `number` | `1` | The scale of the scene. |
| [spacing] | `number` | `3.5` | The distance between the hourglasses. |
| [offsetX] | `number` | `0` | Adjusts the scene horizontally. |
| [offsetY] | `number` | `0` | Adjusts the scene vertically. |
**[props.hourglasses] : `object`**
| Param | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| [all] | `object` | `{...}` | Global properties. Will be redefined by any of the below. |
| [minute] | `object` | | Properties of the minute hourglass (the one on the right). |
| [hour] | `object` | | Properties of the hour hourglass (the one in the middle). |
| [day] | `object` | | Properties of the day hourglass (the one on the left). |
**[props.hourglasses.{all | minute | hour | day}] : `object`**
| Param | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| [sides] | `object` | `{...}` | Properties of the framing. |
| [sands] | `object` | `{...}` | Properties of the sand. |
**[props.hourglasses.{all | minute | hour | day}.sides] : `object`**
| Param | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| [material] | `"matte"` `"plastic"` `"glossy"` | `"plastic"` | The material of the framing. |
| [color] | `string` `number` | `"#28282f"` | The color of the framing. |
**[props.hourglasses.{all | minute | hour | day}.sands] : `object`**
| Param | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| [color] | `string` `number` | `"#fefe88"` | The color of the sand. |