Come rendere il testo 3D in tre js

Question

scrivo una sceneggiatura di riferimento this doc e this doc il mio codice è

<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> 

posso fare cubo e altra geometria, modificando leggermente il codice. Ma non posso fare il testo 3d usando questo script. qual è il problema con questo codice? aiutarmi

Answer 1

È necessario caricare un file del font tramite un modello in questo modo:

var loader = new THREE.FontLoader(); 

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

    // your code here 

}); 

veda, ad esempio, questi Three.js esempi:

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

Inoltre, sconsiglio di assegnare lo stesso nome di variabile alla geometria e alla mesh.

Three.js r.82

Answer 2

Ho anche scritto this tutorial sulla creazione di un tipo di carattere 3d, dal momento che mi ha colpito un paio di grattacapi che ho pensato fosse la pena di documentare.