Totado de dispersión 3D web (XYZ / RGB) usando CSS o lienzo

Question

Bueno, estoy tratando de graficar los valores de RGB para poder saber fácilmente qué poner como el valor de K para el teorema de valor de Kmean.

Pero lo que estoy tratando de descubrir es cómo debo graficar mis datos tridimensionales. En este momento estoy tratando de usar CSS3 y -Webkit -Transform: Translate3D (X, Y, Z); propiedad. Pero tengo problemas para visualizar lo que debería ser cada rotación y esas cosas.

echo '
    <div style="width: 500px; height: 500px; background: #ffffff; -webkit-transform: perspective(800); -webkit-transform-style: preserve-3d;">
        <div style="-webkit-transform: rotateZ(0deg); -webkit-transform-style: preserve-3d; position: relative;">
        <div style="-webkit-transform: rotateY(-45deg); -webkit-transform-style: preserve-3d; position: relative;">
        <div style="-webkit-transform: rotateX(-15deg); -webkit-transform-style: preserve-3d; position: relative;">
';
            foreach($Kmean_array['clusters'] as $key_cluster => $cluster)
            {
                foreach($cluster['points'] as $key_point => $point)
                {
                    echo '
                    <div style="position: absolute; opacity: .2; width: 4px; height: 4px; background: #', $Kmean_array['chosen_centroid']['hex'] ,'; -webkit-transform: translate3d(', $point['rgb']['r'] ,'px, ', $point['rgb']['g'] ,'px, ',$point['rgb']['b'] ,'px);"></div>
                    ';
                }
            }
echo '
        </div>
        </div>
        </div>
    </div>
';

Estoy totalmente dispuesto a usar un sistema que alguien ya ha hecho con lienzo, etc. Solo he visto tramas con Java o Flash.

Answer 1

Puedes ver una demostración aquí: http://jsfiddle.net/madlittlemods/yhcpf/

Para agregar puntos, siga las pautas a continuación para cada color:

Red: 251 - {Your Red}
Green: 251 - {Your Green
Blue: -124 + {Your Blue}

Por ejemplo, si tenía el color 255, 85, 89, que es #FF554F. Tu punto sería:

<div class="point" style="-webkit-transform: translate3d(-4px, 166px, -35px); -moz-transform: translate3d(0px, 170px, -39px); -o-transform: translate3d(0px, 170px, -39px); -ms-transform: translate3d(0px, 170px, -39px); transform: translate3d(0px, 170px, -39px);">
    <div class="face one"></div>
    <div class="face two"></div>
    <div class="face three"></div>
    <div class="face four"></div>
    <div class="face five"></div>
    <div class="face six"></div>
</div>

La razón por la que tiene que hacer la suma y el retoz es porque el origen en el avión no está en 0, 0, 0 en su lugar está en 251, 251, -124

Actualización (2013-11-9):

Aquí está (0, 0, 0) impresionante eje 3D que hice. Incluye flechas 3D que apuntan en direcciones positivas en cada eje.

Manifestación

También consulte esta aplicación web que hice que muestra un sólido 3D definido algunas ecuaciones (no dinámicas) con algunos controles de rotación y zoom: http://apps.visualpulse.net/calculus-solid/