主页 / 问题 / 848197
Accepted
pepel_xD
Asked:2020-06-29 17:18:25 +0800 CST2020-06-29 17:18:25 +0800 CST

现货代替文字three.js

  • 772

我根据文档中的示例渲染了 3D 文本，但我得到了一个位置，而不是文本。 

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xEEEEEE);
camera.position.x = -50;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(scene.position);

let loader = new THREE.FontLoader();
loader.load('./helvetiker_regular.typeface.json', (font) => {
    let geometry = new THREE.TextGeometry('enemy', {
        font: font,
        size: 1,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
    });
    let material = new THREE.MeshPhongMaterial({color: 0xcccccc});
    let header = new THREE.Mesh(geometry, material);
    scene.add(header);
    renderer.render(scene, camera);

    document.body.appendChild(renderer.domElement);

});

javascript

1 个回答

  1. Best Answer

    场景在使用时缺少一个或多个光源THREE.MeshPhongMaterial()- 它的可见性取决于它的照明强度。由于没有光源，使用这种材质的物体是黑色的。

    let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xEEEEEE);

document.body.appendChild(renderer.domElement);

camera.position.x = -50;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(scene.position);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

let loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', (font) => {
  let geometry = new THREE.TextGeometry('enemy', {
    font: font,
    size: 14,
    height: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 4,
    bevelSize: 4,
    bevelSegments: 2
  });
  let material = new THREE.MeshPhongMaterial({
    color: 0xcccccc
  });
  let header = new THREE.Mesh(geometry, material);
  scene.add(header);
  renderer.render(scene, camera);
});
    body {
  overflow: hidden;
  margin: 0;
}
    <script src="https://threejs.org/build/three.min.js"></script>

    PS 同时，我把文本几何参数带到了更健全的参数。否则，不清楚一般有什么样的对象:)

    • 2

相关问题