3つのjsに表示されないテキスト

私はThree.jsには新しく、いくつかのテキストをレンダリングしようとしています。このコードを見て、誰かが私が間違っていることを教えてくれますか？3つの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

3つのjsに表示されないテキスト

答えて

関連する問題