两个变量的函数图（Threejs）

Question

大家好:) 我想用 js 创建自定义图形。我该怎么做？ 我尝试使用 Threejs。我创建坐标轴，但我不知道如何为 ex 创建图形。这个函数：x^2+2*y^2.

class Graphic extends Component {

    constructor() {
        super();
        this.scene = new Three.Scene;
    }

    componentDidMount() {
        this.createScene();
    }

    createScene = () => {
        this.setCamera();
        this.getLight();
        this.coordinateAxes();
        this.reproduce();
    }

    coordinateAxes = () => {
        const lineGeometryFirst = new Three.Geometry();
        const lineGeometrySecond = new Three.Geometry();
        const lineGeometryThird = new Three.Geometry();
        const pointZero = new Three.Vector3(0, 0, 0);
        const pointX = new Three.Vector3(100, 0, 0);
        const pointY = new Three.Vector3(0, 100, 0);
        const pointZ = new Three.Vector3(0, 0, 100);
        const arrowX = {
            left: new Three.Vector3(95, -5, 0),
            right: new Three.Vector3(95, 5, 0),
        };
        const arrowY = {
            left: new Three.Vector3(-5, 95, 0),
            right: new Three.Vector3(5, 95, 0),
        };
        const arrowZ = {
            left: new Three.Vector3(0, -5, 95),
            right: new Three.Vector3(0, 5, 95),
        };

        lineGeometryFirst.vertices.push(pointZero, pointX, arrowX.left, pointX, arrowX.right);
        lineGeometrySecond.vertices.push(pointZero, pointY, arrowY.left, pointY, arrowY.right);
        lineGeometryThird.vertices.push(pointZero, pointZ, arrowZ.left, pointZ, arrowZ.right);

        const axisX = new Three.Line( lineGeometryFirst, new Three.LineBasicMaterial({ color: 0xffffff, linewidth: 500 }));
        const axisY = new Three.Line( lineGeometrySecond, new Three.LineBasicMaterial({ color: 0x00FF00, linewidth: 500 }));
        const axisZ = new Three.Line( lineGeometryThird, new Three.LineBasicMaterial({ color: 0xFFFF00, linewidth: 500 }));


        this.scene.add(axisX);
        this.scene.add(axisY);
        this.scene.add(axisZ);
    }

    reproduce = () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        const renderer = new Three.WebGLRenderer({ canvas: this.canvas });
        const camera = this.setCamera(width, height);

        renderer.setSize(width, height);
        renderer.render(this.scene, camera);
    }

    setCamera = (width, height) => {
        const camera = new Three.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000);

        camera.position.set(120, 50, 300);

        return camera;
    }

    getLight = () => {
        const light = new Three.AmbientLight(0xffffff);

        this.scene.add(light);
    }

    render() {
        return <canvas ref={canvas => this.canvas = canvas} />;
    }
}

谁能让我走上正确的道路？

Answer 1

一个很好的起点是这个例子：
https://stemkoski.github.io/Three.js/Graphulus-Curve.html
基本上，您定义一个函数并以某种精度对其进行采样，然后从中生成几何图形。

另一个很好的例子：
https://threejs.org/docs/#api/geometries/ParametricGeometry

更多使用 ParametricGeometry 的例子可以在这里找到：
https://github.com/josdirksen/threejs-cookbook/blob/master/02-geometries-meshes/02.10-create-parametric-geometries.html

如果你有一个二维函数，你可以简单地将向量的 z 分量设置为 0。

我添加了一个示例，说明如何在 Three.js 中使用参数函数实现椭圆抛物面。参考可以在这里找到：http://mathworld.wolfram.com/EllipticParaboloid.html

       var func = function (u, v) {
            //Play with these 2 values to get the exact result you want
            //The height variable is pretty self-explanatory, the size variable acts like a scale on the x/z axis.
            var height = 300; //Limit the height
            var size = 1; //Limit the x/z size, try the value 10 for example

            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 * 2 * Math.sqrt(u) * Math.sin(v);
            //Note that the y and z axes are swapped because of how they are displayed in Three.js. Alternatively you could just rotate the resulting mesh and get the same result.
            return new THREE.Vector3(x, y, z);
        };
        var geometry = new THREE.ParametricGeometry(func, 25, 25);
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

有关转换为参数形式的更多信息：https://en.wikipedia.org/wiki/Parametric_equation#Circle