用前端技術(shù)如何實(shí)現(xiàn)數(shù)據(jù)的3D模型展示（在有數(shù)學(xué)公式的情況下）

我使用過(guò)JavaScript第三方庫(kù)：d3.js，但是只能做平面圖像，想做成立體圖像。像下圖：
圖片描述

回答

編輯回答

法克魷

你好，使用CSS3的3D Transform可以實(shí)現(xiàn)的，但是只能在支持3D變幻的瀏覽器里做出來(lái)，不過(guò)目前支持3D變幻的支持程度已經(jīng)非常好了，如果我沒(méi)記錯(cuò)的話，在IE10及以上的瀏覽器都是支持的
當(dāng)然，這種平滑的曲面是畫(huà)不出來(lái)的，但是你可以用很多小的小方片（也就是元素）來(lái)組合出這個(gè)效果
在3D變幻中會(huì)有一個(gè)3D坐標(biāo)系，X軸向右，Y軸向下，Z軸垂直屏幕向外
你只需要計(jì)算出每個(gè)小方塊在三維空間的位置，然后設(shè)置相應(yīng)的CSS屬性讓它放置在三維空間的位置就行了，但除此以外還需要每個(gè)小方塊在相應(yīng)的位置有一定的傾斜，具體傾斜多少就需要通過(guò)偏微分計(jì)算出來(lái)了。
關(guān)于CSS 3D變幻你可以參考《The Book Of CSS3》的相關(guān)章節(jié)，也可以找其它相關(guān)資料。
我這里有個(gè)demo你可以參考一下：

<div>
<script>
var start = -3.14*2
var end = 3.14*2
var step = 0.24
var factor = 30
var f = (x,y) => 50 * (Math.sin(x) + Math.cos(y))
var z
for (var x = start; x < end; x += step) {
  for (var y = start; y < end; y += step) {
    z = f(x,y)
    document.write(`
      <span style="
        background-color:hsl(${z},70%,50%);
        transform: translate3d(${x*factor}px,${y*factor}px,${z}px) rotateY(${-Math.atan(Math.cos(x))}rad) rotateX(${Math.atan(-Math.sin(y))}rad)"></span>
    `)
  }
}
</script>
</div>


<style>
  div {
    margin: auto;
    margin-top: 100px;
    width: 500px;
    height: 500px;
    background-color: rgba(0,255,0,0.3);
    transform: perspective(1000px) rotateX(80deg) rotateZ(0deg);
    transform-style: preserve-3d;
    transition: transform 30s linear;
  }
  div:hover {
    transform: perspective(1000px) rotateX(580deg) rotateZ(1180deg);
  }
  span {
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    background-color: red;
  }
</style>

如果你不方便看的話，這里還有另一個(gè)在線的：
https://xieranmaya.github.io/...

上面說(shuō)的是一種方案，成本比較低，只要會(huì)CSS并且理解偏微分就可以了。但也有它自己的問(wèn)題，就是小方塊太多性能會(huì)比較差。

另一種方案就是合適WebGL，也就是類似于傳統(tǒng)3D游戲的開(kāi)發(fā)，只不過(guò)你只用它來(lái)畫(huà)了一個(gè)三維空間的圖象。

2018年7月31日 07:49

編輯回答