three.js 将文本渲染到场景中答案

【问题标题】：three.js rendering text to scenethree.js 将文本渲染到场景中
【发布时间】：2018-09-11 21:00:06
【问题描述】：

我是 three.js 的新手。

在我的工作中，我必须制作 3d 图形网站。

于是在google上搜索了一下，发现three.js适合方便的操作WebGL。

在三个.js文档中(https://threejs.org/docs/#api/en/geometries/TextGeometry)，

TextGeometry 是用于在场景中绘制文本的 API。

[src.js]

init = () => {
  window.addEventListener('resize', resizeWindow);
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
  var controls = new THREE.OrbitControls( camera );
  controls.update();
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(0xdd3b56);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Set shadow
  renderer.shadowMap.enabled = true;
  // Show Axis
  var axes = new THREE.AxisHelper(5);
  scene.add(axes);

  // Text
  var loader = new THREE.FontLoader();
  loader.load( './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 textMaterial = new THREE.MeshPhongMaterial({color: 0xFE98A0});
  var text = new THREE.Mesh(geometry, textMaterial);
  text.position.x = 0;
  text.position.y = 10;
  text.position.z = 10;
  scene.add(text);

  // Light
  var spotLight = new THREE.SpotLight(0xFFFFFF);
  spotLight.position.set(-40, 60, 30);
  spotLight.castShadow = true;
  spotLight.shadow.mapSize.width = 5120;
  spotLight.shadow.mapSize.height = 5120;
  scene.add(spotLight);

  // Camera Setting
  camera.position.x = 0;
  camera.position.y = 30;
  camera.position.z = 30;
  camera.lookAt(scene.position);
  document.getElementById("threejs_scene").appendChild(renderer.domElement);

  renderScene();

  function renderScene() {
    requestAnimationFrame(renderScene);
    controls.update();
    renderer.render(scene, camera);
  }
}
window.onload = init();

[index.html]

<html>
<head>
  <script src="three.js"></script>
  <script src="OrbitControls.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="threejs_scene"></div>
  <script src="src.js"></script>
</body>
</html>

当我执行我的代码时，它会抛出 [.WebGL-0x7fb612852000]RENDER WARNING: Render count or primcount is 0. 和 WebGL: too many errors, no more errors will be reported to the console for this context. 错误。

所以我在 google 上搜索了一下，它是在 Three.js 试图渲染一个还不存在的对象时发生的。

但在我的代码中，我已经定义了它。

  var textMaterial = new THREE.MeshPhongMaterial({color: 0xFE98A0});
  var text = new THREE.Mesh(geometry, textMaterial);
  text.position.x = 0;
  text.position.y = 10;
  text.position.z = 10;

我该如何解决这个问题？

我的最后一个目标是在场景中显示文本。

谢谢。

【问题讨论】：

这是您控制台中的第一个错误吗？也许您的字体可能没有正确加载？
@manthrax 这是第一个错误，另一个对象完美显示。
@manthrax 为了便于阅读，我删除了另一个对象的代码。
@manthrax 如何检查字体是否加载？我将helvetiker_regular.typeface.json 文件保存在同一个文件夹中。

标签： javascript three.js

【解决方案1】：

window.onload = function(params) {

  /*
   *
   * SET UP THE WORLD
   * 
   */



  //set up the ratio
  var gWidth = window.innerWidth;
  var gHeight = window.innerHeight;
  var ratio = gWidth / gHeight;
  var borders = [40, 24] //indicate where the ball needs to move in mirror position


  var light = new THREE.AmbientLight(0xffffff, 0.5);
  var light1 = new THREE.PointLight(0xffffff, 0.5);
  light1.position.set(0, 5, 0);
  light1.castShadow = true;

  //  set the renderer 
  var renderer = new THREE.WebGLRenderer();
  var camera = new THREE.PerspectiveCamera();
  camera.position.set(10, 10, 10);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  //properties for casting shadow
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  renderer.setSize(gWidth, gHeight);
  document.body.appendChild(renderer.domElement);

  var scene = new THREE.Scene();
  scene.add(light);
  scene.add(light1);

  var ground = new THREE.Mesh(new THREE.BoxGeometry(10, 0.5, 10), new THREE.MeshLambertMaterial())
  ground.receiveShadow = true;
  scene.add(ground)
  var geometry;


  var loader = new THREE.FontLoader();
  var mesh;

  requestAnimationFrame(render);

  function render() {
    if (mesh) {
      mesh.rotation.y += 0.01;
      mesh.rotation.z += 0.007;
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }

  loader.load('https://cdn.rawgit.com/mrdoob/three.js/master/examples/fonts/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
    });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 2, 0);
    mesh.scale.multiplyScalar(0.01)
    mesh.castShadow = true;
    scene.add(mesh);


    var canv = document.createElement('canvas')
    canv.width = canv.height = 256;
    var ctx = canv.getContext('2d')
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canv.width, canv.height);
    ctx.fillStyle = 'black'
    ctx.fillText("HERE IS SOME 2D TEXT", 20, 20);
    var tex = new THREE.Texture(canv);
    tex.needsUpdate = true;
    var mat = new THREE.MeshBasicMaterial({
      map: tex
    });
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), mat);
    scene.add(plane)
  });



}

body {
  padding: 0;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<html>

<head>

</head>

<body>
</body>

</html>

【讨论】：

我用你的代码解决了。但是你能告诉我错误发生在哪里吗？
我不知道.. 但我的猜测是您使用的是旧版本的三个，或者字体加载静默失败，因为没有传递给它的错误处理程序。你加载的是什么版本的三？你从哪里得到你的字体文件？
最新版本和字体文件与index.html和src.js在同一个文件夹中
我会找到哪里出错了。无论如何，你知道如何显示文本 2d 吗？上面的代码文本显示为 3d。
对于 2d，您将文本绘制到画布上，然后将画布用作平面上的纹理。