三个顶点错误的空间排列

时间:2016-03-24 20:28:38

标签: javascript three.js vertices

我已经找到解决方案来解决我的问题,但我找不到任何问题。所以我决定在这里问我的问题。

我想做什么

我目前正试图表示由以下数学方程式描述的“非球面”:z(x,y)= s / R /(1 + sqrt(1-(1 + k)* s / R)) + P(s),s =x²+y²。给出k和R,P是多项式。为此,我决定使用一个空的几何体并按下与前一个方程匹配的坐标x,y和z的顶点。我不使用ThreeJS提供的参数化几何体,因为x和y需要遵循圆形轮廓。

我的问题

我面临的问题是,当我尝试用符合数学方程的坐标推顶点时,这些顶点的空间排列是错误的,并且表面有非常大的孔。 Here you can see the result.

我的代码

这是我为了得到这个结果所编码的:

/* Function creating the geometry */
/* model */
function asphericPersoCircu(R, k, coefficients, diametre){
var zFuncText = "s/R/(1+sqrt(1-(1+k)*s/(R*R)))";
var zFunc = Parser.parse(zFuncText).toJSFunction(['k', 'R', 's']);
var yFuncText = "y";
var yFunc = Parser.parse(yFuncText).toJSFunction(['y']);
var xFuncText = "x";
var xFunc = Parser.parse(xFuncText).toJSFunction(['x']);
var sFuncText = "x*x+y*y";
var s_sFunc = Parser.parse(sFuncText).toJSFunction(['x', 'y']);
var polyFuncText = "m*s + n*s*s + p*s*s*s + q*s*s*s*s";
var polyFunc = Parser.parse(polyFuncText).toJSFunction(['s', 'm', 'n', 'p', 'q']);

/* values */
var a2 = coefficients[0];
var a4 = coefficients[1];
var a6 = coefficients[2];
var a8 = coefficients[3];

var y = -Math.sqrt(Math.abs(diametre));


/* for the geometry, vertices and faces */
var three_pushed_ver = 0;
var geo = new THREE.Geometry();
var indice_x = 0,
  indice_y = 1,
  indice_z = 2;
/* main loop to calculate the coordinates of each vertex */
while (y < Math.sqrt(Math.abs(diametre))) {
  var max = Math.sqrt(diametre - y * y);
  var x = max;
  while (x > -max) {
    var s_s = s_sFunc(x, y);
    var pol = polyFunc(s_s, a2, a4, a6, a8);
    var z = zFunc(k, R, s_s) + pol;
    if (s_s <= R * R) {
      geo.vertices.push(new THREE.Vector3(x, y, z));
      three_pushed_ver++;
      if (three_pushed_ver === 3) {
        three_pushed_ver = 0;
        geo.faces.push(new THREE.Face3(indice_x, indice_y, indice_z));
        indice_x += 3;
        indice_y += 3;
        indice_z += 3;
      }
    }
    x -= 0.1;
  }
  y += 0.1;
}
return geo;
};
/* End of the function*/

/* In the HTML page */
var coefficients = [0.00521,-0.001981,0.0004783, -0.0007328];
var rayon  = 3.201;
var k = -4.1;

var geo = asphericPersoCircu(rayon, k, coefficients, 2.23);
for(var i = 0; i < geo.faces.length; i++)
{
  var face = geo.faces[i];
  face.color.setHex(0x000ff0);
}

var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({vertexColors : THREE.FaceColors, side : THREE.DoubleSide}))
mesh.position.z = 2;
scene.add(mesh);

我的代码有什么问题?我错过了什么?

谢谢

1 个答案:

答案 0 :(得分:0)

我设法解决了我的问题。 我为每一行设置了一个恒定数量的顶点(对于y的每个值)。然后,我在表面的两条连续线之间绘制了面。这样做更容易代表表面。