Question

我在THREE.JS上遇到问题，我在场景中添加了一个3D文字：

var loader = new THREE.FontLoader();
loader.load( '3rdparty/three.js/fonts/helvetiker_regular.typeface.json',function ( font ) {
   var material = new THREE.MeshPhongMaterial({color: 0xff0000});
   var textGeom = new THREE.TextGeometry( 'Hello World!', {font: font});
   var textMesh = new THREE.Mesh( textGeom, material );
   var bBox = new THREE.Box3().setFromObject(_object);
   textMesh.position.set((bBox.max.x - bBox.min.x) / 2 + 
   bBox.min.x,bBox.max.y + 10,(bBox.max.z - bBox.min.z) / 2 + bBox.min.z);
   scene.add(textMesh);
});

但是只有当我放大我的场景文本时，该对象才会出现，同样我可以解除对象保持可见状态。

After text add, no text

After zoom, text appears

After unzoom text still here

这里是相机配置（所以它不是相机参数问题）：

new THREE.PerspectiveCamera(45,SCREEN_WIDTH/SCREEN_HEIGHT,0.1,99999999);

如何在添加后立即强制显示文字？

Answer 1

通过调用render.render(scene, camera);

添加文字后再次渲染场景

var loader = new THREE.FontLoader();
loader.load('3rdparty/three.js/fonts/helvetiker_regular.typeface.json', function(font) {
  var material = new THREE.MeshPhongMaterial({
    color: 0xff0000
  });
  var textGeom = new THREE.TextGeometry('Hello World!', {
    font: font
  });
  var textMesh = new THREE.Mesh(textGeom, material);
  var bBox = new THREE.Box3().setFromObject(_object);
  textMesh.position.set((bBox.max.x - bBox.min.x) / 2 +
    bBox.min.x, bBox.max.y + 10, (bBox.max.z - bBox.min.z) / 2 + bBox.min.z);
  scene.add(textMesh);
  render.render(scene, camera);
});

THREE.JS：缩放后出现对象

1 个答案: