如何绘制 3D 球体?

问题描述

我想在 HTML 5.0 画布中绘制一个 3D 球或球体.我想了解有关如何绘制 3D 球体的算法.谁能和我分享一下?

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.

一旦您了解如何做到这一点，或者使用 Path 方法创建一个新的图元(例如三角形)并创建一个圆，您就可以将其移动到 3D.

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 只是一个技巧，因为您将获取您的模型(可能由方程式生成)，然后将其展平，因为您确定将看到哪些部分，然后显示它.

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.

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

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 球体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！