前端程序员：月薪 5K 到 5 万，我干了啥
　高贵的前端程序猿们：　　如何在前端开发这种高精尖的技术领域找到心仪的工作？实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪、买房买车、迎娶白富美走上人生巅峰的职业梦想？这篇《进化论：从 0 到 100，前端猿茁壮成长的精神饲料史》，肯定能给你事业的加速动力。　　前端开发工作已经变的越来越复杂，仅仅是想罗列一份前端开发的学习列表就已经是一件艰巨的工作。曾经只要会编写 HTML, CSS 和 Javascript 就是能够找到一份前端开发工作的全部要求。而现在，web 开发远远不止是简单编码。因为我们的互联网上有了更多的内容，也因为有更多的人、更多设备可以访问互联网,
web 前端开发技能也就更多了。我们现在需要考虑的<span style="color: rgb(105,网易游戏雷火盘古与深圳腾讯 CDG 支付部门的前端实习 offer 怎么选？
09:22:37 +08:00 · 1663 次点击
今年大三，拿到如上两个 offer 。诚然网易待遇好，但是我对技术还是有一定追求的，有点担心网易游戏部门的前端就是做做游戏官网。腾讯的话是微信相关的支付部门。希望各位大神指点一二，这周末就要给出邮件回复了?
6 回复 &| &直到
09:45:47 +08:00
& & 10:56:25 +08:00 via Android
恭喜楼主， CDG 的支付是财付通部门，给微信支付和手机 QQ 支付提供支持。
如果想走游戏的技能树就去猪厂。
否则去鹅厂，毕竟在财付通学到东西后也可以跳槽去阿里…
& & 11:32:21 +08:00 via iPhone
@ 我的好像是理财通…卖金融产品的
& & 12:06:51 +08:00
@ 哦，看来我了解到的信息还不够:(
听说鹅厂入职满一年可以自由转岗，所以如果想要一个大舞台可以考虑鹅厂，如想要早点进入游戏行业就网易啦。
深圳的房价目前很吓人，这个可能也是需要考虑的点。
& & 16:11:34 +08:00
@ 楼主这个水平现在想去阿里分分钟啊，哪里还用得上跳槽
& & 09:42:33 +08:00 via iPhone
@ 阿里内推被刷了，并没有很厉害?
& & 09:45:47 +08:00 via iPhone
@ 我选择了腾讯，谢谢您的建议
& · & 2891 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 48ms · UTC 04:04 · PVG 12:04 · LAX 21:04 · JFK 00:04? Do have faith in what you're doing.1,753被浏览952,839分享邀请回答1.3K60 条评论分享收藏感谢收起1K182 条评论分享收藏感谢收起2,691被浏览227,939分享邀请回答1.8K178 条评论分享收藏感谢收起14957 条评论分享收藏感谢收起Web前端也能做的AR互动
一、项目体验
二、技术实现
三、兼容情况
四、遇到的问题
一、项目体验
& & 以往的AR，都是要在某个APP内才可以体验到的，例如pokemon go和QQ AR火炬传递活动。
& & &我们团队在做技术储备的时候，发现Android设备下微信、手Q支持getUserMedia()网页拉起摄像头，并通过createObjectURL把数据流传给video在页面展示，以营造出实时视频的效果。据最新统计数据显示，安卓操作系统占有全球移动智能手机系统86.2%的市场份额。也就是说，我们可以基于微信和手Q来做网页的AR互动啦！！！（http://digi.tech.qq.com/a/526.htm?t=8）
于是我们基于实际需求发起并开发了一个WebAR的H5项目，玩家进来页面可以在不安装额外APP的情况下，体验到AR带来的乐趣；针对不支持实时视频的浏览器，就提供3D全景体验版。进入页面根据提示操作即可完成WebAR小游戏，跳转落地页。
二、技术实现
2.1 WebRTC&&WebAR的基础
& & &无论是APPAR还是WebAR的一个最基础要实现的功能就是实时视频效果。WebRTC（网页实时通信，Web&Real-Time&Communication）是一个支持网页浏览器进行实时语音对话或视频对话的API。getUserMedia()是WebRTC的其中一个API，就是支持网页拉起摄像头的API，摄像头获取到的数据流会以&video&标签作为载体呈现在页面上，这就给了我们一个很好的信息，可以在video上叠加任何我们需要的内容和操作，从而营造出WebAR的效果。
关键代码：
function getMedia() {
if (navigator.getUserMedia) {
navigator.getUserMedia({
'video': {
'optional': [{
}, successFunc, errorFunc);
alert('Native device media streaming (getUserMedia) not supported in this browser.');
var localS
function successFunc(stream) {
document.getElementById('video').src = window.URL && window.URL.createObjectURL(stream) ||
localStream =
function errorFunc(e) {
alert('Error！'+e);
function closeMedia() {
localStream.stop();
document.getElementById('video').src = '';
&（http://blog.csdn.net/journey191/article/details/）
2.2 3D模型&&WebGL、three.js、3DMAX
& & 这次做的WebAR非常酷炫的一个体验是他的3D模型展示。要在网页展示3D模型，需要先把模型放到3DMAX里进行预处理（过程会遇到很多bug和困难），导出成js文件，再借助three.js在页面里建立模型、调整动画等（过程也会遇到很多bug和困难）。这块工作主要是四姑娘（signhuang）来负责的，让我们期待四姑娘后面更详细心酸的分享吧。
2.3 3D全景&&three.js、球体全景
& & 3D全景的制作有很多种方法，CSS3、Flash、Krpano等，因为3D模型动画我们是借助three.js在页面建模的，所以3D全景我们也考虑用three.js来制作。
三、兼容情况
3.1 getUserMedia()
&&&&&由于苹果的安全机制问题，iOS设备任何浏览器都不支持getUserMedia()。
& & &最终数据展示，Android设备下，有99.45%的设备在微信是支持getUserMedia()的，98.05%的设备在手Q是支持getUserMedia()的。而我们之前测试机型里面，本机浏览器、QQ浏览器对getUserMedia()都有不同程度的支持。
&&&&&2015年底前，也就是chrome47版本前，chrome是支持http页面拉起摄像头的，出于安全问题考虑，chrome47版本后只支持https页面拉起摄像头。
（http://caniuse.mojijs.com/Home/Html/item/key/stream/index.html）
3.2 3D模型&3D全景
&&&&&WebGL是一项利用JavaScript API渲染交互式3D电脑图形和2D图形的技术，可兼容任何的网页浏览器，无需加装插件。WebGL在现代浏览器中已经被广泛支持。3D模型在移动设备浏览器上的兼容情况还是很好的，已测试机型里面，92%的设备是支持浏览器3D建模和动画的。
（http://caniuse.mojijs.com/Home/Html/item/key/webgl/index.html）
四、遇到的问题
4.1 getusermedia()
4.1.1 前后摄像头
遇到问题：
& & & 使用getUserMedia()拉起摄像头时，默认是拉起前置摄像头的，但是要营造WebAR的效果，肯定是需要拉起后置摄像头的。
解决方法：
& & & 因为在获取设备源ID的时候，前置摄像头会排在后置摄像头前，不单独设置的话，就会使用第一个获取到的设备源ID，也就是前置摄像头的ID。稍微增加点预处理即可。
关键代码：
var exArray = [];
if (navigator.getUserMedia) {
MediaStreamTrack.getSources(function (sourceInfos) {
for (var i = 0; i != sourceInfos. ++i) {
var sourceInfo = sourceInfos[i];
if (sourceInfo.kind === 'video') {
exArray.push(sourceInfo.id);
navigator.getUserMedia({
'video': {
'optional': [{
'sourceId': exArray[1]
'audio':false
}, successFunc, errorFunc);
4.1.2 摄像头全屏
遇到问题：
& & 摄像头拍摄的内容不能完美的全屏，上下总有留白，不完美。尝试了多种原生设置来设置&video&大小，希望能完美铺满全屏，然而都不成功。
解决方法：
&&&&&上图是用CSS设置了&video&为红色背景，并且设置了宽高铺满全屏。&video&标签确实如期待的展现，但摄像头拍摄到的内容却不会被合理铺满全屏。可以理解为就像我们平常拍摄的视频，是有固定宽高比的，在浏览器宽高比不同又要求视频全部显示时，就会出现上下留白或者左右留白的情况。测试发现，&video&标签不需要另外设置宽高，会默认为铺满全屏并且溢出，那我们在外层增加一个div并且设置为浏览器宽高，再增加 overflow:hidden就可以模拟全屏的效果了。
关键代码：
#videoBox{position:left: 50%;top: 50%;z-index: 1;-webkit-transform: translate(-50%,-50%);-webkit-transform-origin: 50% 50%;}
#videoWrap{position:left: 0;top: 0;background: #4CAABE;overflow:}
id="videoWrap"&
autoplay="autoplay" id="videoBox"&&
var videoWrap = document.getElementById('videoWrap');
videoWrap.style.width = window.innerWidth + 'px';
videoWrap.style.height = window.innerHeight + 'px';
4.1.3 页面无法针对模型点击
遇到问题：
& & 本来页面设置的是让用户点击3D模型来进行交互的，可发现没办法单独点击到模型，整个交互就不能进行下去了。
解决方法：
& & & 修改了页面的点击交互方式，改用坐标瞄准判定的方式。页面中心设置一个瞄准区域，用户移动手机让3D模型处在瞄准区域内，即判定为成功，进行下一步。这样就避免了页面需要点击的情况。
& & &思路是：3D模型和camera都有自己的三维坐标，new THREE.Vector3获取到两者的坐标，a.angleTo(b)求他们的夹角，夹角小于设定范围，则判断为已瞄准。
& & & 由于最开始的需求是要做一个tips，提醒用户向左转或者向右转，用的是new THREE.Vector2获取到两者在Y面的坐标，再用a.angle()-b.angle()求得两者在Y面的夹角来判断当前camera在模型的右侧还是左侧。新需求相当于要增加上下的判定，用new THREE.Vector2获取到两者在X面的坐标，再用a.angle()-b.angle()求得两者在X面的夹角。Y面夹角和X面夹角都小于设定范围时，则判断为已瞄准。
关键代码：
var v = camera.getWorldDirection();
var a1 = new THREE.Vector2( a.position.x, a.position.z );
var b1 = new THREE.Vector2( v.x, v.z );
dt1 = a1.angle()-b1.angle();
var a2 = new THREE.Vector2( a.position.y, a.position.z );
var b2 = new THREE.Vector2( v.y, v.z );
dt2 = a2.angle()-b2.angle();
if(Math.abs(dt1)&0.1 && Math.abs(dt2)&0.1){
4.2 3D全景
4.2.1 iOS和Android初始化3D全景的朝向不一致
遇到问题：
& & iOS设备在任何朝向（东南西北）打开3D全景，都是看向一个固定方向的。
& & Android设备在不同朝向（东南西北）打开3D全景，看向的是不同方向。
& & 这个页面为了降低交互难度以及固定让3D模型出现在舞台上（背景比较好看），需要的是在不同朝向（东南西北）打开3D全景，都是看向一个固定方向的。
解决方法：
& & & 页面加载完毕初始化camera，获取到camera看向的矢量（不会根据看向角度不同而不同），lookAt(target)旋转3D全景朝向那个位置，这样每次打开页面都会朝向一个固定的方向，再rotate各个方向进行最终调整。
关键代码：
var v = camera.getWorldDirection();
var geometry = new THREE.SphereGeometry( 1000, 16, 8 );
geometry.scale( -1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( 'bg.jpg' )
var stage = new THREE.Mesh( geometry, material );
stage.lookAt(new THREE.Vector3( v.x, 0, v.z ));
stage.rotateY((85 * Math.PI)/180);
stage.rotateZ((-4 * Math.PI)/180);
scene.add( stage );
4.2.2 初始化定位
遇到问题：
& & 用户进入页面时候的手机角度有各种情况，可能是竖着手机扫描二维码，然后平放手机等待加载完成查看页面。页面初始化方向和最终查看方向差太多的话，渲染的全景、3D模型等的位置可能会偏移很大。
解决方法：
& & 进入页面捕获camera看向的矢量，加载完成捕获当前camera看向的矢量，有偏移的话重新初始化全景、3D模型等的位置和角度。
关键代码：
if(!hasMoved && typeof(defaultCameraDirection)!='undefined'){
var v = camera.getWorldDirection();
if( v.x != defaultCameraDirection.x
|| v.y != defaultCameraDirection.y
|| v.z != defaultCameraDirection.z
hasMoved = true;
resetLocationAndRotation();
4.3 不支持情况排除
4.3.1 getUserMedia()、three.js、陀螺仪
①判断是否支持getUserMedia()
function getMedia() {
if (navigator.getUserMedia) {
}, successFunc, errorFunc);
function errorFunc(e) {
alert('Error！'+e);
②用Detector.js判断是否支持WebGL
src="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js"&&
if(!Detector.webgl) {
③使用three.js有报错时
console.error = (function(origin){
return function(errorlog) {
if(/THREE/.test(errorlog)) {
})(console.error);
console.warn = (function(origin){
return function(errorlog) {
if(/^THREE.WebGLRenderer:$/.test(errorlog)) {
})(console.warn);
④设备不支持陀螺仪
if(window.DeviceOrientationEvent) {
4.3.2 iOS8未知错误
遇到问题：
& & & 有位远方的同事是iPhone 5S，测试发现加载到100%了，加载界面一直不消失，页面卡住。
解决方法：
& & & 本身页面的设置是：为了防止加载界面隐藏后，3D全景和3D模型没渲染完成显示一片空白，于是加了个判定，建模渲染完成才隐藏加载界面。找身边的同事借了iPhone 5S测试，能顺利进入3D全景AR界面，所以不是设备问题。问了下微信版本也是最新的，系统版本是iOS8，而没有问题的iPhone 5S的系统版本是iOS9，所以考虑是系统版本导致的问题。但是设备不在身边没办法一步步排除可能性，查了下iOS8的占比只有2.8%，该游戏用户群体iOS设备占比少于30%，所以决定放弃这部分用户的页面体验，直接跳转落地页。
关键代码：
var agent = navigator.userAgent.toLowerCase() ;
if(agent.indexOf("like mac os x") & 0){
var regStr_saf = /os [\d._]*/gi ;
var verinfo = agent.match(regStr_saf) ;
version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
var version_str = version+"";
if(version_str != "undefined" && version_str.length &0){
version=version.substring(0,1);
if(version&5 && version &9){
做新技术研究和实践的过程中会遇到没有先例的坑，去查API文档，曲线救国的方式解决问题（有时候觉得重构/前端是一个需要带着小聪明的工种XD）。很感谢游戏公众号的同事们给予的大力支持让我们的页面能顺利上线并被推送给玩家，看着数据蹭蹭蹭的涨，终于觉得努力没有白费了。
最终页面的数据展示出，部分用户设备是支持拉起摄像头的，但可能出于安全问题的考虑，他们拒绝拉起。这是我们后续工作要考虑的一个问题，如何保护用户隐私以及让用户信任我们。
总的来说，这是一次很有趣充实的新技术研究和实践，学习的过程是很让人幸福的。