threejs三角形Geometry的頂點時針順序會導致三角形看不見

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75,winSize.width/winSize.height,0.1,1000);

var renderer = new THREE.WebGLRenderer();

renderer.setSize(winSize.width,winSize.height);

document.body.appendChild(renderer.domElement);

 

camera.position.x = -30;

camera.position.y = 30;

camera.position.z = 40;

camera.up.set(0,1,0);

camera.lookAt(new THREE.Vector3(0,0,0));

 

var p1 = new THREE.Vector3(0,10,20);
var p2 = new THREE.Vector3(0,30,20);
var p3 = new THREE.Vector3(0,25,40);

var triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(p1,p2,p3);

//3個點投射到camera也就是2d屏幕平面上的時候，在2d平面上這3個點的時針順序，順時針如果看不見，就改成逆時針
triangleGeometry.faces.push(new THREE.Face3(1,0,2));
// triangleGeometry.faces.push(new THREE.Face3(0,1,2));
var triangle = new THREE.Mesh(triangleGeometry,
new THREE.MeshBasicMaterial({ color: 0xff00ff }));
scene.add(triangle);

 

會出現的問題就是，某種情況下，會看不見這個三角形，但是如果把THREE.Geometry對象的vertices數組參數或者faces數組參數里的元素順序改變一下，三角形就出來了；

出現這種情況的原因，國外帖子的解釋是說跟法線的方向有關系，如果順序按照順時針順序，則曲面的法向量將向下指向，並且由於相機從上面看，所以會看不到三角形，如果順序是逆時針的，法向量會指向你的相機，就看到三角形了，總是就是要想辦法讓法向量指向你的攝像機；

解決問題的一個思路，目前個人理解vertices數組里3個點的順序，不是問題的關鍵，關鍵是在這3個點在faces數組里的順序，上面代碼中vertices數組里的元素的順序是,p1,p2,p3, faces數組里的元素1,0,2，代表正確的繪圖時的順序是p2,p1,p3,  所以上面代碼中，也可以改成這樣：

triangleGeometry.vertices.push(p2,p1,p3);
triangleGeometry.faces.push(new THREE.Face3(0,1,2));
var triangle = new THREE.Mesh(triangleGeometry,
new THREE.MeshBasicMaterial({ color: 0xff00ff }));
scene.add(triangle);

 

既然有3個點的存在，不管在3d世界里是什么朝向，什么角度，投射到攝像機也就是2d屏幕上的時候，總是可以看成是一個2d平面上的3個點，

如果發現看不到這3個點組成的三角形，如果此時3個點是的指針方向是順時針，就改成逆時針，反之如果是逆時針，就改成順時針，就可以看到三角形了。

 

正式的3d項目中的模型，如果不帶透明度的話，攝像機拍攝不到的模型背面的面，看不到就看不到了，本來不需要看到，但如果是帶有透明度材質的模型，如果在模型本身角度偏轉或者攝像機大角度圍繞模型旋轉而造成模型一個面上3個點的指針順序發生了順/逆的改變，那是不是就要實時的計算和改變個面的3個頂點的時針順序。目前3d這快個人理解還很淺陋，希望以后有機會打自己臉。

 

參考：https://stackoverflow.com/questions/39398503/draw-a-basic-triangle-with-three-js?rq=1

 

============================================

opengl右手坐標系，所以是頂點順序是逆時針的面才可以被看的見。