Ich habe nach Lösungen gesucht, um mein Problem zu lösen, aber ich konnte keine finden. Also habe ich beschlossen, meine Frage hier zu stellen.ThreeJS falsche räumliche Anordnung der Vertices
Was ich
zu tun versuche ich zur Zeit versucht, eine "asphärische Oberfläche" durch die folgende mathematische Gleichung darstellen kann: z (x, y) = s/R/(1 + sqrt (1- (1 + k) * s/R)) + P (s) mit s = x² + y². k und R sind gegeben und P ist ein Polynom. Um dies zu tun, entschied ich mich, eine leere Geometrie zu verwenden und Scheitelpunkte mit den Koordinaten x, y und z, die der vorherigen Gleichung entsprechen, zu verschieben. Ich verwende nicht die parametrische Geometrie, die ThreeJS bietet, weil x und y einer kreisförmigen Kontur folgen müssen.
Mein Problem
Die Frage, die ich gegenüber habe ist, dass wenn ich versuche, Ecken zu schieben mit Koordinaten, die die mathematische Gleichung die räumliche Anordnung von Thesen Eckpunkten ist falsch und die Oberfläche hat eine sehr große Löcher passen. Here you can see the result.
Mein Code
Dies ist, was ich dieses Ergebnis zu erhalten codiert:
/* 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);
Was in meinem Code falsch? Was vermisse ich ?
Danke