Nuage de points Web 3D (XYZ / RVB) utilisant CSS ou Canvas

StackOverflow https://stackoverflow.com/questions/8875372

  •  28-10-2019
  •  | 
  •  

Question

Eh bien, j'essaie de représenter graphiquement les valeurs RVB afin de savoir facilement quoi mettre comme valeur de K pour le théorème de la valeur Kmean.

Mais ce que j'essaie de comprendre, c'est comment je devrais représenter graphiquement mes données en 3 dimensions.En ce moment, j'essaie d'utiliser css3 et le -webkit-transform: translate3d (x, y, z);biens.Mais j'ai du mal à visualiser ce que devraient être chaque rotation et tout. 

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>
';

Je suis totalement prêt à utiliser un système que quelqu'un a déjà créé avec canvas, etc. Je n'ai vu que des tracés avec java ou flash.

Était-ce utile?

La solution

Vous pouvez voir une démo ici: http://jsfiddle.net/MadLittleMods/yhCpf/

Pour ajouter des points, suivez les instructions ci-dessous pour chaque couleur: 

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

Par exemple, si vous aviez la couleur 255, 85, 89 qui est # FF554F. Votre argument serait: 

<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 raison pour laquelle vous devez faire l'addition et la soustraction est que l'origine sur le plan n'est pas à 0, 0, 0 mais plutôt à 251, 251, -124

Mise à jour (9/11/2013):

Voici (0, 0, 0) un axe 3D génial que j'ai créé. Comprend des flèches 3D pointant dans des directions positives sur chaque axe.

Démo

Consultez également cette application Web que j'ai créée qui montre un solide 3D défini des équations (non dynamiques) avec des commandes de rotation et de zoom: http://apps.visualpulse.net/calculus-solid/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top