我正在尝试使用顶点制作自定义几何体的四分之一,只有圆柱面的长表面区域。我尝试制作一个四边形列表,但这段代码不起作用。 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) );
}
答案 0 :(得分:0)
几何体的所有面都有相同的顶点索引?
geometry.faces.push( new THREE.Face4(0,1,2,3) );
答案 1 :(得分:0)
正如@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
}
扩展了一些代码,因此更容易理解顶点之间的连接,它们在3D空间中的位置,以及它们在添加面时引用它们时顶点数组中的位置。
根据你的小提琴,这里是完整列表:
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个面)。 您可能想尝试使用较少的段来绘制网格,这将使您有机会练习顶点/面索引。