前一直想過用CSS做一個3D足球，前幾天使用CSS畫地球之后，突然就來了靈感。使用相同的思路來完成3D足球，沒有看過請參考一下之前的文字《css-畫一個3D地球 》

先看效果：

需求分析：

足球是由12個五邊形和20個六邊形縫合而成。

首先，我們需要準(zhǔn)備邊長相同的五邊形和六邊形。

css畫多邊形的方式很多，這里我考慮到后期偏移的時候需要確定多邊形重心的位置。

使用css的clip-path:polygon屬性來完成多邊形。首先我們畫出六邊形和五邊形的外切圓，來確定外層div的尺寸。

暫定多邊形邊長為100：則可以算出，六邊形外層div寬度為200；五邊形外層div為170。

并且計算出多邊形的每個頂點，在外切圓上的位置。（發(fā)揮你初中水平的時候到了）

.polygon {
	border-radius: 50%;
}
.polygon::after {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
}
.polygon6 {
	width: 200px;
	height: 200px;
	background: rgba(255, 0, 0, .6);
}
.polygon6::after {
	background: #FFF;
	clip-path: polygon(0 50%, 25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%);
}
.polygon5 {
	width: 170px;
	height: 170px;
	background: rgba(0, 255, 0, .6);
}
.polygon5::after {
	background: #000;
	clip-path: polygon(50% 0, 97.55% 34.55%, 79.39% 90.45%, 20.6% 90.45%, 2.45% 34.55%);
}

第二步：我們需要將按規(guī)律將五邊形和六邊形貼到球形的表面

首先，我們要先算出來球的半徑，在足球赤道上，其實是10個六邊形的五條邊和五條中線的連線。

我們大致推算出足球的赤道周長約為1500（沒有計算直線和弧形的誤差，此處我們不需要做到如此精細(xì)）

以此計算出，球的半徑約為235左右。

我們從足球的北極開始到足球的南極，依次排布：1個五邊形、5個六邊形、5個五邊形、5個六邊形、5個六邊形、5個五邊形、5個六邊形、1個五邊形。

/**
* deg 緯度
* len 圖形個數(shù)
* className 圖形是5邊形還是6邊形
* Y軸上偏移角度
* Z軸上旋轉(zhuǎn)角度
*/
function draw(deg, len, className, startDeg=0, rotateDeg=0) {
	var fragment=document.createDocumentFragment()
	for (var i=0; i < len; i++) {
		var div=document.createElement('div')
		div.className=className
		div.style.transform='rotateY(' + ~~(360 / len * i + startDeg) + 'deg) rotateX(' + deg + 'deg) rotateZ(' + rotateDeg + 'deg) translateZ(238px)'
		fragment.appendChild(div)
	}
	document.querySelector('.box').appendChild(fragment)
}
window.onload=function () {
	draw(-90, 1, 'polygon5')
	draw(-53, 5, 'polygon6', 36)
	draw(-28, 5, 'polygon5', 0, 180)
	draw(-11, 5, 'polygon6', 36)
	draw(11, 5, 'polygon6')
	draw(28, 5, 'polygon5', 36, 0)
	draw(53, 5, 'polygon6', 72)
	draw(90, 1, 'polygon5')
}

簡單加個動畫效果，一個3D的足球就完成了。

由于是平面拼接而成，所有效果無法像真實足球那樣特別的圓。

不過一個足球的原理基本解釋清楚了。后期我在考慮將五邊形和六邊形繼續(xù)拆分成更小的圖形來讓足球更加的圓潤。

代碼倉庫地址：

https://github.com/shb190802/html5

演示地址：

https://suohb.com/demo/win/globe3.html

　前言

　　關(guān)于可視化大屏，好多人看到好多炫酷的大屏，視覺效果都非常棒，但是具體實現(xiàn)起來大家就充滿了疑惑，今天就來聊一聊可視化大屏的具體實現(xiàn)方法。歡迎大家溝通交流。

　　可視化大屏常見的實現(xiàn)方式

　　1. WEB

　　項目中最常用的實現(xiàn)方法，第三方的輕量化圖表控件比較多，最常見的 Echarts，來自 Enterprise Charts 的縮寫，商業(yè)級數(shù)據(jù)圖表，一個純 Javascript 的圖表庫，可以流暢地運行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器(IE6/7/8/9/10/11，chrome，firefox，Safari 等)，底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀、生動、可交互、可高度個性化定制的數(shù)據(jù)可視化圖表。

　　創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數(shù)據(jù)進(jìn)行挖掘、整合的能力。支持折線圖(區(qū)域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K 線圖、餅圖(環(huán)形圖)、雷達(dá)圖(填充雷達(dá)圖)、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等 12 類圖表，同時提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時間軸、工具箱等 7 個可交互組件，支持多圖表、組件的聯(lián)動和混搭展現(xiàn)。

△ 圖片源自 https://threejs.org/截圖

　　threesjs(Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創(chuàng)建各種三維場景，包括了攝影機、光影、材質(zhì)等各種對象。)threejs.org 網(wǎng)站上有好多 demo 案例，大家有時間可以研究下。

　　2. U3D

　　Unity 3D 的簡稱是由 Unity Technologies 開發(fā)的一個讓玩家輕松創(chuàng)建諸如三維視頻游戲、建筑可視化、實時三維動畫等類型互動內(nèi)容的多平臺的綜合型游戲開發(fā)工具，是一個全面整合的專業(yè)游戲引擎。

　　Unity 類似于 Director,Blender game engine, Virtools 或 Torque Game Builder 等利用交互的圖型化開發(fā)環(huán)境為首要方式的軟件。其編輯器可運行在Windows、Linux(目前僅支持 Ubuntu 和 Centos 發(fā)行版)、Mac OS X 下，可發(fā)布游戲至 Windows、Mac、Wii、iPhone、WebGL(需要HTML5)、Windows phone 8 和 Android平臺。

　　也可以利用 Unity web player 插件發(fā)布網(wǎng)頁游戲，支持Mac和Windows的網(wǎng)頁瀏覽。它的網(wǎng)頁播放器也被Mac 所支持。

　　4. UE4

　　Unreal Engine4 的簡稱，是由游戲開發(fā)者制作并供游戲開發(fā)者使用的一整套游戲開發(fā)工具。UE4 不僅涉及主機游戲、PC 游戲、手游等游戲方面，還涉及高精度模擬，戰(zhàn)略演練，工況模擬，可視化與設(shè)計表現(xiàn)，無人機巡航等諸多領(lǐng)域。

前段時間發(fā)布了虛幻 5 的宣傳片刷爆朋友圈，近幾年 UE4 也在可視化中的運用也逐漸多了起來。

　　5. VENTUZ

　　Ventuz 專注于高端視聽內(nèi)容的制作，包括交互展示和大型活動、視頻墻、廣播電視在線包裝及演播室舞臺及燈光控制等領(lǐng)域。Ventuz 十分穩(wěn)定、功能強大、流程簡單，可以很容易地集成到復(fù)雜的硬件和軟件系統(tǒng)中。同樣 ventuz 也是可交互的，不過 ventuz 不支持 mac 系統(tǒng)，有點小遺憾，網(wǎng)上一些資源素材都是英文的，感覺學(xué)習(xí)成本挺高沒有深入研究，就大概講解下有這個工具。

　　項目用什么開發(fā)工具很大程度決定了設(shè)計方法方式，各種工具自有不同的優(yōu)劣勢，像 web 輕量化圖表控件多，效果相比 u3d 會弱很多。u3d 對三維支持好，粒子等效果有優(yōu)勢。U3D、UE4、ventuz 都是對于偏三維的效果有很好的支持，效果上都能做出比較驚艷的場景效果，了解這些工具的大致實現(xiàn)效果可為以后做設(shè)計產(chǎn)生事半功倍的效果。

　　地圖常見的實現(xiàn)方法

　　關(guān)于地圖一般分為 2d 地圖和 3d 地圖，不同的效果實現(xiàn)的方法也不同。

△ 圖片來源于「雷爾可視化」侵刪

　　1. 2D地圖

　　下面是普通 2d 地圖的截圖可以任意縮放下鉆，基于 json 技術(shù)實現(xiàn)的。一般都是去對接三方平臺，如百度地圖、高德地圖、騰訊地圖、谷歌地圖等。

△ 圖片來自百度開放平臺

　　2D 地圖效果上可以實現(xiàn)在地圖上進(jìn)行點、線、面、區(qū)域、熱力等效果隨意配置。

　　圖片是百度地圖的開放平臺模板(百度地圖、高德地圖、騰訊地圖、谷歌地圖等都有自己的地圖開放平臺)。他里面有大量的配色樣式模板，可以隨意調(diào)整，大家有時間可以研究下。

　　2. 3D地圖

　　3d 地圖大致分為 3d 地球、3d 地圖、智慧城市、智慧工廠等各種 3d 建模的效果。

△ 圖片作品鏈接(https://www.zcool.com.cn/work/ZMzY4NjM2NDA=.html)

　　3d 地球的話一般是需要建模加貼圖實現(xiàn)的，可以在 c4d 中做球體然后貼圖，對接到開發(fā)的話只需要提供地圖貼圖就可以了。貼圖的話進(jìn)行調(diào)色處理，有的會采用凹凸貼圖實現(xiàn)球體凹凸不平的效果。

　　關(guān)于地球的實現(xiàn)方法 Echarts 組件庫里有一些官方示例(如圖)，可以在官方示例的基礎(chǔ)上進(jìn)行調(diào)整，不過缺點就是粒子飛線的效果會打些折扣，上圖的地球案例是采用 U3D 工具開發(fā)實現(xiàn)的，在粒子飛線效果上都有很好的支持。

　　地圖是要打通數(shù)據(jù)的，顏色色塊根據(jù)數(shù)據(jù)量區(qū)分的，點擊會下鉆到具體的省份地區(qū)。需要前端調(diào)用外部地圖接口，要做到滿意的效果用 3D 自建地圖結(jié)合 H5 反復(fù)調(diào)試，最終實現(xiàn)。

　　上圖地圖立體效果圖是通過三方組件庫的實現(xiàn)的，缺點是前端可配置的項目少，好多效果都不支持。現(xiàn)在好多公司都多多少少會有一些大屏的需求，但是公司前端不是專業(yè)做大屏的，他們大部分都會直接套用三方現(xiàn)有的組件庫去實現(xiàn)，在實現(xiàn)效果上會大打折扣。

△ 圖片作品鏈接(https://www.zcool.com.cn/work/ZMzY4NjM2NDA=.html)

　　智慧城市像這種城市的 3d 模型我們可以直接從 google、高德地圖購買，它們本質(zhì)上是立體空間里的數(shù)據(jù)，開發(fā)可以通過這些數(shù)據(jù)將它實體化，設(shè)計師也可以導(dǎo)出開發(fā)提供的模型，在三維軟件中作為底層建筑模型，不需要單獨去建模。在現(xiàn)有模型基礎(chǔ)上再進(jìn)行一些效果的處理，比如走光、光線上升、車流、飛線等。

　　具體實現(xiàn)也是采用 U3D 去實現(xiàn)的，前文也說了 U3d 對粒子飛線這些效果的支持性比較好。所以這種效果大多都會采用 U3D 去做(不是唯一 ue4、ventuz 同樣能實現(xiàn)這種效果)。

　　其實不管是 web 也好 u3d、Ue4、ventuz 也好都只是一種實現(xiàn)的工具，最重要的還是設(shè)計思路。以上實現(xiàn)方法作者也是了解一些皮毛，這里就大概了解下知道一些效果用什么工具可以實現(xiàn)出來就好，沒必要去深究死磕。我們的重點還是要回歸到做好設(shè)計，去更好的服務(wù)于業(yè)務(wù)。

　　拆解下一些對接開發(fā)的方法

　　很多剛接觸可視化的朋友最關(guān)心的問題就是自己效果出來了咋讓開發(fā)實現(xiàn)呢?很讓人頭疼。其實可視化大屏的對接實現(xiàn)跟普通網(wǎng)頁 ui 界面交付是一樣的道理，切圖+標(biāo)注。

　　1. 標(biāo)注

　　現(xiàn)在好多三方軟件可以自動生成標(biāo)注(藍(lán)湖、像素大廚等)。需要注意的是，如果大屏頁面需要在不同比例的終端展示，這就牽扯適配問題了，那么此時的標(biāo)注與開發(fā)可以使用 rem 作為基本單位來實現(xiàn)，這樣實現(xiàn)的大屏頁面在后期會有更好的擴展性與適應(yīng)性，這塊三方工具都可以隨意轉(zhuǎn)換單位的，大家了解就好。

　　2. 切圖

　　對于切圖這塊需要注意的是要區(qū)分下界面功能，哪些是可以直接給參數(shù)代碼實現(xiàn)的、哪些效果是需要給切圖的。我一般會把它區(qū)分為有數(shù)據(jù)效果圖表 基于組件庫拓展、無數(shù)據(jù) ae 做動效輸出 json。一般開發(fā)用代碼寫不出的樣式或動效，都需要設(shè)計師切圖作支持：比如數(shù)據(jù)容器的邊框、小的動效、頁面整體大背景、部分圖標(biāo)等純視覺展示的。牽扯到數(shù)據(jù)界面的就需要開發(fā)區(qū)自己代碼實現(xiàn)了。

　　總之就是在實現(xiàn)過程中溝通很重要，隨時跟開發(fā)溝通進(jìn)度及效果，做設(shè)計前也需要去考慮開發(fā)實現(xiàn)的，一些不確定能不能實現(xiàn)的效果，一定要在做之前跟開發(fā)區(qū)溝通解決方法。

　　推薦一款 ae 神器 Bodymovin，把在 AE上 做好的動畫導(dǎo)出為 json 文件，直接給到開發(fā)，可以幫助提高實現(xiàn)動效效率，同時提高動效質(zhì)量，網(wǎng)上有好多視頻教程這塊就不再一一闡述了。

　　下面是官方支持的 ae 效果說明：

　　插件支持預(yù)合成，形狀層次，固態(tài)層，圖片，空對象以及文字樣式。

　　支持遮罩和反向遮罩。也許別的模式也會支持，但是導(dǎo)致性能造成巨大影響。

　　支持時間重映射。

　　支持形狀雙層的形狀，矩形，橢圓和三角形。

　　目前只支持滑塊效果。

　　支持部分表達(dá)式。更多介紹可以查看這里(英文)

　　不支持：圖像序列，視頻和音頻(也許未來會支持)。

　　不要擴展軸向!不知為何，擴展軸向會破壞導(dǎo)出的數(shù)據(jù)，所以不要做這個操作。

　　Bodymovin 工具在 AE 中有些預(yù)設(shè)效果和透視功能是不支持的，可以把動畫渲染成視頻，把格式轉(zhuǎn)換為 ogg 或者 webm 網(wǎng)頁視頻格式，網(wǎng)頁視頻格式加載是非常快的，之后把文件給開發(fā)就可以了。

　　注意 Bodymovin導(dǎo)出 json 給開發(fā)的文件中需要有完整視頻參考，開發(fā)可以通過完整視頻查看位置和效果，同時如果出現(xiàn) json 導(dǎo)出錯誤的情況，開發(fā)可以查看，遇到不一樣的地方可以詢問設(shè)計師。開發(fā)完成后需要走查，看是否與你預(yù)期一致。

　　總結(jié)

　　本文大概講了下 web、U3d、Ue4、ventuz 等一些可視化的實現(xiàn)工具，以及地圖的一些實現(xiàn)方法，關(guān)于數(shù)據(jù)可視化大家都是摸著石頭過河，以上是我在工作中了解的一些跟開發(fā)對接實現(xiàn)的經(jīng)驗分享給大家，歡迎大家多溝通交流。

文由ScriptEcho平臺提供技術(shù)支持

項目地址：傳送門

基于 p5.js 的 3D 幾何圖形展示

應(yīng)用場景介紹

本文展示了如何使用 p5.js 庫創(chuàng)建交互式的 3D 幾何圖形展示。該技術(shù)廣泛應(yīng)用于藝術(shù)、教育和科學(xué)可視化等領(lǐng)域。

代碼基本功能介紹

這段代碼利用 p5.js 庫繪制了六個不同的 3D 幾何圖形：平面、立方體、圓柱體、圓錐體、環(huán)面和球體。這些圖形隨著時間的推移旋轉(zhuǎn)和移動，呈現(xiàn)出動態(tài)的 3D 展示效果。

功能實現(xiàn)步驟及關(guān)鍵代碼分析說明

1. 加載 p5.js 庫

首先，通過 loadJavascript 函數(shù)異步加載 p5.js 庫。

let jsUrls=['https://registry.npmmirror.com/p5/1.9.3/files/lib/p5.min.js']
await Promise.all(jsUrls.map((jsUrl)=> loadJavascript(jsUrl)))

2. 定義 p5.js 草圖

接下來，定義了一個 p5.js 草圖，其中包含 setup 和 draw 函數(shù)。

const sketch=(s)=> {
  s.setup=()=> {
    s.createCanvas(710, 400, s.WEBGL)
  }
  s.draw=()=> {
    // ...
  }
}

3. 設(shè)置畫布

在 setup 函數(shù)中，創(chuàng)建了一個 WebGL 畫布，并設(shè)置畫布大小。

s.createCanvas(710, 400, s.WEBGL)

4. 繪制幾何圖形

在 draw 函數(shù)中，使用 p5.js 的 3D 形狀函數(shù)繪制了六個不同的幾何圖形。每個圖形都應(yīng)用了不同的旋轉(zhuǎn)和移動變換，以創(chuàng)建動態(tài)的展示效果。

s.plane(70)
s.box(70, 70, 70)
s.cylinder(70, 70)
s.cone(70, 70)
s.torus(70, 20)
s.sphere(70)

5. 創(chuàng)建 p5.js 實例

最后，創(chuàng)建一個 p5.js 實例，并將其附加到 HTML 元素上。

new p5(sketch, 'container')

總結(jié)與展望

開發(fā)這段代碼的過程讓我深入了解了 p5.js 庫在創(chuàng)建交互式 3D 可視化方面的強大功能。該代碼可以進(jìn)一步擴展和優(yōu)化，例如：

• 添加用戶交互，允許用戶旋轉(zhuǎn)或縮放幾何圖形。
• 使用更復(fù)雜的形狀和紋理創(chuàng)建更逼真的場景。
• 將代碼集成到 Web 應(yīng)用程序或其他項目中，以增強用戶體驗。
• 更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術(shù)支持

項目地址：傳送門

微信搜索ScriptEcho了解更多