Как нарисовать 3D-сферу?

Ответ 1

Вам понадобится смоделировать сферу и иметь разные цвета, чтобы при повороте вы могли видеть, что это не только сфера, но и визуализация.

В противном случае сфера в пространстве, а не точка отсчета вокруг нее, выглядит как круг, если это сплошной цвет.

Для начала вам нужно попробовать рисовать круг с прямоугольниками, так как это основной примитив, который у вас есть.

Как только вы поймете, как это сделать, или создайте новый примитив, такой как треугольник, используя метод Path и создайте круг, тогда вы готовы переместить его в 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++;
     }
   }
 }
}

Ответ 2

Обновление: Этот код довольно старый и ограниченный. Сейчас есть библиотеки для создания трехмерных сфер: http://techslides.com/d3-globe-with-canvas-webgl-and-three-js/

Более десяти лет назад я написал Java-апплет для рендеринга текстурированной сферы, фактически выполнив математику, чтобы выяснить, где поверхность сферы была в сцене (без использования треangularьников).

Я переписал его на JavaScript для canvas, и у меня есть демонстрация, отображающая Землю в виде сферы:

_{(источник: haslers.info)}

Я получаю около 22 кадров в секунду на моей машине. Это примерно так же быстро, как и версия Java, на которой она была основана, если не чуть быстрее!

Прошло много времени с тех пор, как я написал код Java - и он был довольно тупым - поэтому я не помню точно, как он работает, я просто портировал его на JavaScript. Однако это из медленной версии кода, и я не уверен, была ли более быстрая версия из-за оптимизаций в методах Java, которые я использовал для манипулирования пикселями, или из-за ускорений в математике, это помогает определить, какой пиксель визуализировать из текстура. В то время я также переписывался с кем-то, у кого был похожий апплет, который был намного быстрее моего, но опять же я не знаю, было бы возможно какое-либо улучшение скорости, которое они имели, в JavaScript, так как он мог полагаться на библиотеки Java. (Я никогда не видел их код, поэтому я не знаю, как они это сделали.)

Так что может быть возможно улучшить скорость. Но это хорошо работает как подтверждение концепции.

Я попробую конвертировать мою более быструю версию, чтобы посмотреть, смогу ли я получить какие-либо улучшения скорости в версии JavaScript.

Ответ 3

u может попробовать с помощью библиотеки three.js, которая абстрагирует много кода от основного программирования webgl. Включите библиотеку three.js в свой html из three.js lib.

u может использовать средство рендеринга холста для браузера сафари, webgl работает для хрома

найдите JS FIDDLE FOR 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();

Ответ 4

Ну, образ сферы всегда будет иметь круглую форму на вашем экране, поэтому единственное, что имеет значение, это затенение. Это будет определяться тем, где вы размещаете источник света.

Что касается алгоритмов, трассировка лучей является самым простым, но и самым медленным на сегодняшний день -— поэтому вы, вероятно, не захотите использовать его, чтобы сделать что-либо очень сложное в <CANVAS> (особенно учитывая отсутствие графического ускорения, доступного в этой среде), но он может быть достаточно быстрым, если вы просто хотите сделать одну сферу.