更新（2013-11-9）：

Question

好吧，我正在尝试绘制RGB值，以便我可以很容易地知道将什么作为Kmean值定理的K值。

但我想弄清楚的是我应该如何绘制我的三维数据。现在我正在尝试使用css3和-webkit-transform：translate3d（x，y，z）;属性。但是我无法想象每个旋转和东西应该是什么。

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

我完全可以使用某人已经用画布等制作的系统。我只看过java或flash的情节。

Answer 1

您可以在此处查看演示：http://jsfiddle.net/MadLittleMods/yhCpf/

要添加点，请遵循以下针对每种颜色的指南：

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

例如，如果您的颜色为255,85,89，那就是＃FF554F。你的意思是：

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

你必须进行加法和减法的原因是因为平面上的原点不是0,0,0而不是251,251，-124

更新（2013-11-9）：

这是我制作的（0,0,0）令人敬畏的3D轴。包括在每个轴上指向正方向的3D箭头。

Demo

同时查看我制作的这个网络应用程序，它显示了一个3D实体定义了一些方程式（非动态），带有一些旋转和缩放控件：http://apps.visualpulse.net/calculus-solid/

使用CSS或Canvas的Web 3D散点图（XYZ / RGB）

1 个答案:

更新（2013-11-9）：

Demo