javascript - 将线框更改为false后，不可见面

我试图画一栋房子，为此我创造了面孔。在制作时，我已将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">[email protected]</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的情况下，不会绘制八分之三的面。

请将line.rotation.y从0减小为-0.6;，以注意未绘制的面。

最佳答案

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

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

如果您不想重新排列顶点以使缠绕顺序一致，那么一种简单的解决方案是在材质中将面设置为THREE.DoubleSide

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

这会画脸的两面，但效率较低（必须画两倍的脸）

关于javascript - 将线框更改为false后，不可见面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29870060/