Three.js TextGeometry故障绘图

时间:2016-08-26 06:05:51

标签: javascript three.js

我按照演示代码但无法绘制TextGeometry。字体文件存在于服务器上。

    var loader = new THREE.FontLoader();

    loader.load( 'fonts/open-sans-regular.js', function ( font ) {

        const textMaterial = new THREE.MeshBasicMaterial( { color: 0x00ffff } )

        const textGeometry = new THREE.TextGeometry('asdfasdfasdfdsf',
        {
            font: font,
            size: 300,
            height: 200,
            curveSegments: 4,
            material: textMaterial
        }
    )

        textGeometry.translate(20, 50)
        const mesh = new THREE.Mesh(textGeometry, textMaterial)
        scene.add(mesh)

    } );

1 个答案:

答案 0 :(得分:0)

 <script type="text/javascript" src="Font.js" ></script>
 <script type="text/javascript" src="FontLoader.js" ></script>
 <script type="text/javascript" src="FontUtils.js" ></script>
 <script type="text/javascript" src="TextGeometry.js" ></script>
 <script type="text/javascript" src="helvetiker_regular.typeface.js">  
 </script>

我不确定它是否有帮助。但是当我首先添加这些文件时,我可以创建3D文本。 这是我的代码。

 var textMat = new THREE.MeshBasicMaterial({color:0x000000});
 var textGeo = new THREE.TextGeometry("text",{
    size : 15,
    height: 1,
    curveSegments: 3,
    font: 'helvetiker',
    weight: 'normal',
    bevelThickness: 3,
    bevelSize: 0,
    bevelEnabled: true
  });
  var textMesh = new THREE.Mesh(aboutmeGeo,bulletMat);
  textMesh.position.set(x,y,z);
  function createText(){
  scene.add(textMesh);
  }
  function removeText(){
  scene.remove(textMesh);
  }

我在threejs r80下载FontLoadejs,Fontjs; FontUtiljs在这里: here。 您可以在threejs旧版本中下载helvetiker_regulartypefacejs。 我希望我的回答可以帮到你。^ - ^