Форум

Кнопки изменения материала в HTML

24 февраля 2018 21:00
#20817
Макс
Есть модель с кнопками но кнопки сделаны внутри сцены, а нужно чтобы они были в HTMLе плоские, что нужно прописать и где чтобы они отображались нормально?
(проект в прикрепленном архиве)
25 февраля 2018 13:28
#20822
Александр Романов
Вы уверены, что вам нужны именно html-кнопки? Вы можете просто припэрентить кнопки к камере и выставить выравнивание по нижней грани вьюпорта https://www.blend4web.com/doc/ru/camera.html?highlight=viewport%20alignment#viewport-alignment. HTML имеет смысл когда вам необходим сложный интерфейс со сложной версткой, а ваш случай довольно простой и типичный. Мне кажется, что можно обойтись тем что уже сделано, только "прикрепить" интерфейс к вьюпорту.
Александр (команда Blend4Web)
twitter
25 февраля 2018 14:50
#20826
Макс
нет, хотелось бы вынести управление в сторону от сцены, чтобы не закрывать сцену кнопками…
25 февраля 2018 16:52
#20828
Александр Романов
Для этого необходимо во-первых создать проект на основе вашего blend-файла. Почитайте статьи по Менеджеру проектов:
Бастрый старт с Project Manager
Вам нужно создать проект с настройками по-умолчанию (задайте только имя проекта). Он создастся в папке projects/имя_проекта. В Папке blender будет лежать blend-файл, используемый в этом сгенерированном проекте. Скопируйте в папку blender свой blend-файл. Откройте его в blender и экспортируйте в Blend4Web json формат. При экспорте укажите путь к папке projects/имя_проекта/assets. Далее вам нужно в файле имя_проекта.js подправить путь к json. Таким образом вы получите полноценное веб-приложение с javascript и html кодом, который вы можете редактировать чтобы сверстать свой интерфейс на html а также добавить js-обработчики.
По верстке в контексте Blend4Web есть неплохой урок на английском
Александр (команда Blend4Web)
twitter
25 февраля 2018 21:36
#20835
Макс
Ничего не понятно… а можно как то объяснить конкретно на этом файле? а то ничего не понял… еще и урок на английском… про проект ясно…а вот с кнопками ничего не понял… как всетаки добавить кнопки? есть пример чтобы например в ХТМЛ написать тото, а js файле тото, а в css тото… хочется сделать побыстрее, чем изучать весь JS
26 февраля 2018 10:44
#20838
Александр Романов
Весь JS изучать не обязательно, достаточно научиться создавать кнопочки, обработчик и стили.
Вот тут неплохо объясняется как сделать кнопку и обработчик к ней.
В этом обсуждении можно найти ссылку на пример кнопки с картинкой.
Скорее всего вы используете ноду Inherit material. Вот соответствующая функция API, которую ва нужно использовать в обработчике.
Александр (команда Blend4Web)
twitter
26 февраля 2018 19:26
#20854
Макс
вышло так, но непонятно как вставить сцену, и как назначить остальные кнопки…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var m_mat = require("material");
        var m_scenes = require("scenes");

        var ring = m_scenes.get_object_by_name("01");
        var Sphere_001 = m_scenes.get_object_by_name("Sphere.001");
        m_mat.inherit_material(ring, "gold_nod", Sphere_001, "chrome.003");
    </script>
</head>
<body>
<input type="button", value="click me" onclick="get_object_by_name(this)">
</body>
</html>
26 февраля 2018 19:27
#20855
Макс
запятая лишняя…
26 февраля 2018 19:28
#20856
Макс
вот скрин из блендера

Объект для изменения цвета - "01" мат. - "gold_nod"
материал у объекта "Sphere" - "chrome.003"
материал у объекта "Sphere.001" - "chrome"
материал у объекта "Sphere.002" - "gold_nod"
27 февраля 2018 11:17
#20857
Александр Романов
Ответ на сообщение пользователя Макс
вышло так, но непонятно как вставить сцену, и как назначить остальные кнопки…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var m_mat = require("material");
        var m_scenes = require("scenes");

        var ring = m_scenes.get_object_by_name("01");
        var Sphere_001 = m_scenes.get_object_by_name("Sphere.001");
        m_mat.inherit_material(ring, "gold_nod", Sphere_001, "chrome.003");
    </script>
</head>
<body>
<input type="button", value="click me" onclick="get_object_by_name(this)">
</body>
</html>

1) Вам нужно редактировать HTML-файл проекта, который вам нужно создать при помощи Менеджера Проектов
2) При создании проекта генерируются отдельные html, js, css, так что, чтобы не запутаться, лучше писать javascript код в js-файле
3)
<input type="button", value="click me" onclick="get_object_by_name(this)">
не уверен, что это вообще будет работать, поскольку вы при нажатии на кнопку пытаетесь вызвать get_object_by_name(this). Скорее всего интерпретатор просто не найдет эту функцию, т.к. ее нет в клобальной области видимости.
4) Ну и как я уже сказал, вам нужно редактировать сгенерированный html. Он сильно отличается от вашего. Вот пример:
<!DOCTYPE html>
<html>

<head>

<title>project1</title>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<link rel="stylesheet" href="project1.css" type="text/css">

<script type="text/javascript" src="../../dist/b4w.js"></script>

<script type="text/javascript" src="project1.js"></script>

</head>

<body>
  <div id="main_canvas_container"></div>
</body>

</html>


Во-первых там есть div с айдишником "main_canvas_container". В нем будет производиться отрисовка сцены.
Во-вторых подключет движок :
 <script type="text/javascript" src="../../dist/b4w.js"></script>
.
В-третьих подключен js-код проекта куда и желательно писать код 
<script type="text/javascript" src="project1.js"></script>

———————————–

Ну и после изменений своего кода конечно же запускайте проект, смотрите ошибки в консоли (F12)
Вот проект, в котором показано приблизительно как нужно делать.
Александр (команда Blend4Web)
twitter
 
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.