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