如何通過引用<a href="http://mrdoob.github.io/three.js/docs/#Manual/Introduction/Creating_a_scene" rel="noreferrer">this doc</a>和<a href="https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/TextGeometry.js" rel="noreferrer">this doc</a>使3D文字在三個JS

Question

我寫一個腳本 我的代碼是

<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> 
    <script> 
    var text = "my text", 

      height = 20, 
      size = 70, 
      hover = 30, 

      curveSegments = 4, 

      bevelThickness = 2, 
      bevelSize = 1.5, 
      bevelSegments = 3, 
      bevelEnabled = true, 

      font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif 
      weight = "bold", // normal bold 
      style = "normal"; // normal italic 
    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 textGeo = new THREE.TextGeometry(text, { 

       size: size, 
       height: height, 
       curveSegments: curveSegments, 

       font: font, 
       weight: weight, 
       style: style, 

       bevelThickness: bevelThickness, 
       bevelSize: bevelSize, 
       bevelEnabled: bevelEnabled, 


      }); 


// var geometry = new THREE.CubeGeometry(10,10,1); 
    var material = new THREE.MeshBasicMaterial({color: 0x11ff00}); 
    var textGeo = new THREE.Mesh(textGeo, material); 
    scene.add(textGeo); 
    camera.position.z = 10; 
    function render() { 
     requestAnimationFrame(render); 
     textGeo.rotation.x += 0.01; 
     textGeo.rotation.y += 0.01; 
     renderer.render(scene, camera); 
} 


render(); 


</script> 

我可以通過稍微改變的代碼使立方體和其他幾何形狀。但我不能使用這個腳本使三維文字 。 這個代碼有什麼問題？ 請幫我

Answer 1

你需要使用的模式，像這樣加載一個字體文件：

var loader = new THREE.FontLoader(); 

loader.load('fonts/helvetiker_regular.typeface.json', function (font) { 

    // your code here 

}); 

見，例如，這些three.js所例子：

http://mrdoob.github.com/three.js/examples/canvas_geometry_text.html http://mrdoob.github.com/three.js/examples/webgl_geometry_text.html

另外，我建議不要將相同的變量名稱分配給幾何體和網格。

three.js所r.82

Answer 2

我也創造了3D字體寫道：this tutorial，因爲我打，我認爲是值得文檔化的幾個陷阱。