如何在三个 js 中制作 3d 文本

Posted 2023-02-27

【中文标题】如何在三个 js 中制作 3d 文本

【英文标题】：How make 3d text in three js

【发布时间】：2012-10-25 06:07:37

【问题描述】：

我通过引用this doc 和this doc 编写脚本 我的代码是

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

我可以通过稍微更改代码来制作立方体和其他几何体。但我不能制作 3d 文字 使用这个脚本。 这段代码有什么问题？ 请帮帮我

【问题讨论】：

这是错误 TypeError: this.faces[this.face] is undefined [Break On This Error] return this.faces[ this.face ][ this.weight ][ this.style ];

【参考方案1】：

您需要使用如下模式加载字体文件：

var loader = new THREE.FontLoader();

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

    // your code here

 );

例如，请参阅这个 three.js 示例：

https://threejs.org/examples/webgl_geometry_text.html

另外，我建议不要为几何图形和网格分配相同的变量名称。

three.js r.128

【讨论】：

注意标准现在是json：loader.load( 'fonts/helvetiker_regular.typeface.json', ..

@bebbi 谢谢。更新了答案。

【参考方案2】：

我还写了 this tutorial 关于创建 3d 字体的文章，因为我遇到了一些我认为值得记录的问题。