Threejs使用頂點的自定義3D幾何

Question

我正在嘗試使用頂點來製作自定義幾何的四分之一，只有長表面區域不是側面。我試着製作一個四邊形列表，但這個代碼不起作用。 http://jsfiddle.net/R7pQB/32/

for(i = 90; i > 0; i -= 2){ 
    geometry.vertices.push(new THREE.Vector3(0, quad1_y[i], quad1_z[i])); 
    geometry.vertices.push(new THREE.Vector3(L, quad1_y[i], quad1_z[i])); 
    geometry.vertices.push(new THREE.Vector3(L, quad1_y[i - 1], quad1_z[i - 1])); 
    geometry.vertices.push(new THREE.Vector3(0, quad1_y[i - 1],quad1_z[i - 1])); 
    geometry.faces.push(new THREE.Face4(0,1,2,3)); 
} 

Answer 1

所有幾何體的面具有相同的頂點索引？

geometry.faces.push(new THREE.Face4(0,1,2,3)); 

Answer 2

正如@newvalue所指出的那樣，您並不是遞增臉部指數。 您正在將頂點推向網格。接下來你需要將他們連接到一張臉上。 我發現使用第二個計數器會更容易，第二個計數器會爲Face4實例增加4。此外，而不是兩個迴路，可以電腦，並在同一循環添加頂點/面孔：

function initGeometry(R , L) { 
    var geometry = new THREE.Geometry(); 

    var deg; 
    var f = 0; 
    for(deg = 0; deg < 90; deg++,f += 4){ 
     var ca = deg * 0.01745329252;//cache current angle 
     var na = (deg+1) * 0.01745329252;//cache next angle (could do with a conditional and storing previous angle) 
     var ccos = Math.cos(ca);//current cos 
     var csin = Math.sin(ca);//current sin 
     var ncos = Math.cos(na);//next cos 
     var nsin = Math.sin(na);//next sin 

     var tl = new THREE.Vector3(R * ccos, L * .5, R * csin);//top left = current angle, positive y 
     var bl = new THREE.Vector3(R * ccos,-L * .5, R * csin);//bottom left = current angle, negative y 
     var tr = new THREE.Vector3(R * ncos, L * .5, R * nsin);//top right = next angle, positive y 
     var br = new THREE.Vector3(R * ncos,-L * .5, R * nsin);//bottom right = next angle, negative y 

     /* 
     tl--tr 
     | /| 
     |/| 
     |/ | 
     bl--br 
     */ 
     geometry.vertices.push(tl,tr,br,bl);//notice vertices are added in (cw) order 
     geometry.faces.push(new THREE.Face4(f,f+1,f+2,f+3));//add the correct face indices, easy with a second counter 

    } 

一些代碼的擴展，以便更容易理解頂點之間的連接，其在三維空間中的位置，以及它們在添加面時引用它們的頂點數組中的位置。

根據您的小提琴，這裏的完整清單：

var renderer; 
var camera; 
var scene; 
var object; 

initConfig(); 
initGeometry(50, 300); 
startRender(); 

function initConfig() { 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setClearColor(0x000000, 1); 
    renderer.setSize(window.innerWidth,window.innerHeight); 
    document.body.appendChild(renderer.domElement); 
    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 100); 
    camera.position.set(0, 0, 100); 
    camera.lookAt(scene.position); 
    scene.add(camera); 
} 

function initGeometry(R , L) { 
    var geometry = new THREE.Geometry(); 

    var deg; 
    var f = 0; 
    for(deg = 0; deg < 90; deg++,f += 4){ 
     var ca = deg * 0.01745329252;//cache current angle 
     var na = (deg+1) * 0.01745329252;//cache next angle (could do with a conditional and storing previous angle) 
     var ccos = Math.cos(ca);//current cos 
     var csin = Math.sin(ca);//current sin 
     var ncos = Math.cos(na);//next cos 
     var nsin = Math.sin(na);//next sin 

     var tl = new THREE.Vector3(R * ccos, L * .5, R * csin);//top left = current angle, positive y 
     var bl = new THREE.Vector3(R * ccos,-L * .5, R * csin);//bottom left = current angle, negative y 
     var tr = new THREE.Vector3(R * ncos, L * .5, R * nsin);//top right = next angle, positive y 
     var br = new THREE.Vector3(R * ncos,-L * .5, R * nsin);//bottom right = next angle, negative y 

     /* 
     tl--tr 
     | /| 
     |/| 
     |/ | 
     bl--br 
     */ 
     geometry.vertices.push(tl,tr,br,bl);//notice vertices are added in (cw) order 
     geometry.faces.push(new THREE.Face4(f,f+1,f+2,f+3));//add the correct face indices, easy with a second counter 

    } 

    object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color:0x660033,   side:THREE.DoubleSide})); 
    object.position.set(0,0,0); 
    object.rotation.x = Math.PI * .35;//a bit of rotation to make the structure visible 
    object.scale.set(.35,.35,.35);//again, to make things easier to see 
    scene.add(object); 
} 

function startRender(){ 
    renderer.render(scene, camera); 
} 

而且你的網是相當密集的（90面半圓柱體）。 您可能想嘗試使用較少的線段繪製網格，這將使您有機會使用頂點/面的索引進行練習。