html - 如何绘制 3D 球体？

Question

我想在 HTML 5.0 Canvas 中绘制 3D 球或球体。我想了解有关如何绘制 3D 球体的算法。谁可以与我分享这个？

Answer 1

您将需要为一个球体建模，并让它具有不同的颜色，以便在它旋转时您可以看到它不仅是一个球体，而且正在被渲染。

否则，空间中的球体，如果它周围没有引用点，则看起来像一个圆，如果它都是一种纯色。

首先，您需要尝试用矩形绘制一个圆，因为这是您拥有的主要图元。

一旦您了解了如何执行此操作，或使用 Path 方法创建一个新的图元(例如三角形)并创建一个圆，那么您就可以将其移动到 3D 了。

3D 只是一个技巧，因为您将采用可能由方程式生成的模型，然后将其展平，因为您确定要看到哪些部分，然后显示它。

但是，您需要根据三角形与光源的距离以及该部分与光源的角度来更改三角形的颜色。

这是您可以开始进行优化的地方，因为如果您逐个像素地进行优化，那么您就是在进行光线跟踪。如果你有更大的 block 和一个点光源，并且物体在旋转但没有四处移动，那么你可以重新计算每个三角形的颜色如何变化，那么这只是改变颜色来模拟旋转的问题。

该算法将取决于您想要进行哪些简化，因此当您获得经验后回来提问，展示您到目前为止所做的事情。

这是一个例子，下面我复制了 3D 球体部分，但请看整个 article .

function Sphere3D(radius) {
 this.point = new Array();
 this.color = "rgb(100,0,255)"
 this.radius = (typeof(radius) == "undefined") ? 20.0 : radius;
 this.radius = (typeof(radius) != "number") ? 20.0 : radius;
 this.numberOfVertexes = 0;

 // Loop from 0 to 360 degrees with a pitch of 10 degrees ... 
  for(alpha = 0; alpha <= 6.28; alpha += 0.17) {
   p = this.point[this.numberOfVertexes] = new Point3D();

   p.x = Math.cos(alpha) * this.radius;
   p.y = 0;
   p.z = Math.sin(alpha) * this.radius;

   this.numberOfVertexes++;
 }

 // Loop from 0 to 90 degrees with a pitch of 10 degrees ... 
 // (direction = 1)

 // Loop from 0 to 90 degrees with a pitch of 10 degrees ...
 // (direction = -1)

 for(var direction = 1; direction >= -1; direction -= 2) {
   for(var beta = 0.17; beta < 1.445; beta += 0.17) {

     var radius = Math.cos(beta) * this.radius;
     var fixedY = Math.sin(beta) * this.radius * direction;

     for(var alpha = 0; alpha < 6.28; alpha += 0.17) {
       p = this.point[this.numberOfVertexes] = new Point3D();

       p.x = Math.cos(alpha) * radius;
       p.y = fixedY;
       p.z = Math.sin(alpha) * radius;

       this.numberOfVertexes++;
     }
   }
 }
}