オブジェクトの上にthree.jsのテキストを追加する

Question

私のthree.jsスクリプトにテキストを追加するのが難しいです。私はたくさんの検索をしましたが、実際のモデルが見つかると、それは以前のバージョンのthree.jsを使用していますので、使用できません。また、テキスト幾何学は機能しないようです。 3dテキストを追加したいが、2dを追加したくない。

Answer 1

必ずthree.jsの公式の例をチェックしてください。最新のthree.jsには多くのヒントがあります。

• http://threejs.org/examples/#webgl_geometry_text
• http://threejs.org/examples/#webgl_geometry_text_earcut
• http://threejs.org/examples/#webgl_geometry_text_pnltri

まず、あなたはnew THREE.FontLoaderを持つフォントファイルをロードする必要があります。フォントファイルは、http://threejs.org/examples/fonts/optimer_bold.typeface.jsのように、JSファイル内にあるはずです。あなたはその後、フォントを使用してnew THREE.TextGeometryクラスとテキストジオメトリを作るhttp://gero3.github.io/facetype.js/

var font; 
var loader = new THREE.FontLoader(); 
loader.load('path/to/fontfile.js', function (response) { 
    font = response; 
}); 

でJSにフォントを変換することができます。

var textGeo = new THREE.TextGeometry(text, { 
    font: font, 
    size: size, 
    height: height, 
    curveSegments: curveSegments, 
    bevelThickness: bevelThickness, 
    bevelSize: bevelSize, 
    bevelEnabled: bevelEnabled, 
    material: 0, 
    extrudeMaterial: 1 
}); 

その後、私はあなたのメソッドを実行するには、次のエラーを取得しています

new THREE.Mesh(textGeo, material);