文字不出現在三個js

我很新的Three.js，我只是想獲得一些文字渲染。從看這個代碼可以有人告訴我我做錯了什麼？文字不出現在三個js

我喜歡我的.json文件通過加載程序，但我似乎沒有得到任何東西，當我在瀏覽器中查看頁面。

<body> 

    <canvas id="myCanvas"></canvas> 

    <script src="js/three.js"></script> 
    <script type="text/javascript" src="js/helvetiker_regular.typeface.json"></script> 
    <script> 
     var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true}); 
     renderer.setClearColor(0x00ff00); 
     renderer.setPixelRatio(window.devicePixelRatio); 
     renderer.setSize(window.innerWidth, window.innerHeight); 

     var camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 3000); 

     var scene = new THREE.Scene(); 

     var light = new THREE.AmbientLight(0xffffff, 0.5); 
     scene.add(light); 

     var light1 = new THREE.PointLight(0xffffff, 0.5); 
     scene.add(light1); 

     var loader = new THREE.FontLoader(); 

     loader.load('js/helvetiker_regular.typeface.json', 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.MeshLambertMaterial({color: 0xF3FFE2}); 
     var mesh = new THREE.Mesh(geometry, material); 
     mesh.position.set(0, 0, -1000); 

     scene.add(mesh); 

     requestAnimationFrame(render); 

     function render() { 

      mesh.rotation.x += .01; 
      mesh.rotation.y += .01; 

      renderer.render(scene, camera); 
      requestAnimationFrame(render); 
     }; 

    </script> 
</body>

來源

2017-08-15 Justmatt

加載程序是異步的，並且在加載完成時，您發出的函數（回調函數）會觸發。在回調中移動網格創建，並且應該修復它。

loader.load('js/helvetiker_regular.typeface.json', 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.MeshLambertMaterial({color: 0xF3FFE2}); 
    var mesh = new THREE.Mesh(geometry, material); 
    mesh.position.set(0, 0, -1000); 

    scene.add(mesh); 
});

P.S.您可能不需要以下行：

<script type="text/javascript" src="js/helvetiker_regular.typeface.json"></script>

加載器將自行下載文件。

來源

2017-08-15 23:20:47 TheJim01

謝謝，這項工作，但只有通過本地主機訪問文件後。 – Justmatt

文字不出現在三個js

回答

相關問題