three.js에 TextGeometry를 추가하는 방법은 무엇입니까?

three.js에 텍스트를 어떻게 추가합니까? 이 코드를 시도했지만 Uncaught TypeError: Cannot read property 'offsetX' of undefined의 오류가 발생합니다. 이 문제를 어떻게 해결할 수 있습니까?three.js에 TextGeometry를 추가하는 방법은 무엇입니까?

여기 내 .json file입니다.

var loader = new THREE.FontLoader(); 
loader.load('https://thefortcity.dev/build/fonts/FontAwesome_Regular.json', function (font) { 
    var textGeometry = new THREE.TextGeometry("text", { 
     font: font, 

     size: 50, 
     height: 10, 
     curveSegments: 12, 

     bevelThickness: 1, 
     bevelSize: 1, 
     bevelEnabled: true 
    }); 

    var textMaterial = new THREE.MeshPhongMaterial( 
     { color: 0xff0000, specular: 0xffffff } 
    ); 

    var mesh = new THREE.Mesh(textGeometry, textMaterial); 

    scene.add(mesh); 
});

출처

2017-10-19 Merida

문제는 내가 자바 스크립트가 아니라고 생각합니다. json이 Big이 아닌 경우 여기로 전달하려고합니다. –

@ headmax 나는 내 게시물을 업데이 트했습니다 – Merida

감사합니다;) 추가. –

문제는 글꼴 굉장합니다. 글꼴 정의 파일을 자세히 보면, 표시하려는 문자 인 "text"에있는 문자의 정의를 찾을 수 없습니다. 다른 것을 시도하면 다음과 같습니다 :

/** 
    below boxes stand for: 
    - fa-volume-up [&#xf028;] 
    - fa-font [&#xf031;] 
    - fa-italic [&#xf033;] 
    - fa-align-right [&#xf038;] 
*/ 
var textGeometry = new THREE.TextGeometry("   ", {

다음은 작동합니다. 위의 기호를 cheatsheet에서 복사하여 코드에 붙여 붙여서 작동하는지 확인할 수 있습니다.

예를 들어 this plunkr을 시도해 볼 수 있습니다.

출처

2017-10-19 08:30:59

오, 감사합니다! 나는 그것을 알아 차리지 못했다. 오류가 사라졌지만 텍스트가 표시되지 않습니다. 텍스트를 사용할 수 있도록 다른 글꼴을 시도했습니다. 화면에 어떻게 표시 할 수 있습니까? .BoxGeometry fine을 표시 할 수 있습니다. – Merida

질문을 업데이트했습니다. 'mesh.position.x = -100;'과 같이 (x, y, z) 텍스트를 볼 수 있도록 격자를 배치해야합니다. –

I 값을 변경하려고 시도했지만 여전히 표시되지 않습니다. 장면을 출력하려고 시도했지만 실제로 읽지 만 표시되지 않는 이상한 장면입니다. ar.js와 함께 three.js를 시도하고 있습니다 – Merida

three.js에 TextGeometry를 추가하는 방법은 무엇입니까?

답변

관련 문제