Question

我试图使用three.js在face3上映射纹理，但我只得到一个黑色三角形。下面是我使用的代码（three.js r71）。

似乎没有加载纹理图像或者正确定义了faceVertexUvs。对于什么是错误的任何想法？

<script type="text/javascript">
  var vertices, faces, scene, group, camera, renderer;

  vertices = [[0.0,0.0,0.0],
              [1.0,0.0,0.0],
              [1.0,1.0,0.0]];
  faces = [[3,0,1,2]];

  init();
  animate();

  function init() {
    scene = new THREE.Scene();
    var w = window.innerWidth, h = window.innerHeight;

    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(w, h);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(90, w/h, 0.1, 100);
    camera.position.set(0,0,2);
    scene.add(camera);

    window.addEventListener('resize', function() {
      var w = window.innerWidth, h = window.innerHeight;
      renderer.setSize(w, h);
      camera.aspect = w/h;
      camera.updateProjectionMatrix();
    });

    renderer.setClearColor(0x333F47, 1);

    var light = new THREE.PointLight(0xffffff);
    light.position.set(-100,200,100);
    scene.add(light);

    var material = new THREE.MeshLambertMaterial({
      map: THREE.ImageUtils.loadTexture('image.png')
    });

    group = new THREE.Object3D();

    var geometry = new THREE.Geometry();
    for (i=0;i<vertices.length;i++) {
      geometry.vertices.push(new THREE.Vector3(vertices[i][0],vertices[i][1],vertices[i][2]));
    }

    var face = new THREE.Face3(faces[0][1],faces[0][2],faces[0][3]);
    geometry.faces.push(face);
    geometry.faceVertexUvs[0].push([new THREE.Vector2(0.0,0.0),
                                    new THREE.Vector2(0.0,1.0),
                                    new THREE.Vector2(1.0,1.0)]);
    var mesh = new THREE.Mesh(geometry, material);
    group.add(mesh);

    group.position.set(-0.5,0.,0.);
    scene.add(group);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
  }

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
  }
</script>

Answer 1

您的模型似乎没有计算法线。尝试在几何对象上调用它：

geometry.computeFaceNormals ();

三角形上的three.js纹理不起作用

1 个答案: