timeglass-3d
v0.1.2
Published
A fancy 3D timer for your website.
Readme
A fancy 3D timer for your website. See it in action here, here and here.
Installation
If you're using npm:
$ npm install --save timeglass-3dOtherwise, you can just manually include Three.js and Timeglass 3D via a <script> tag:
Please note that the link below always points to the latest version of the plugin. You can choose a specific version here.
<!-- Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<!-- Timeglass 3D -->
<script src="https://cdn.jsdelivr.net/npm/timeglass-3d/lib/timeglass-3d.min.js"></script>Getting Started
First, we'll need some markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Timeglass 3D — Getting Started</title>
<!-- Embeded CSS -->
<style>
html, body, .timeglass-3d-container {
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="timeglass3DContainer" class="timeglass-3d-container"></div>
<!-- Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<!-- Timeglass 3D -->
<script src="https://cdn.jsdelivr.net/npm/timeglass-3d/lib/timeglass-3d.min.js"></script>
<!-- Embeded JS -->
<script>
// Here goes our JS code...
</script>
</body>
</html>The example below should give you a basic idea on how to use the plugin. Let's take a look:
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. 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 | <body> | 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. |