2012-07-12 4 views
7

목표는 마우스를 메쉬 위로 가져 가면서 Three.Mesh 이름을 레이블로 표시하는 것입니다. Three.js에서이 작업을 수행하는 방법THREE.Mesh에 라벨을 추가하는 방법은 무엇입니까?

샘플 코드를 제공 할 수 있습니까?

+0

당신이 실제로 텍스트를 렌더링하려고 현장의 일부? 3D 텍스트 여야합니까? 아니면 CSS를 사용하여 렌더러 위에 2D 마크 업을 덧씌우면됩니까? 또한 몇 가지 이전 답변을 수락하거나 도움을 줄 수있는 사람이 많지 않을 수 있습니다. –

+0

그냥 도구 팁처럼 레이블이 필요합니다. 마우스를 가리키면 메쉬에서 끝나거나 멈출 때 레이블을 갖는 것이 좋습니다. CSS가있는 렌더러 상단에 2D 마크 업을 겹쳐서 표시해야합니다. 또한 어떤 질문/대답이 받아 들여지지 않는지 알려주세요. 나는 그냥 바라 보았고 누구도 받아 들일 수없는 상태가되지 않기를 바란다. XTK.js API에서 그런 라벨을 보았습니다 –

답변

27

챌린지 허용!

작동 코드 예제에서 : http://stemkoski.github.com/Three.js/Mouse-Tooltip.html

나는 작은 예제 프로그램으로 나누어 한 각각의 목표에 대한 세 가지 주요 단계로이 나타납니다.

(1) 마우스를 가리키는 장면 요소를 결정하십시오. 참조 : http://stemkoski.github.com/Three.js/Mouse-Over.html

(2) 이미지로 표시 할 텍스트를 렌더링합니다 (이 경우 캔버스 요소를 사용함). 참조 : http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

(3) 마우스 포인터의 위치에서 부분 (2)의 이미지가 포함 된 스프라이트를 그립니다. 참조 : http://stemkoski.github.com/Three.js/Mouse-Sprite.html

이 모든 예 (더는) 내가 최소한의 일련의 Three.js를의 가능성을 보여주기 위해 노력하고있는 http://stemkoski.github.com/Three.js/에서, (상세한 의견) 소개 예 내 성장 컬렉션의 일부입니다 예. 또한

, 그것으로 인해의 신용 : 부품 (1)과 (3) 자신의 GitHub의 페이지에 MrDoob의 예, 특히 대화 형 큐브의 예를 몇 가지를 기반으로 : http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html

+1

Lee Stemkoshi에게 감사드립니다. 귀하의 모범은 두려운 것이고 실제로 도움이됩니다. –

+1

@lee 최신 버전에는 어떤 방법이 있습니까? 현재 버전의 경고 및 오류 ... V71입니다. –

+2

거기에 더 간단한 해결책이 있습니까? 장면에 스킨 메쉬가 있고 각 메쉬 위에 이름을 표시하려는 경우의 예는 무엇입니까? 이제 스프라이트의 문제점은 줌에 따라 확대 및 축소됩니다. 나는 그것을 그대로 유지하고 싶다. 그것은 주변의 메쉬를 따라 가야합니다 (머리에 머물러 야합니다). – majidarif

관련 문제