整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
著當(dāng)今時(shí)期前端地愈來愈普及，頁(yè)面實(shí)現(xiàn)的效果真的是越來越棒！隨著數(shù)字圖像處理、人工智能技術(shù)的發(fā)展 展示給用戶的視覺效果便不局限于平面的2D視覺效果 開始注重于全方位的3D立體展示效果 力求對(duì)于商品的361度地?zé)o死角供用戶認(rèn)識(shí)了解 今天~就跟著大大初嘗一下優(yōu)秀的三維引擎 Three.js
比如我們看一個(gè)相機(jī)展示頁(yè)面:
Three.js是基于原生WebGL封裝運(yùn)行的三維引擎，在所有WebGL引擎中，Three.js是國(guó)內(nèi)文資料最多、使用最廣泛的三維引擎。
1.1 Three.JS Three.JS是基于WebGL的Javascript開源框架，簡(jiǎn)言之，就是能夠?qū)崿F(xiàn)3D效果的JS庫(kù)。
1.2 WebGL WebGL是一種Javascript的3D圖形接口，把JavaScript和OpenGL ES 2.0結(jié)合在一起。
1.3 OpenGL OpenGL是開放式圖形標(biāo)準(zhǔn)，跨編程語(yǔ)言、跨平臺(tái)，Javascript、Java 、C、C++ 、 python 等都能支持OpenG ，OpenGL的Javascript實(shí)現(xiàn)就是WebGL，另外很多CAD制圖軟件都采用這種標(biāo)準(zhǔn)。OpenGL ES 2.0是OpenGL的子集，針對(duì)手機(jī)、游戲主機(jī)等嵌入式設(shè)備而設(shè)計(jì)。
1.4 Canvas Canvas是HTML5的畫布元素，在使用Canvas時(shí)，需要用到Canvas的上下文，可以用2D上下文繪制二維的圖像，也可以使用3D上下文繪制三維的圖像，其中3D上下文就是指WebGL
Threejs是一款WebGL三維引擎，它可以用來做什么許多許多地場(chǎng)景應(yīng)用
利用Three.JS可以制作出很多酷炫的3D動(dòng)畫，并且Three.js還可以通過鼠標(biāo)、鍵盤、拖拽等事件形成交互，在頁(yè)面上增加一些3D動(dòng)畫和3D交互可以產(chǎn)生更好的用戶體驗(yàn)。
隨著物聯(lián)網(wǎng)的發(fā)展,工業(yè)、建筑等各個(gè)領(lǐng)域與物聯(lián)網(wǎng)相關(guān)Web項(xiàng)目網(wǎng)頁(yè)交互界面都會(huì)呈現(xiàn)出 3D化的趨勢(shì)。3D的方式更為直觀，當(dāng)然開發(fā)成本也比較大 而Three.js可以將開發(fā)成本大大降低
隨著WebGL技術(shù)的持續(xù)推廣，5G技術(shù)的持續(xù)推廣，各種產(chǎn)品在線3D展示將會(huì)變得越來越普及 比如一家汽車公司的新款轎車可以在官網(wǎng)上在線預(yù)覽 也許有一天一些電商平臺(tái)會(huì)通過3D模型取代2D圖片 現(xiàn)在你朋友推薦推薦給你一款新衣服，你會(huì)說發(fā)一張圖片看看 也許將來你會(huì)說發(fā)來一個(gè)3D模型鏈接看看
與webgl相關(guān)的數(shù)據(jù)可視化主要是兩方面 一方面是海量超大數(shù)據(jù)的可視化，另一方面是與3D相關(guān)的數(shù)據(jù)可視化。對(duì)于超大的海量數(shù)據(jù)而言 基于canvas、svg等方式進(jìn)行web可視化，沒有基于WebGL技術(shù)實(shí)現(xiàn)性能更好 對(duì)于3D相關(guān)的數(shù)據(jù)可視化基于WebGL技術(shù)
解析GeoJOSN數(shù)據(jù)中國(guó)GDP數(shù)據(jù)可視化：http://www.yanhuangxueyuan.com/3D/geojsonChina/index.html?_blank
2.4 H5/微信小游戲
非常火的微信小游戲跳一跳就是使用Three.js引擎開發(fā)的 開發(fā)3D類的H5小游戲或者微信小游戲，Three.js引擎是非常好的選擇噢 無需下載，方便傳播，目前的生態(tài)非常和小游戲開發(fā)。
在科教領(lǐng)域通過3D方式展示特定的知識(shí)相比較圖像更為直觀。
Onshape是一款機(jī)械領(lǐng)域的三維建模軟件 如果熟悉Solidworks、UG等CAD軟件，那么你可以把Onshape理解為云Solidworks。
機(jī)械模型在線預(yù)覽demo: http://www.yanhuangxueyuan.com/3D/jixiezhuangpei/index.html?_blank
心臟
scan head data
使用threejs繪制3D圖形，一般繪制的結(jié)果都是通過canvas元素生成，對(duì)于平面、3D效果、視角變化和交互、動(dòng)畫這一塊，使用threejs可以快速便捷地幫助我們完成工作，而不必一步一步創(chuàng)建canvas，獲取context再逐條繪制。threejs有一些基本概念在使用之前必須要了解。
核心三大塊：場(chǎng)景、相機(jī)、渲染器。作用分別為：在canvas中展示所有內(nèi)容的3D容器、顯示3D容器中可見區(qū)域的投影框、畫面選定后進(jìn)行拍照展示的渲染器。所有渲染器渲染時(shí)需要確定場(chǎng)景和相機(jī)。 在實(shí)際進(jìn)行繪制更加豐富的內(nèi)容時(shí)，threejs提供了許多對(duì)象可以很快的完成一個(gè)復(fù)雜的3D圖形，并且對(duì)于3D圖像的靈活多變的調(diào)整。這些對(duì)象包括有幾何形狀、材料、光線、計(jì)時(shí)器、射線、輔助線、動(dòng)畫、音頻、模型加載器、控制器等，除此之外還有例如矩陣、四元數(shù)等等一些進(jìn)階的運(yùn)算，簡(jiǎn)單應(yīng)用都不會(huì)涉及。
對(duì)于一個(gè)3D應(yīng)用，場(chǎng)景應(yīng)當(dāng)是唯一的，所有相關(guān)的內(nèi)容都應(yīng)當(dāng)添加到唯一的場(chǎng)景中，不管是要顯示還是不顯示的，顯示的畫面是通過調(diào)整相機(jī)角度決定的。所有場(chǎng)景就是所有具體內(nèi)容的容器。
const scene = new THREE.Scene();
場(chǎng)景的初始化可以自定義其中一些內(nèi)容，Scene接收對(duì)象形式的參數(shù)，比較有用屬性的包括：
相機(jī)用于控制3D空間顯示的區(qū)域，通常會(huì)采用顯示距離的透視相機(jī)和顯示投影的正交相機(jī)，當(dāng)然以可以直接使用相機(jī)，并配置合適的參數(shù)來實(shí)現(xiàn)相應(yīng)的相機(jī)。透視相機(jī)會(huì)根據(jù)場(chǎng)景中物體默認(rèn)Z軸的深度進(jìn)行近大遠(yuǎn)小的顯示，而正交投影相機(jī)則會(huì)將遠(yuǎn)近不同的物體按正常的比例進(jìn)行顯示。 普通相機(jī)直接使用：const camera = new THREE.Camera(); 3D場(chǎng)景匯總常用透視相機(jī)， 如果是生成一個(gè)透視相機(jī)，那么對(duì)于3D空間內(nèi)同樣大小但是Z軸距離不容的兩個(gè)物體在相機(jī)中同時(shí)顯示，更遠(yuǎn)的物體顯示更小。
const camera = new THREE.PerspectiveCamera(45, 1, 1, 100);
透視相機(jī)默認(rèn)接受4個(gè)參數(shù)，分別表示視角、截面縱橫比， 近截面距離，遠(yuǎn)截面距離（具體參數(shù)解釋看上面那個(gè)鏈接，還有模型可看）
瀏覽器中3D效果展示是基于webGL的API，使用渲染器從名字上能夠體現(xiàn)這一點(diǎn):
const renderer = new THREE.WebGLRenderer()
初始化是可以配備參數(shù)的：
場(chǎng)
學(xué)術(shù)
新媒體
設(shè)計(jì)
極客
讓你擁有“谷歌速度”
本方法尤其適用于團(tuán)隊(duì)項(xiàng)目 Deadline。如果是個(gè)人，則可以學(xué)習(xí)其中的項(xiàng)目規(guī)劃方法與沖刺流程。
沖刺設(shè)計(jì)法（Design Sprint）是近些年從敏捷開發(fā)（Agile）延展出來的一種產(chǎn)品創(chuàng)新方法。由于谷歌創(chuàng)業(yè)部門（Google Venture）和用戶體驗(yàn)設(shè)計(jì)部門（Google UX）、研發(fā)部門的充分運(yùn)用和大力推廣，因此在業(yè)界它也常常被稱為 Google Design Sprint。
該方法最早應(yīng)用于僅有 2-5 天的產(chǎn)品開發(fā)設(shè)計(jì)，隨后被更多牽涉產(chǎn)品服務(wù)或項(xiàng)目遞交的緊急情景所廣泛引用。
話不多說，接下來看看這種通俗意義上「趕 Deadline」方法。當(dāng)然你也可以點(diǎn)擊藍(lán)色字閱讀《拖延癥完全解決方案》，有時(shí)趕的巧還不如趕得早。
一、成員分工或職能分工
無論你是一伙人趕 Deadline 還是一個(gè)人趕 Deadline，你都先得安排好團(tuán)隊(duì)分工或者明確你自己的多項(xiàng)職責(zé)。通常來說，是 5-8 個(gè)人或 5 個(gè)左右職能分類。
就拿完成一個(gè)產(chǎn)品開發(fā)為例，我們可以安排這么6個(gè)人▼
下面一一來說明各自的職能，首先自然是 Sprint Master 啦。
二、Sprint Master 是誰(shuí)？
Sprint Master 通常是團(tuán)隊(duì)的老大，他充分了解項(xiàng)目沖刺的流程、交付項(xiàng)目時(shí)用戶體驗(yàn)的規(guī)范、團(tuán)隊(duì)激勵(lì)的方法、以及和需求方的談判技巧等。
簡(jiǎn)單說就是：
一）項(xiàng)目按啥順序整
二）老板/老師/客戶啥臭脾氣
三）隊(duì)伍里成員有小情緒要咋個(gè)抱抱
四）跟老板/老師/客戶咋人前一套背后一套
在整個(gè) Sprint 過程中，這位 Sprint Master 在不同階段都有不同的工作要做，所花費(fèi)的時(shí)間也是不一樣的，谷歌用下面這張圖說明▼
Sprint 前期：
項(xiàng)目的啟動(dòng)時(shí)關(guān)鍵。首先，他必須明確這次沖刺的主題是什么和工作周期。其次，通過 lightning talks 的方式物色團(tuán)隊(duì)成員，并向其說明任務(wù)并分發(fā) Brief。這里千萬(wàn)提醒，還要同時(shí)安排好后期測(cè)試的相關(guān)細(xì)節(jié)。個(gè)人也是同樣的道理，你自己要明確沖刺目標(biāo)、工作周期、職能范疇和后續(xù)測(cè)試。
當(dāng)然，對(duì)于團(tuán)隊(duì)，還需要一張大桌子（facilitator’s desk），以及接下去用來討論的空間。
Sprint 中期：
項(xiàng)目一旦開始，用谷歌官方的教程來說，Sprint Master 將扮演促進(jìn)者（facilitator）的角色，比如“掌握時(shí)間或節(jié)奏、讓每個(gè)人都能參與、指派、給予方向、減少溝通摩擦、每日工作檢查、每日發(fā)出總結(jié)信件與鼓勵(lì)贊揚(yáng)等。”有時(shí)候討論可能會(huì)跑題（比如經(jīng)常聊成今晚去吃什么），這時(shí)候就需要“收！”。
Sprint 后期：
項(xiàng)目結(jié)束后，項(xiàng)目總結(jié)其實(shí)并不是重點(diǎn)，把項(xiàng)目成果分享給所有成員才是重點(diǎn)。當(dāng)然，還需要滿腔熱情，繼續(xù)規(guī)劃下一個(gè)項(xiàng)目。
三、Sprint 前如何做好準(zhǔn)備？
沖刺開始前，Sprint Master 不僅要知曉面臨的挑戰(zhàn)是什么，更要用最簡(jiǎn)明扼要的一句話，概述沖刺的目標(biāo)和產(chǎn)品的受眾人群。
接下來，谷歌教大家如何正確開「項(xiàng)目啟動(dòng)會(huì)」。
「項(xiàng)目啟動(dòng)會(huì)」 不完全是團(tuán)隊(duì)會(huì)議，它的流程包括：1）對(duì)話相關(guān)權(quán)益人 2）參考一手資料 3）參考同行的使用者研究報(bào)告 3）分析近期相關(guān)的行業(yè)大會(huì) 4）舉出用戶案例。
四、準(zhǔn)備好環(huán)境、設(shè)備與工具
規(guī)劃好沖刺的時(shí)間表（甘特圖），并選擇好具體項(xiàng)目方法，如果是團(tuán)隊(duì)可以準(zhǔn)備一張大桌子，沖刺期間起到“激勵(lì)討論”的作用。
而且，桌上可以適當(dāng)擺上一些如簡(jiǎn)單、便箋、膠帶、投票紙、計(jì)時(shí)器、響鈴等，當(dāng)然別忘了小點(diǎn)心和咖啡喔！
五、Sprint 的流程是怎樣的？
一個(gè) Sprint 可以分六個(gè)階段，類似 Design Thinking（設(shè)計(jì)思維）的方法論，包括：
1.Understand 了解：
使用者的需求是什么？商業(yè)的需求是什么？技術(shù)是否有可行性？
2.Define 定義：
核心策略應(yīng)該關(guān)注于哪一個(gè)群體？
3.Diverge 腦洞：
如何挖掘更多想法？
4.Deicide 決策：
敲定最佳策略。
5.Prototype 原型：
開發(fā)概念原型供用戶測(cè)試。
6.Validate 驗(yàn)證：
向用戶和各相關(guān)權(quán)益人與技術(shù)專家驗(yàn)證產(chǎn)品概念。
1.了解
Lightning Talks
這個(gè) Lightning Talks 顧名思義就是要簡(jiǎn)單扼要，參會(huì)的小組成員提出不同問題來了解問題，但請(qǐng)緊緊圍繞下述三個(gè)方面：
一）項(xiàng)目目標(biāo)、判定項(xiàng)目是否成功的指標(biāo)/5 分鐘
二）技術(shù)可行性、可能面臨的挑戰(zhàn)/5 分鐘
三）相關(guān)使用者的研究/5 分鐘
同業(yè)競(jìng)爭(zhēng)分析
比對(duì) 3-10 個(gè)相似的產(chǎn)品或服務(wù)，列出喜歡或不喜歡的點(diǎn)。
用戶訪談
越是著急的項(xiàng)目，你越要抽時(shí)間和部分用戶聊一聊。因?yàn)楹芏喈a(chǎn)品都會(huì)有同類，那么你應(yīng)當(dāng)去了解用戶對(duì)已有產(chǎn)品服務(wù)的態(tài)度；如果新的產(chǎn)品誕生，他們會(huì)有怎樣的期待等等。
田野調(diào)查
對(duì)用戶訪談，不如走進(jìn)用戶的使用情境中。這樣你會(huì)得到不失真的調(diào)查結(jié)果，并梳理出整個(gè)產(chǎn)品的脈絡(luò)。
列出相關(guān)權(quán)益人
至關(guān)重要，但常常被忽視的一步。希望大家抽出30分鐘一起羅列出這張表，包括：
一）羅列所有可能的相關(guān)權(quán)益人/10分鐘
二）將這些權(quán)益人分組/2 分鐘
三）決定哪些權(quán)益人是你這次 Sprint 的產(chǎn)品對(duì)象
四）了解他們的需求
用白板分類所有資料
并提出想法
每個(gè)團(tuán)隊(duì)成員根據(jù)自己所理解的資料，突出自己的碎片想法，用便利貼貼起來。接著將這些便利貼在白板上分組，投票或集體決策最優(yōu)想法。當(dāng)然，最后的沖刺執(zhí)行不一定按照這個(gè)最優(yōu)想法，方案總會(huì)因不斷地學(xué)習(xí)和討論而優(yōu)化。
2.定義
用戶路徑（User journey）
列出用戶發(fā)現(xiàn)產(chǎn)品/服務(wù)、初次使用、再使用和熟練使用的過程。
定義設(shè)計(jì)原則
讓小組成員羅列出認(rèn)為或希望用戶對(duì)產(chǎn)品/服務(wù)的評(píng)價(jià)用語(yǔ)，最多三個(gè)。它可以在用戶完成 prototype 后比較當(dāng)初和設(shè)計(jì)原則之間的差異。
草擬第一條社會(huì)化媒體簡(jiǎn)訊
對(duì)于一個(gè)B2C 的產(chǎn)品或服務(wù)，團(tuán)隊(duì)或者你自己還要在這時(shí)候擬定一條比如在微博、微信等社會(huì)化媒體平臺(tái)發(fā)布的第一條微博或者圖文消息。
3.腦洞
5分鐘想8個(gè)概念
這個(gè)概念來自于游戲風(fēng)暴法（gamestorming）：每個(gè)人都發(fā)一張紙，對(duì)折三次，展開后留出八個(gè)區(qū)域，接著用5分鐘在這八個(gè)區(qū)域上畫上一些想法。
5分鐘畫一個(gè)優(yōu)質(zhì)概念
把剛才的紙翻過來，再花5分鐘時(shí)間畫出一個(gè)比較精細(xì)的想法。
5分鐘畫一個(gè)故事情境圖
（Storyboard）
對(duì)于比較復(fù)雜的產(chǎn)品，用戶的體驗(yàn)流程比較復(fù)雜。這時(shí)候可以把關(guān)鍵步驟畫成分鏡頭，便于展示想法。
4.決策
靜默投票（Zen Voting）
各個(gè)成員往往會(huì)從自己的職能角度出發(fā)，給出不同的產(chǎn)品愿景，這時(shí)候需要把所有想法貼在白板上，但是不允許交流，避免人為闡述影響主觀判斷，并進(jìn)行一次投票。
討論決定方案
討論確定哪一個(gè)方案最好。這時(shí)候注意不要浪費(fèi)時(shí)間繼續(xù)畫草圖或進(jìn)一步發(fā)散思考。
思考帽（Thinking hats）
肯定有讀者會(huì)問，剛才的討論如果產(chǎn)生分歧怎么辦？接下來進(jìn)行「思考帽」流程，讓不同成員模擬不同角色表達(dá)掛點(diǎn)，這樣可以很快緩和分歧，并找到平衡策略。
注意，不是互換工作和職能，而是按照上圖：點(diǎn)子王、樂觀主義者、悲觀主義者、技術(shù)開發(fā)專家和使用者專家。
5.原型
也就是俗稱的小樣（DEMO）。能讓用戶，包括你的權(quán)益相關(guān)人比如老板/老師/客戶等足以感受到產(chǎn)品或服務(wù)真實(shí)存在的形態(tài)。谷歌也建議大家多花點(diǎn)時(shí)間在小樣上。
6.驗(yàn)證
用戶測(cè)試
進(jìn)行用戶測(cè)試時(shí)，請(qǐng)注意著重關(guān)注以下幾個(gè)問題：
一）用戶是否喜歡原型？原因是？
二）他們想如何改進(jìn)？
三）這個(gè)方案是否滿足了他們的所有需求？
相關(guān)權(quán)益人確認(rèn)
項(xiàng)目如果想繼續(xù)，不僅要考慮用戶需求，還有所有的相關(guān)權(quán)益人比如大老板的態(tài)度。因?yàn)檫@些人會(huì)決定資源的分配等重要項(xiàng)目基礎(chǔ)。
技術(shù)可行性確認(rèn)
原型與正式交付的環(huán)境是有必然差別的，要確認(rèn)交付是否會(huì)超過團(tuán)隊(duì)的能力范疇，以及請(qǐng)技術(shù)專家評(píng)估討論。
關(guān)于谷歌的沖刺設(shè)計(jì)法（Design Sprint）有現(xiàn)成的英文電子版圖書可供閱讀。如果你想閱讀原著，請(qǐng)向公眾號(hào)回復(fù)「谷歌」獲取鏈接。
當(dāng)然，臨近年末，如果你的年終總結(jié)還沒寫好的話，我們還邀請(qǐng)了 IBM 的 HR 老師主講博得老板和考評(píng)部門喜愛的報(bào)告方法。趕緊點(diǎn)開藍(lán)色字閱讀《決戰(zhàn)｜IBM HR 教你寫年終報(bào)告 PPT》
講師介紹
張曉婷
（IBM 上海｜合伙人級(jí)）
身在一個(gè)企業(yè)中最老辣的部門，張老師在八小時(shí)內(nèi)是個(gè)絕對(duì)縝密的 HR。其本科為中國(guó)人民大學(xué)經(jīng)濟(jì)學(xué)和人力資源雙學(xué)位，碩士為 University of Illinois at Urbana-Champaign 全美頂尖 HR 專業(yè)。而八小時(shí)之外，她足跡遍及全國(guó)大部分省份和全球大部分大洲，熱愛徒手攀巖、沙漠穿越。
宮業(yè)奇
（JZ 講師｜帥到不給看照片）
精通 PPT 設(shè)計(jì)、新媒體 HTML5 與 CSS3 代碼級(jí)排版設(shè)計(jì)，是 JZ 多媒體解決方案的男神講師。他將在課程中重點(diǎn)為各位職場(chǎng)人士點(diǎn)播 PPT 美化速成的方法，小白分分鐘假裝大神。
計(jì)育韜
（JZ 多媒體解決方案創(chuàng)始人）
《Prezi 完全解讀——從入門到精通》第一作者，百度 Prezi 貼吧大吧主，浙江傳媒學(xué)院客座講師。在 Prezi 圈和 H5 圈等動(dòng)效設(shè)計(jì)領(lǐng)域頗有建樹。課程中他將重點(diǎn)介紹 Prezi 的年終報(bào)告設(shè)計(jì)思路。
回復(fù)職場(chǎng)了解更多職場(chǎng)大忌避免坑
回復(fù)白噪音聽提高學(xué)習(xí)效率的聲音
回復(fù)簡(jiǎn)歷獲取優(yōu)質(zhì)可視化簡(jiǎn)歷模版
| JZ 往期商業(yè)伙伴 |
APEC 峰會(huì) | 中國(guó)航天集團(tuán) | 浙江省人民廣播電臺(tái) | 湖北省電視臺(tái)
河南衛(wèi)視 | 交通銀行 | 建設(shè)銀行 | 平安銀行 | 民生銀行 | 真格基金
南方周末 | 上海閔行教育學(xué)院 | 上海創(chuàng)智云課堂 | 新東方集團(tuán)
偉巴斯特 | 雪佛蘭汽車 | 雷諾汽車 | 觀致汽車 | TNS新華信
高力國(guó)際｜第一太平戴維斯｜德國(guó)萊茵｜蓋茨基金會(huì)｜追星集團(tuán)
H5／平面／視頻／多媒體服務(wù)與定制
（021）3721 8818
者：*5102
轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/5e9f0bdce51d4546f5791989
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
