Как сделать кнопку, которая позволяет модели WebGL вернуться к исходной ориентации?

Я создаю плагин для Графана. В этом плагине я загружаю модель с расширением .fbx, используя threejs, orbitcontrols и FBXLoader. Плагин получает данные от Grafana и использует их для обновления Roll, Pitch и Yaw модели.

Однако, поскольку я добавил элементы управления, можно увеличивать / уменьшать масштаб или смотреть на модель под другим углом.

Теперь я хочу создать кнопку, которая возвращает модель в исходную ориентацию при нажатии. Я думаю, что мне нужно сделать кнопку, которая вызывает функцию backToInitial () или что-то в этом роде, а затем эта функция должна изменить положение и поворот камеры (а не самой модели?) В исходное состояние. Я пробовал несколько вещей, но пока ничего не помогло. У меня больше всего проблем с размещением кнопки в нужном месте и добавлением прослушивателя событий, который реагирует на нажатие кнопки (потому что html и js находятся в отдельных файлах).

Кто-нибудь знает, логична ли эта идея и как это сделать?

Заранее большое спасибо!

THREE.OrbitControls() имеет метод .reset().
prisoner849 19.03.2018 16:23

Спасибо @ Prisoner849 за ваш комментарий! Я пробовал много всего, чтобы добавить этот метод в свой код, но, похоже, я не могу найти способ сделать красивую кнопку внутри моей модели WebGL. Если я попытаюсь создать обычную кнопку HTML, она появится поверх сцены, что действительно некрасиво, а сама сцена станет меньше, чтобы освободить место для кнопки. Вы знаете способ, при котором этого не происходит? Заранее спасибо!

Esmee 27.03.2018 11:16

Пожалуйста :) Вы можете создать новый вопрос с более подробной информацией о проекте, над которым вы работаете. Добавьте фото того, что у вас есть и чего вы хотите достичь в результате. Чем больше информации вы дадите, тем быстрее и подробнее получите ответ. Было бы намного лучше, если бы вы включили пример живого кода.

prisoner849 27.03.2018 11:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
288
0

Другие вопросы по теме