我正在尝试画一座房子，我为它创建了面孔。我在制作时将 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.yfrom0to-0.6;to notice the faces that are not drawn.
最佳答案
这是因为默认情况下它只会绘制脸部的“正面”。前面是由面的顶点顺序定义的，默认情况下，如果从前面查看面，顶点将逆时针方向移动:
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
});
这将绘制脸部的两侧，但效率较低(必须绘制两倍的脸部)
关于javascript - 将线框更改为 false 后，脸部不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29870060/