时间戳

首页 > 解决方案 > TextGeometry 未显示

javascript - TextGeometry 未显示

问题描述

我正在尝试 TextGeometry。我让它为 BoxGeometry 工作，但 TextGeometry 似乎不起作用。

我尝试过使用不同的材料，如 MeshNormalMeterial，但它仍然无法正常工作

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.getElementById("banner").appendChild( renderer.domElement );
var loader = new THREE.FontLoader();
loader.load( 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_bold.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,
        bevelOffset: 0,
        bevelSegments: 5
    } );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var txt = new THREE.Mesh( geometry, material );
  scene.add( txt );
  function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    txt.rotation.x += 0.01;
    txt.rotation.y +=0.01;
  }
  animate();

} );

camera.position.z = 5;

没有错误信息

标签： javascriptthree.js

解决方案

将相机的位置和文本几何的参数设置为更负责任的东西。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 75;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.FontLoader();
loader.load('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/helvetiker_bold.typeface.json', function(font) {

  var geometry = new THREE.TextGeometry('Hello three.js!', {
    font: font,
    size: 10,
    height: 1,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 0.5,
    bevelSize: 0.25,
    bevelOffset: 0,
    bevelSegments: 5
  });
  geometry.center();

  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  
  var txt = new THREE.Mesh(geometry, material);
  scene.add(txt);

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    txt.rotation.x += 0.01;
    txt.rotation.y += 0.01;
  }
  animate();

});
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>

推荐阅读