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

回答

相關問題