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行）代码还是手敲吧~

End