canvas - 画布 3d 绘制一个点

Question

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

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

Answer 1

它带您浏览的示例专门用于绘制和查看表单的 3D 函数z=f(x,y)

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

如果您转到示例页面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 个点，因此可以绘制更多点，或者找到一种方法来生成您想要绘制的所有点。

希望这有助于您入门。