:)
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行）代码还是手敲吧~
End
网友评论