2016-10-05 1 views
0

저는 프레임을 사용하고 있으며 화면에 메뉴를 추가하여 장면이나 다른 작업 (예 : 정보가있는 모달 표시)을 전환하고 싶습니다. 이것을 달성 할 수있는 방법이 있습니까? 내가 원했던 100 %가 아닌 aframe-ui-modal-component를 검색하고 발견했지만 어떤 종류의 메뉴를 보여 주지만이를 사용하여 해당 버튼을 클릭 할 수 없게 만들고 조치를 실행할 수는 없습니다.a 프레임 메뉴 작성 방법 - webvr

답변

0

평면 엔티티 또는 곡선 이미지를 사용하여 메뉴를 표시 할 수 있습니다. 마우스 클릭에서 일반적인 자바 스크립트 이벤트 리스너를 달성하는 직접적인 방법이 없다

document.querySelector('#menu1');.addEventListener('click', function() { 
model.setAttribute('visible','true'); 
} 
0

이가 2 차원 공간 (x와 y 화면 좌표의 기반으로하기 때문에 : 자바 스크립트를 사용하면 그 버튼 클릭을 할 수 있습니다), 여기서 WebVR은 3D 공간을 처리하므로 3D 공간에서 어디를 가리키고 있는지 결정하기 위해 레이 캐스팅이 필요합니다.

간접적 인 방법이 없다는 것은 아닙니다. 나는 최단 (그리고 덜 기능이 풍부한) 솔루션을 먼저 제공하고, 그 다음에는 더 복잡한 솔루션을 제공 할 것입니다. 클릭 mouseenter, 그리고하는 MouseLeave : https://www.npmjs.com/package/aframe-mouse-cursor-component

이 세 마우스 이벤트를 등록 할 수 있습니다 :

여기에 마우스 커서 라이브러리가있다. 이것은 카메라에서 마우스 포인터로 raycaster를 끌어오고 당신이 가리키는 대상을 추정합니다. 당신은 VR보기 커서를 사용하고자하는 경우

,이 : 여기 https://aframe.io/docs/0.2.0/components/cursor.html

당신은 호버를 등록하고 당신이에 무엇을 찾고있는 이벤트를 클릭 할 수 있습니다.

메뉴, 마우스 또는보기 커서와 상호 작용하는 데 사용하려는 입력 장치가 각각 있습니다. 이제 메뉴 자체에.

miauz가 지적했듯이 비행기를 만들고 자바 스크립트를 사용하여 이벤트 리스너를 첨부 할 수 있습니다. 이제는 플레이어에서 사용할 수있는 도구가 포함되어 있습니다. 당신의 비행기에

http://www.w3schools.com/jsref/met_document_addeventlistener.asp 

텍스트 : 당신이 이벤트 리스너에 처음 사용하는 경우, 당신은 여기 자습서를 찾을 수 있습니다 지금

https://www.npmjs.com/package/aframe-bmfont-text-component 

당신에 당신의 전형적인 2D 이벤트를 번역 할 수있는 제 3 자 라이브러리가 당신의 3D 환경 및 메뉴에 포함 된 비행기 객체 (버튼)에서 사용할 이벤트를 선택합니다.


복잡한 방식 : 직접 레이 캐스터를 사용할 수 있습니다.

https://aframe.io/docs/0.2.0/components/raycaster.html 

이 더 깊이를하고 코드의 줄 이상이 필요하지만, 당신은 충분히 능숙받을 경우에 당신이 그들과 함께 더 많은 수행 할 수 있습니다. 예를 들어 여기서는 카메라에서 연장 된 선을 따라 모든 객체를 얻을 수 있지만 위의 간단한 솔루션은 가장 가까운 것만 제공합니다.

이 정보가 도움이되기를 바랍니다. 행운을 빕니다!

관련 문제