Question

我刚看到How To Create 3D Graphics Using Canvas (Windows)上的画布链接。

如何使用相同的方法绘制一个简单的点，例如(x,y,z)=(3,2,5)？任何想法如何做到这一点？

Answer 1

它带您完成的示例专门用于绘制和查看z=f(x,y)

形式的3D函数

首先简要说明代码中发生的事情，然后考虑绘制各个点。

如果您转到示例页canvas3dRotation.html并查看源代码，您会发现以下内容：

Surface.prototype.equation = function(x, y)
      /*
        Given the point (x, y), returns the associated z-coordinate based on the provided surface equation, of the form z = f(x, y).
      */
      {
        var d = Math.sqrt(x*x + y*y); // The distance d of the xy-point from the z-axis.

        return 4*(Math.sin(d) / d); // Return the z-coordinate for the point (x, y, z). 
      }

这设定了给定的等式。

以下代码存储绘制等式所需的所有点。它们存储在surface.points数组中。

Surface.prototype.generate = function()
      /*
        Creates a list of (x, y, z) points (in 3 x 1 vector format) representing the surface.
      */
      {
        var i = 0;

        for (var x = constants.xMin; x <= constants.xMax; x += constants.xDelta)
        {
          for (var y = constants.yMin; y <= constants.yMax; y += constants.yDelta)
          {
            this.points[i] = point(x, y, this.equation(x, y)); // Store a surface point (in vector format) into the list of surface points.              
            ++i;
          }
        }
      }

使用这种方法显然比写出你想要单独绘制的所有点要快得多，而且没有3D示例只基于一个点。

但是假设您想要绘制单个点，那么您将删除357 surface.generate（）处的行，并将其替换为代码以绘制所有单个点。这意味着新代码

首先在代码中添加一个新方法

Surface.prototype.plot = function(x, y, z)
      /*
        add the point (x, y, z)  (in 3 x 1 vector format) to the surface.
      */
      {
            this.points.push(point(x, y, z)); // Store a surface point
      }

然后使用surface.generate()而不是surface.plot(3,2,5)。

当然他们的例子有8100点，所以更多的是绘制或找到一种方法来生成你想要绘制的所有点。

希望这有助于你开始。

画布3d绘制一个点

1 个答案: