threejs - 1 - 介绍&入门

作者: 大批 | 来源:发表于2018-04-07 10:59 被阅读4049次

:)

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设置的是最后渲染出来的大小，这个大小的比例最好是和相机的第二个参数一致，不然最后渲染出来会有变形的情况