Threejs text does not render

对不起，noob问题在这里，但我坚持了这一段时间。我正在尝试获取基本的Threejs文本进行渲染。在StackOverflow上询问这个问题的其他问题似乎是使用较旧的Threejs API。以下仅显示黑屏。在此先感谢...Threejs text does not render

<html> 
<head> 
    <title>Text Test</title> 
    <style> 
     body { margin: 0; } 
     canvas { width: 100%; height: 100% } 
    </style> 
</head> 
<body> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script> 
    <script> 
     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 


     var loader = new THREE.FontLoader(); 
     var font = loader.load(
      // resource URL 
      'helvetiker_bold.typeface.json', 
      // Function when resource is loaded 
      function (font) { 
       var geometry = new THREE.TextGeometry('Hello three.js!', { 
        font: font, 
        size: 80, 
        height: 5, 
        curveSegments: 12, 
        bevelEnabled: true, 
        bevelThickness: 10, 
        bevelSize: 8, 
        bevelSegments: 5 
       }); 
       var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
       var textMesh = new THREE.Mesh(geometry, material); 

       scene.add(textMesh); 

       camera.position.z = 5; 

       var render = function() { 
        requestAnimationFrame(render); 


        renderer.render(scene, camera); 
       }; 

       render(); 
      }, 
      // Function called when download progresses 
      function (xhr) { 
       console.log((xhr.loaded/xhr.total * 100) + '% loaded'); 
      }, 
      // Function called when download errors 
      function (xhr) { 
       console.log('An error happened'); 
      } 
     ); 



    </script> 
</body>

来源

2017-04-23 alxross

有可能2个问题。

您提到了一条警告WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported。这看起来像it might be a bug in Firefox and Safari。

否则你的文字很大，你的相机太靠近了。

使用

camera.position.z = 500;

来源

2017-04-23 05:03:26 gman

感谢您的答复。是的，我查过了，没有错误。有两个警告我认为是正常的。这里的第一几行： “顶点” “警告：0：1：扩展名 'GL_ARB_gpu_shader5' 不支持 ” “1：精密highp浮动; 2：精密highp INT; – alxross

@alxross GMAN是正确的，看到这个codepen：[https://codepen.io/anon/pen/eWzXZY?editors=0010](https://codepen.io/anon/pen/eWzXZY?editors=0010） – micnil

Threejs text does not render

回答

相关问题