Javascript 三维文本未在three.js场景中渲染

文本“Hello three.js！”未在我的场景中渲染。当我使用BoxGeometry时，它工作得很好，但我似乎遗漏了TextBufferGeometry的一些内容

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // fov, aspect, near and far
camera.position.set(-15, 0, 25);
camera.lookAt( scene.position );

var loader = new THREE.FontLoader();

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

  var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

  var textGeo = new THREE.TextGeometry( 'Hello three.js!', {
    font: font,
    size: 80,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    material: 0,
    extrudeMaterial: 1
  } );

  textGeo.computeBoundingBox();
  textGeo.computeVertexNormals();

  var mesh = new THREE.Mesh( textGeo, material );

  scene.add(mesh);

} );

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);


var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );

对于

TextGeometry

---

我需要在字体加载器回调中移动渲染代码

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // fov, aspect, near and far
camera.position.set(-15, 0, 25);
camera.lookAt( scene.position );

var loader = new THREE.FontLoader();

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

  var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

  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 mesh = new THREE.Mesh( geometry, material );

  scene.add(mesh);

  var light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 0, 1, 1 ).normalize();
  scene.add(light);


  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  renderer.render( scene, camera );

} );

---

您正在尝试加载此文件：您是否确实在

font

文件夹中有该文件？@ChrisG是的，我有。用文件结构的图像更新帖子。我可以

console.log（font）

和

font ee{data:Object}

做得好）只是出于好奇，为什么不使用渲染循环呢？我不熟悉渲染循环。没有那么远是的，这不是很难）看看

render

函数，多次调用render有什么好处？你不会从你的问题中碰到问题）