threejs - 1 - 介绍&入门

:)


ThreeJs简介

首先聊聊OpenGL,OpenGL是一个三维绘图标准(这个标准规定了API的输入和输出,具体的内部实现一般是由显卡厂商实现)。这个标准也有一个web的版本(WebGL),而ThreeJs就是对WebGL的一个封装。说白了ThreeJs就是一个封装了WebGL的js库,类比jQuery封装了Dom

ThreeJs是一个三维绘图库 如果不喜欢三维绘图,就此打住吧 ~


基本概念

ThreeJs里面的概念和现实生活很类似。当我们用眼睛看周围的世界,必要的条件是存在三维空间眼睛(有眼睛但是是瞎的这种就不要抬杠)。ThreeJs里面我们也需要搭建一个三维的空间(场景),我们也需要一个观察这个三维空间的眼睛(相机)。理论上有了上面的东西就可以了,但是我们最后需要将眼睛看到的东西绘制到网页上,就还有个渲染对象(仅仅是将相机看到的东西绘制到网页上)

  • 场景:我们搭建的三维空间
  • 相机:观察我们搭建的三维空间
  • 渲染:将观察到的场景渲染到web
图丑勿喷

场景、相机、渲染


入门demo

  • 首先是去下载threejs库github地址(我下载的时候是 r91版本)

    目录结构

  • 编码IDE使用的是WebStorm(激活License sever: http://idea.codebeta.cn

  • 创建工程 - 创建js目录用来放置js文件 - 将build里面的three.js拷贝到js目录下面


    工程目录
  • 创建html页面(我是放到了工程的根目录下面),并引入three.js库,创建一个div作为渲染的容器


    见面初始化
  • 正式进入ThreeJs。创建 相机(THREE.PerspectiveCamera)、场景(THREE.Scene)和渲染器(THREE.WebGLRenderer
    • PerspectiveCamera参数解释:45可以理解为相机的开角,window.innerWidth / window.innerHeight可以理解为成像的比例,1是相机能拍摄到的最近距离,1000是相机能拍摄到的最远距离


    • renderer.setSize设置的是最后渲染出来的大小,这个大小的比例最好是和相机的第二个参数一致,不然最后渲染出来会有变形的情况

  • 在场景中添加一个物体(这里就是三维世界了哈),物体有一个三维坐标属性。


  • 将相机的位置摆设好,将相机放到了立方体的斜上方,并且看着立方体(lookAt)


  • 将场景渲染出来(渲染器里面有个dom元素,最后会渲染到这个dom元素上面,只需要将这个元素添加到div里面就行)


  • 最后的执行结果


没有给代码,这点(html+换行+注释 一共35行)代码还是手敲吧~

threejs - 1 - 介绍&入门
threejs - 2 - 相机
threejs - 3 - 场景刷新
threejs - 4 - 物体
[threejs - 5 - 材质]
[threejs - 6 - 灯光]
[threejs - 7 - 相机进阶]
[threejs - 8 - 物体进阶]
[threejs - 9 - 粒子系统]
[threejs - 10 - 模型加载]
[threejs - 11 - GLSL]
[threejs - 12 - 着色器]

End

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,200评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,526评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,321评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,601评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,446评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,345评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,753评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,405评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,712评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,743评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,529评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,369评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,770评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,026评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,301评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,732评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,927评论 2 336