如何在ThreeJS中绘制椭圆抛物面

Question

我正在尝试使用参数曲线在threeJS中创建椭圆抛物面。这是我要绘制的内容的链接：

https://mathinsight.org/level_sets。

这是我现在拥有的：

这是当前的函数定义，但是似乎产生了不同的结果。

let planeCreator = function(u,v,w){
    var height = 15;
    var size = 20;
    var u = u * height;
    var v = (v * 2 * Math.PI);
    var x = size * Math.sqrt(u) * Math.cos(v);
    var y = u;
    var z = size * Math.sqrt(u) * Math.sin(v);
    w.set(x,-y,z);
};
let geometry = new THREE.ParametricBufferGeometry( planeCreator, 50, 50 );
geometry.center();
let material = new THREE.MeshPhongMaterial( {
    color: 0xff0000,
    side: THREE.DoubleSide,
    wireframe: true
} );
let object = new THREE.Mesh( geometry, material );
scene.add( object );

以下是当前绘制的内容：

Answer 1

作为一种选择（无参数几何）：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-4, 2, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var planeGeom = new THREE.PlaneBufferGeometry(4, 4, 20, 20);
planeGeom.rotateX(-Math.PI * 0.5);
var v = new THREE.Vector3();
var positions = planeGeom.attributes.position;
for (var i = 0; i < positions.count; i++) {
  v.fromBufferAttribute(positions, i);
  positions.setY(i, (-(v.x * v.x) - (2 * v.z * v.z)) * 0.25);
}
planeGeom.center();
planeGeom.computeVertexNormals();

var ellipticParaboloidSurface = new THREE.Mesh(planeGeom, new THREE.MeshNormalMaterial({
  side: THREE.DoubleSide
}));
scene.add(ellipticParaboloidSurface);

var boxHelper = new THREE.BoxHelper(ellipticParaboloidSurface, "yellow");
scene.add(boxHelper);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
})

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>