html5 - lineas - imagenes de corazon en 3d para dibujar

Cómo dibujar una esfera 3D?

Question

Quiero dibujar una bola o esfera en 3D en el lienzo HTML 5.0. Quiero entender el Algoritmo sobre cómo dibujar una esfera 3D. ¿Quién puede compartir esto conmigo?

Answer 1

Bueno, una imagen de una esfera siempre tendrá una forma circular en la pantalla, por lo que lo único que importa es el sombreado. Esto estará determinado por donde colocas tu fuente de luz.

En cuanto a los algoritmos, el trazado de rayos es el más simple, pero también el más lento, por lo que probablemente no quieras usarlo para hacer algo muy complicado en un <CANVAS> (especialmente dada la falta de aceleración de gráficos disponible en ese entorno) , pero podría ser lo suficientemente rápido si solo quisieras hacer una sola esfera.

Answer 2

Puede probar con la biblioteca three.js, que abstrae una gran cantidad de código de la programación del núcleo web. Incluya la biblioteca three.js en su html desde three.js lib .

Puedes usar el renderizador canvas para safari browser, webgl funciona para Chrome

por favor encuentre la JS FIDDLE FOR SPHERE

var cámara, escena, material, malla, geometría, renderizador

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();

Answer 3

Tendrá que modelar una esfera y hacer que varíe de colores para que, a medida que gira, pueda ver que no es solo una esfera, sino que se representa.

De lo contrario, una esfera en el espacio, sin un punto de referencia a su alrededor, parece un círculo, si es un solo color sólido.

Para empezar, querrás dibujar un círculo con rectángulos, ya que ese es el primitivo principal que tienes.

Una vez que comprenda cómo hacer eso, o cree una nueva primitiva, como un triángulo, utilizando el método Path, y cree un círculo, entonces estará listo para moverlo a 3D.

3D es solo un truco, ya que tomarás tu modelo, probablemente generado por una ecuación, y luego lo aplanarás, a medida que determines qué partes se verán y luego las mostrarás.

Sin embargo, querrás cambiar el color de los triángulos en función de lo lejos que estén de una fuente de luz, así como del ángulo de esa parte con respecto a la fuente de luz.

Aquí es donde puede comenzar a hacer optimizaciones, ya que si hace esto píxel por píxel, entonces está trazando rayos. Si tiene bloques más grandes y una fuente puntual de luz, y el objeto está girando pero no se mueve, entonces puede volver a calcular cómo cambia el color para cada triángulo, entonces es solo cuestión de cambiar los colores para simular la rotación.

El algoritmo dependerá de las simplificaciones que desee realizar, de modo que a medida que gane experiencia regrese y pregunte, mostrando lo que ha hecho hasta ahora.

Aquí hay un ejemplo de cómo hacerlo, y debajo copié la parte esfera 3D, pero por favor mira el artículo completo.

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 4

Actualización: Este código es bastante antiguo y limitado. Hay bibliotecas para hacer esferas en 3D ahora: http://techslides.com/d3-globe-with-canvas-webgl-and-three-js/

Hace más de diez años escribí un applet de Java para representar una esfera texturizada haciendo los cálculos matemáticos para determinar dónde estaba la superficie de la esfera (sin utilizar triángulos).

Lo he reescrito en JavaScript para lienzo y tengo una demo que muestra la tierra como una esfera :

texto alternativo http://sam.haslers.info/render-sphere/JavaScript+Canvas.png

Tengo alrededor de 22 fps en mi máquina. ¡Lo cual es casi tan rápido como la versión de Java se basó en renders en, si no un poco más rápido!

Ahora es un largo tiempo desde que escribí el código de Java, y era bastante obtuso, así que realmente no recuerdo exactamente cómo funciona. Acabo de portarlo como JavaScript. Sin embargo, esto es de una versión lenta del código y no estoy seguro de si la versión más rápida se debió a las optimizaciones en los métodos de Java que utilicé para manipular píxeles o de aceleraciones en las matemáticas que hace para determinar qué píxel para representar desde el textura. También me correspondía en ese momento con alguien que tenía un applet similar que era mucho más rápido que el mío, pero de nuevo no sé si alguna de las mejoras de velocidad que tenían sería posible en JavaScript, ya que puede haber dependido de las bibliotecas de Java. (Nunca vi su código, así que no sé cómo lo hicieron).

Por lo tanto, es posible mejorar la velocidad. Pero esto funciona bien como una prueba de concepto.

Si está interesado en comparar la velocidad, las versiones de Java están aquí:

Estos son enlaces muertos hasta la próxima actualización de mi sitio web

• Mine - Inicio instantáneo, más lento de renderizar
• El mío: muy lento para comenzar, mucho más rápido para renderizar - Esta versión también tiene iluminación. Arrastra el mouse sobre el eje.
• Alguien más : más rápido para comenzar, mucho más rápido de renderizar.

Voy a intentar convertir mi versión más rápida en algún momento para ver si puedo obtener mejoras de velocidad en la versión de JavaScript.