Question

我在哪里做错了？我检查了颜色，不是黑底黑字。我将字体json文件复制到目录中，是否可能没有加载该文件？

 var light = new THREE.AmbientLight(0xffffff, 0.5);
 var light1 = new THREE.PointLight(0xffffff,0.5);
 scene.add(light);
 scene.add(light1);
 var geometry;
 var loader = new THREE.FontLoader();

 loader.load('js/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 });
 var mesh = new THREE.Mesh(geometry, material);
 mesh.position.set = (0, 0, -1000);

 scene.add(mesh);

 requestAnimationFrame(render);
 function render() {
        mesh.rotation.x += 0.05;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
 }

Answer 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);

  });



}

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>

Three.js中的TextGeometry无法呈现/工作

1 个答案: