如何绘制3D球体？(How to draw a 3D sphere?)

我想提请在HTML 5.0帆布三维球或球体。我想了解关于如何绘制3D球体的算法。谁可以与我分享呢？

Answer 1:

您将需要一个球体模型，并把它进行不同的颜色，以便在其旋转时，你可以看到，它不仅是一个球体，但正在呈现。

否则，在空间领域，与它周围的参考点不是看起来像一个圆，如果它是所有纯色。

首先，你会想尝试绘制矩形与一个圆，因为这是你的主要原始。

一旦你明白该怎么做，或创建一个新的原始的，如三角形，使用路径方法，并创建一个圆，那么你就准备将其移动到3D。

3D只是一招，你会拿你的模型，可能是由一个公式产生的，然后压平，为您确定哪些部分将看到的，然后显示它。

但是，你会根据他们从一个光源多远，以及基于该部分光源的角度要改变三角形的颜色。

在这里，您可以开始做优化，因为，如果按像素做像素，那么你进行光线追踪。如果你有更大的块，和光的点光源和对象可旋转，但不走动，那么你可以重新计算如何为每个三角形颜色的变化，那么它只是一个改变颜色来模拟旋转的问题。

该算法将取决于你想，这样你获得的经验回来问，显示你迄今所做的什么什么的简化。

下面是做这件事的一个例子，以下我复制了3D球体的一部分，但请看看整个文章。

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++;
     }
   }
 }
}

Answer 2:

更新：此代码是很旧的和有限的。有库现在在做3D领域： http://techslides.com/d3-globe-with-canvas-webgl-and-three-js/

十多年前我写了一个Java程序通过实际做数学渲染纹理的球体在哪里工作球体的表面是在场景（不使用三角形）。

我已经重写它在JavaScript的画布，我有一个演示渲染地球作为一个球体 ：

_{（来源： haslers.info ）}

我得到我的机器上大约22 FPS。这大约是一样快的Java版本它是基于呈现在，如果没有快一点！

现在，因为我写的Java代码很长一段时间 - 这是很钝 - 所以我真的不记得它是如何工作的，我只是把它移植的JavaScript。然而，这是从代码的慢版，我不知道，如果更快的版本是由于Java方法我用来操纵像素的优化或从数学确实制定出从渲染其像素的加速质地。我也相应的在与别人的时候谁也有类似的小程序，它比我快多了，但再次我不知道是否有任何的速度提高他们在JavaScript中是可能的，因为它可能会对Java库依赖。（我从来没有见过他们的代码，所以我不知道他们是如何做到的。）

因此，有可能改善的速度。但这个工程以及概念验证。

如果您想比较的速度，在Java版本在这里：

这些都是死链接，直到我下一次更新我的网站

矿-瞬间启动，慢渲染
矿-非常缓慢的开始，更加快速的渲染 -这个版本也有照明。在其上旋转的轴拖动鼠标。
别人的 -更快的启动，更快的渲染。

我会在我的转换速度更快的版本一段时间，看看我是否能得到任何速度提升到JavaScript版本一展身手。

Answer 3:

ü可以用three.js所库，它从抽象的WebGL核心编程大量的代码试试。包括在你的HTML three.js所图书馆three.js所LIB 。

ü可以使用画布渲染器Safari浏览器，WebGL的工程铬

请找JS捣鼓SPHERE

VAR相机，场景，材料，网格，几何，渲染器

function drawSphere() {
    init();
    animate();

}

function init() {
    // camera 

    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / innerHeight, 1, 1000);
    camera.position.z = 300;
    scene.add(camera);

    // sphere object
    var radius = 50,
        segments = 10,
        rings = 10;
    geometry = new THREE.SphereGeometry(radius, segments, rings);
    material = new THREE.MeshNormalMaterial({
        color: 0x002288
    });
    mesh = new THREE.Mesh(geometry, material);

    //scene 
    ;
    scene.add(mesh);


    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

}


function animate() {
    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render(scene, camera);


}

// fn callin
drawSphere();