Question

我想画一个房子，为此我创造了面孔。在我制作时，我MeshBasicMaterial的{{1}}设置为wireframe，但是当我想为其添加纹理时，我遇到了错误。为了解决问题，我将true更改为wireframe，以查看错误。我的三张脸没有画出来。将false设置为wireframe： enter image description here

当它是false时： enter image description here

我尝试将线框设置为true绘制缺失的面，我看到它们被绘制了。但是当我将参数更改为false时，它不会绘制面。

我的代码如下：

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>从line.rotation.y缩减为0以注意未绘制的面孔。

Answer 1

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

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

这会画出脸部的两侧，但效果较差（必须画出两倍的脸部）

将线框更改为false

1 个答案: