1

キャンバスを使用して3Dグラフィックスを作成する方法（Windows）でキャンバスのリンクを見たところです。

同じものを使用して、次のような単純な点をプロットするにはどうすればよい(x,y,z)=(3,2,5)ですか？これを行う方法はありますか？

4

1 に答える 1

2

紹介する例は、フォームの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;
          }
        }
      }

この方法を使用すると、プロットするすべてのポイントを個別に書き出すよりも明らかに高速であり、1つのポイントだけに基づく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ポイントが含まれていたので、プロットしたり、プロットしたいすべてのポイントを生成する方法を見つけたりするのに十分な数があります。

これがあなたが始めるのに役立ったことを願っています。

于 2013-02-09T16:45:02.667 に答える