Как добавить кнопку в 3-й JS-объект .dae

Question

Я импортировал файл .dae и добавил его в свою сцену.Он размещен здесь, так как я не мог разместить в codepen: http://freelancer.ueuo.com/threejs/.

Я хочу добавить кнопку в передней части киоска, которая говорит "CLICK ME", например (разработан CSS), а затем, когда я нажимаю кнопку, я хочу, чтобы появилось всплывающее окно.Я знаю, как заставить всплывающее окно появляться.Но я понятия не имею, как добавить кнопку в сцену и использовать raycaster для ее обнаружения.Пожалуйста, помогите.

Answer 1

Чтобы добавить кнопку либо вы можете определить BoxGeometry (https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry) перед вашим ларьком или используйте некоторые 3d-объекты по этой ссылке (https://www.turbosquid.com/) и разместите их в передней части вашего киоска, используя

Object.position.set(x,y,z)

Чтобы Raycaster мог отслеживать ваш объект, вы можете инициализировать так же, как

raycaster.setFromCamera( mouse, camera )

По сути, источником луча будет ваша камера, а целью будет мышь.

Теперь для прослушивания событий на 3d-объекте вы можете использовать

intersects = raycaster.intersectObjects( button3dObject )

если он пересекает событие button3dObject & click, то вы можете открыть модальное всплывающее окно

Справочник по использованию raycaster: https://threejs.org/docs/index.html#api/en/core/Raycaster