Web前端开发程序员200行代码,月薪12K不解释

无意中找到不久前,一位外友人给我分享的一个案例,重力模拟阅读Three.js案例。他是Web前端开发工程师,这份案例说起来比较值得回忆,因为就是这份案例才促使他现在所有的成就。因为他是通过这个网页案例而自己成功通过拿到工作的,所以我在这里分享给大家,希望能够帮助进一步理解Three.js。

当然,在这篇文章分享之前我还是要推荐下我自己的前端群:621071874,不管你是小白还是大牛,小编我都挺欢迎,不定期分享干货以及各种经典案例(包括此案例),包括我自己整理的一份2017最新的前端资料和零基础入门教程,同时,还会定期和大家共同讨论目前企业需求以及各类面试问题,欢迎初学和进阶中的小伙伴。

右键停止或者开始
静态图

源码:


js
CSS
Html

threejs是什么?

threejs是一个让用户通过Javascript入手搭建webgl项目的类库。众所周知学习webgl需要图形学知识,而语言需要通过js和glsl两种语言。如果我们不通过threejs使用webgl势必逃不过以上这些东西,你必须全面了解着色器语法和自己编写顶点着色和片元着色;但你使用了threejs显然可以 便捷的逃过这些对于传统js从业人员挑战的shader编写。

上手threejs需要什么基础?

对于3D美术知识的认知,不管你有没有3D美术从业经历,但你必须要懂什么是mesh,什么是贴图,什么是材质,摄像机如何摆放才能构建出良好的视觉体验。还要明白viewport渲染出来的东西关系和camra重点参数如何配置。

对于Javascript的能力以及OOP程序开发能力,游戏开发能力,明白如何使用JS进行面向对象编程,尤其使用threejs 构建比较复杂的网页游戏时候,你必须坐到更清晰的模块化,利用设计米哦是和数据结构进行数据的显示和绑定。

当然,还有一种方法就是来前端群:621071874,开个小玩笑,大家不要建议。

掌握以上三点才是threejs的核心能力!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,822评论 25 709
  • 今天,是一年一度的清明节,缅怀祖先的节日。前几年,清明节不列入法定假期之内,便有市民质疑,现在的年轻人,越来越崇洋...
    一泓夜雨阅读 1,052评论 1 1
  • 赵孟頫在兰亭跋上的一句"笔法千古不易"引得后来无数英雄豪杰"指点江山,激扬文字"。从拿笔的方式方法到书法形而上,从...
    无用堂主阅读 515评论 4 7
  • 小区名称:蔚蓝卡地亚 工程户型:别墅 工程面积:420平米 设计风格:欧式 工程造价:36万(高度国际装饰) 欧式...
    南湘竹阅读 177评论 0 0
  • 鲍勃·迪伦的狂热粉丝,与自己偶像的前女友约会,追求过知名文艺女星戴安.基顿(艾伦.伍迪早期作品的缪斯与爱人),有着...
    穿品阅读 736评论 0 0