如何绘制3D球体？ [英] How to draw a 3D sphere?

问题描述

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

解决方案

您需要模拟一个球体，让它具有不同的颜色，旋转，你可以看到它不仅是一个球体，而是被渲染。

否则，空间中的球体，如果它只是一个纯色，则它周围没有参考点看起来像一个圆圈。

首先，你想尝试画一个带有矩形的圆圈，因为那是你的主要原语。

一旦你理解了如何这样做，或使用Path方法创建一个新的基元，如三角形，并创建一个圆，然后您就可以将其移动到3D。

3D只是一个技巧，因为你将采用你的模型，可能由一个等式产生，然后展平它，当你确定将看到哪些部分，然后显示它。

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

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

算法将取决于您想要进行的简化，因此当您获得经验时，请回答并询问，显示您到目前为止所做的工作。

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

 函数Sphere3D（半径）{
 this.point = new Array（）; 
 this.color =rgb（100,0,255）
 this.radius =（typeof（radius）==undefined）？ 20.0：半径; 
 this.radius =（typeof（radius）！=number）？ 20.0：半径; 
 this.numberOfVertexes = 0; 
 
 //从0度到360度循环，间距为10度... 
（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 ++; 
} 
 
 //从0到90度循环，间距为10度... 
 //（方向= 1）
 
 / /循环从0到90度，间距为10度... 
 //（方向= -1）
 
 for（var direction = 1; direction> = -1;方向 -  = 2）{
（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; （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 ++; 
} 
} 
} 
} 
  

I want to draw a 3D ball or sphere in HTML 5.0 canvas. I want to understand the Algorithm about how to draw a 3D sphere. Who can share this with me?

解决方案

You will need to model a sphere, and have it be varying colors so that as it rotates you can see that it is not only a sphere, but being rendered.

Otherwise, a sphere in space, with not point of reference around it looks like a circle, if it is all one solid color.

To start with you will want to try drawing a circle with rectangles, as that is the main primitive you have.

Once you understand how to do that, or create a new primitive, such as a triangle, using the Path method, and create a circle, then you are ready to move it to 3D.

3D is just a trick, as you will take your model, probably generated by an equation, and then flatten it, as you determine which parts will be seen, and then display it.

But, you will want to change the color of the triangles based on how far they are from a source of light, as well as based on the angle of that part to the light source.

This is where you can start to do optimizations, as, if you do this pixel by pixel then you are raytracing. If you have larger blocks, and a point source of light, and the object is rotating but not moving around then you can recalculate how the color changes for each triangle, then it is just a matter of changing colors to simulate rotating.

The algorithm will depend on what simplifications you want to make, so as you gain experience come back and ask, showing what you have done so far.

Here is an example of doing it, and below I copied the 3D sphere part, but please look at the entire 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++;
     }
   }
 }
}

这篇关于如何绘制3D球体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！