整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
着当今时期前端地愈来愈普及，页面实现的效果真的是越来越棒！随着数字图像处理、人工智能技术的发展 展示给用户的视觉效果便不局限于平面的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小时内与您取得联系。
