2017-10-18 11 views
0

3 각형 파티클이 주변에 떠있는 포크 된 three.js codepen 실험을했습니다.three.js : 파티클 대신 텍스트를 파티클 클라우드에 전달

하지만 난 그런 내가 텍스트 (기하학?)를 통과 할 수 그것으로, 다소 단어/태그 구름처럼, 광장 입자를 대체하는 것을 수정하기 위해 노력하고있어. 이것이 가능한가? 현재 codepen에

링크 : https://codepen.io/farisk/pen/pWQGxB

Heres는 내가 달성하고자하는 것 : enter image description here

나는 현재 어디서부터 시작 모르겠어요.

어떻게 든 텍스트 구조

var loader = new THREE.FontLoader(); 
let font = loader.parse(fontJSON); 
var geometry = new THREE.TextGeometry("hello", {font: font, size: 120, height: 10, material: 0}); 

그러나 사람이 올바른 방법이 아니라고 언급을 사용하는 생각? 나는 three.js/html 캔버스에 매우 익숙해서 어떤 도움을 주셔서 감사합니다. 입자 당 구조에 전달

답변

1

입자 시스템에서 일반적으로 가능하지 않다 각 입자에 대한 동일한 구조가 이러한 시스템을 효율적으로 만드는 것입니다 사실 때문이다.

  • 는 하나의 스프라이트 텍스처에 모든 텍스트를 렌더링과 질감은 각 입자가 올바른 텍스트를 렌더링하도록 각 입자 좌표 제공 :

    은 기본적으로 두 가지 옵션이 있습니다 찾고있는 효과를 달성하기 위해. (텍스트의 2 차원 렌더링 만하고 많은 양의 텍스트에 대해서는 확장 할 수 없음)이 example을 참조하십시오.
  • 각 텍스트 객체를 자체 지오메트리로 만들고 파티클 시스템없이 렌더링합니다.

태그 클라우드를 실제로 구현하려면 순수한 JavaScript를 사용하고 계산 된 3D 위치에 따라 텍스트 요소의 위치를 ​​변환하면됩니다.

+0

좋아요, 아마도 TagCanvas.js와 같은 것을 좋아할 것입니다. 팁 고마워. – wsgg