canvas js 绘图插件_看完这篇，你也可以实现一个360度全景插件（一）原理篇

导读

本文从绘图基础开始讲起，详细介绍了如何使用Three.js开发一个功能齐全的全景插件。

我们先来看一下插件的效果：

如果你对Three.js已经很熟悉了，或者你想跳过基础理论，那么你可以直接从全景预览开始看起。

本项目的github地址：https://github.com/ConardLi/tpanorama

#一、理清关系

#1.1 OpenGL

OpenGL是用于渲染2D、3D量图形的跨语言、跨平台的应用程序编程接口(API)。

这个接口由近350个不同的函数调用组成，用来从简单的图形比特绘制复杂的三维景象。

OpenGL ES 是OpenGL三维图形API的子集，针对手机、PDA和游戏主机等嵌入式设备而设计。

基于OpenGL，一般使用C或Cpp开发，对前端开发者来说不是很友好。

#1.2 WebGL

WebGL把JavaScript和OpenGL ES 2.0结合在一起，从而为前端开发者提供了使用JavaScript编写3D效果的能力。

WebGL为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

#1.3 Canvas

Canvas是一个可以自由制定大小的矩形区域，可以通过JavaScript可以对矩形区域进行操作，可以自由的绘制图形，文字等。

一般使用Canvas都是使用它的2d的context功能，进行2d绘图，这是其本身的能力。

和这个相对的，WebGL是三维，可以描画3D图形，WebGL，想要在浏览器上进行呈现，它必须需要一个载体，这个载体就是Canvas，区别于之前的2dcontext，还可以从Canvas中获取webglcontext。

#1.4 Three.js

我们先来从字面意思理解下：Three代表3D，js代表JavaScript，即使用JavaScript来开发3D效果。

Three.js是使用JavaScript对 WebGL接口进行封装与简化而形成的一个易用的3D库。

直接使用WebGL进行开发对于开发者来说成本相对来说是比较高的，它需要你掌握较多的计算机图形学知识。

Three.js在一定程度上简化了一些规范和难以理解的概念，对很多API进行了简化，这大大降低了学习和开发三维效果成本。

下面我们来具体看一下使用Three.js必须要知道的知识。

#二、Three.js基础知识

使用Three.js绘制一个三维效果，至少需要以下几个步骤：

• 创建一个容纳三维空间的场景 — Sence
• 将需要绘制的元素加入到场景中，对元素的形状、材料、阴影等进行设置
• 给定一个观察场景的位置，以及观察角度，我们用相机对象(Camera)来控制
• 将绘制好的元素使用渲染器(Renderer)进行渲染，最终呈现在浏览器上

拿电影来类比的话，场景对应于整个布景空间，相机是拍摄镜头，渲染器用来把拍摄好的场景转换成胶卷。

#2.1 场景

场景允许你设置哪些对象被three.js渲染以及渲染在哪里。

我们在场景中放置对象、灯光和相机。

很简单，直接创建一个Scene的实例即可。