# GiftBox-3D
Виджет, который добавляет на страницу сайта интерактивный 3D объект в виде подарочной коробки.

**Demo:**
[https://dmitryspace.com/3d-gift](https://dmitryspace.com/3d-gift/index.html?text=Dmitry%20Space&fontSize=30&background=71b1e9)

![](https://i.imgur.com/OrpMzRZ.jpg)

## Установка
В то место страницы, где должен быть виджет, нужно добавить такой код:
```HTML
<script 
  id="GiftBox3D" 
  src="https://dmitryspace.com/3d-gift/GiftBox.init.js"
  data-color1 = "f69974"
  data-color2 = "ea3e55"
  data-text = "Подарок!"
  data-text-color = "ffeeee"
  data-font-size =  "30"
  data-open-trigger = "hover"
></script>
```

Виджет имеет квадратные пропорции и всегда растягивается на всю ширину того блока, в котором он находится. 
Поэтому, чтобы скорректировать размер виджета, вы можете просто изменить ширину того блока, в который он добавлен.
Например, так:
```HTML
<div style="width:400px;">
  <script id="GiftBox3D" src="https://dmitryspace.com/3d-gift/GiftBox.init.js"></script>
</div>
```


## Настройки
Виджет имеет несколько опций, которые прописываются в качестве атрибутов в теге &lt;script&gt;

| Опция | Тип | По-умолчанию | Описание
| --- | --- | --- | --- |
| **id** | строка | GiftBox3D | ID элемента. Всегда равен **GiftBox3D** *(обяз.)* |
| **src** | ссылка | https://dmitryspace.com/3d-gift/GiftBox.init.js | Ссылка на файл **GiftBox.init.js** *(обяз.)* <br />Вы можете использовать ссылку из примера, либо загрузить этот файл в своё файловое хранилище. |
| **data&#8209;color1** | HEX код цвета <br />**(без&nbsp;решётки)** | f69974 | Цвет подарочной коробки. *(не обяз.)* |
| **data&#8209;color2** | HEX код цвета <br />**(без&nbsp;решётки)**  | ea3e55 | Цвет ленты на подарочной коробке. *(не обяз.)* |
| **data&#8209;text** | строка | Подарок! | Текст, который будет появляться, при наведении курсора мыши на коробку. *(не обяз.)* <br /> Желательно использовать одно-два коротких слова. Если нужно перенести текст на другую строку, то вместо переноса строки используется управляющий символ **\n** |
| **data&#8209;text&#8209;color** | HEX код цвета <br />**(без&nbsp;решётки)** | ffffff | Цвет текста *(не обяз.)* |
| **data&#8209;font&#8209;size** | число | 50 | Размер текста *(не обяз.)* |
| **data&#8209;background** | HEX код цвета <br />**(без&nbsp;решётки)** |  | Цвет фона *(не обяз.)* |
| **data&#8209;open&#8209;trigger** | строка | "hover" | Триггер открытия коробки ["hover"\|"click"] *(не обяз.)* |

Для выбора цвета вы можете воспользоваться этим инструментом: https://csscolor.ru/

## Обработка событий
```JavaScript
$(window).on("message onmessage", function(e) {
  let message = e.originalEvent.data;
  if (message.type === 'giftHover') {
    // Обработка наведения
    console.log('Gift hovered');
  }
  
  if (message.type === 'giftClick') {
    // Обработка клика
    console.log('Gift clicked');
  }
});
```

### Поддержка браузерами
Виджет использует технологию WebGL для рендеринга трёхмерных сцен, которая поддерживается всеми современными браузерами.
Если браузер пользователя не поддерживает WebGL, то вместо 3D-объекта он увидит похожую SVG картинку подарочной коробки, при этом все цвета заданные в настройках будут сохранены.

##### Браузеры, поддерживающие WebGL
Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 и Microsoft Edge.


### Лицензия MIT.
Copyright (c) 2021 [Dmitry Space](https://t.me/DmitrySpace)