将线框更改为 false 后脸部不可见

Question

我正在尝试画一座房子，并为其创建了面孔。我在制作它时将 MeshBasicMaterial 的 wireframe 设置为 true，但是当我想为其添加纹理时，出现错误。为了排除故障，我将 wireframe 更改为 false，以查看问题所在。我的三张脸都没有画出来。 wireframe 设置为 false：

当它是 true 时：

我尝试在线框设置为 true 的情况下绘制缺失的面孔，但我看到它们被绘制出来了。但是当我把参数改成false的时候，人脸就不画了。

我的代码如下：

<!DOCTYPE html>

<head>
  <title>Textures</title>
  <meta charset="utf-8" />
</head>

<body style="font-family:georgia;">

  <script src="http://www.erobo.net/scripts/javascript/33/scripts/three.min.js"></script>

  <div style="width: 580px; height:580px; margin: 0 auto; font-family:georgia;">
    <h2><i>Textures</i></h2>
    <b>My Name</b> [
    <text style="font-family:lucida console; font-size:14px">My_Name@email.com</text>]
    <br>
    <hr>
    <form id="myForm">

      <input type="button" onclick="clearScreen()" value="Clear" style="width: 50px; height: 25px; background-color:lightgrey">
    </form>
    <br>

    <div id="divContainer" style="float:left; width:600px; height:400px; border:2px solid blue;">
      <script>
        var container = document.getElementById("divContainer");
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(container.offsetWidth, container.offsetHeight);
  container.appendChild(renderer.domElement);
  var aspectRatio = container.offsetWidth / container.offsetHeight;
  var scene = new THREE.Scene();

  var camera = new THREE.OrthographicCamera(-aspectRatio * 100 / 3, aspectRatio * 100 / 2, 100 / 2, -100 / 3, -1000, 1000);
  camera.position.set(20, 10, 20);
  camera.lookAt(scene.position);

  var geometry = new THREE.Geometry();
  var axesGeometry = new THREE.Geometry();
  var material = new THREE.MeshBasicMaterial({
    //map: texture, 
    //overdraw: 0.5,
    color: 0xFF0000,
    wireframe: true
  });

  var axesMaterial = new THREE.LineBasicMaterial({
    color: 0x00FF00
  });

  axesGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
  axesGeometry.vertices.push(new THREE.Vector3(0, 0, 160));
  axesGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
  axesGeometry.vertices.push(new THREE.Vector3(0, 160, 0));
  axesGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
  axesGeometry.vertices.push(new THREE.Vector3(160, 0, 0));

  geometry.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 30), new THREE.Vector3(0, 30, 30), new THREE.Vector3(0, 30, 0));
  geometry.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(70, 0, 0), new THREE.Vector3(70, 30, 0), new THREE.Vector3(0, 30, 0));
  geometry.vertices.push(new THREE.Vector3(70, 0, 0), new THREE.Vector3(70, 0, 30), new THREE.Vector3(70, 30, 30), new THREE.Vector3(70, 30, 0));
  geometry.vertices.push(new THREE.Vector3(70, 30, 30), new THREE.Vector3(0, 30, 30), new THREE.Vector3(0, 0, 30), new THREE.Vector3(70, 0, 30));
  geometry.vertices.push(new THREE.Vector3(0, 30, 30), new THREE.Vector3(0, 40, 15), new THREE.Vector3(0, 30, 0));
  geometry.vertices.push(new THREE.Vector3(0, 30, 0), new THREE.Vector3(70, 30, 0), new THREE.Vector3(70, 40, 15), new THREE.Vector3(0, 40, 15));
  geometry.vertices.push(new THREE.Vector3(0, 30, 30), new THREE.Vector3(70, 30, 30), new THREE.Vector3(70, 40, 15), new THREE.Vector3(0, 40, 15));
  geometry.vertices.push(new THREE.Vector3(70, 30, 30), new THREE.Vector3(70, 40, 15), new THREE.Vector3(70, 30, 0));

  geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
  geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
  geometry.faces.push(new THREE.Face4(8, 9, 10, 11));
  geometry.faces.push(new THREE.Face4(12, 13, 14, 15));
  geometry.faces.push(new THREE.Face3(16, 17, 18));
  geometry.faces.push(new THREE.Face4(19, 20, 21, 22));
  geometry.faces.push(new THREE.Face4(23, 24, 25, 26));
  geometry.faces.push(new THREE.Face3(27, 28, 29));

  geometry.computeFaceNormals();
  geometry.computeCentroids();
  var axes = new THREE.Line(axesGeometry, axesMaterial);
  var line = new THREE.Mesh(geometry, material);

  //rotation
  line.rotation.x = 0;
  line.rotation.y = 0;
  line.rotation.z = 0;
  axes.rotation.x = 0;
  axes.rotation.y = 0;
  axes.rotation.z = 0;

  scene.add(line);
  scene.add(axes);

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

  renderer.render(scene, camera);
      </script>
    </div>
</body>
<br>
<i>Instructions go here.</i>

</div>
</body>

</html>

我通过一张一张地绘制面孔检查了我的代码好几次，但是八张脸中的三张没有在线框设置为 false 的情况下绘制。

Please decrease the line.rotation.y from 0 to -0.6; to notice the faces that are not drawn.

Answer 1

这是因为默认情况下它只会绘制 "front" 的脸。正面由面的顶点顺序定义，默认情况下，如果从正面看面，顶点将逆时针旋转：

https://www.opengl.org/wiki/Face_Culling

如果您不想重新排序顶点以使缠绕顺序保持一致，那么一个简单的解决方案是，在您的 material 中，将边设置为 THREE.DoubleSide

var material = new THREE.MeshBasicMaterial({
    //map: texture, 
    //overdraw: 0.5,
    color: 0xFF0000,
    wireframe: true,
    side: THREE.DoubleSide
});

这将绘制脸部的两侧，但效率较低（必须绘制两倍的脸）

将线框更改为 false 后脸部不可见

Face not visible after changing wireframe to false

javascript

three.js