Three.js初体验——VR全景展示

前言

Three.js 是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

Three.js中文教程：http://www.webgl3d.cn/Three.js/
Three.js相机控件OrbitControls：http://www.yanhuangxueyuan.com/doc/Three.js/OrbitControls.html

---

一、基本知识

这里只介绍了等下的实例用到的内容，想更好的学习还是自行阅读API文档比较好。

为了真正能够让场景借助three.js来进行显示，需要以下几个对象：场景、相机和渲染器，这样就能透过摄像机渲染出场景。

1.场景对象scene

var scene = new THREE.Scene();

2.相机对象camera

常用的相机对象就是正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。
无论正投影相机还是透视投影相机本质上都是对视图矩阵、投影矩阵的封装。
通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作。

var camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
camera.position.set(0, 0, 0.01);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

//PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
//构造函数参数
//fov：视场角
//aspect：视场宽高比（一般用 画布宽/画布 高即可）
//near：能看多近
//far：能看多远
//这几个参数决定了哪些scene里的三维顶点会被渲染/绘制出来

3.渲染器对象renderer

将camera在scene里看到的内容渲染/绘制到画布上

var renderer = new THREE.WebGLRenderer();
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
//document.getElementById("container").appendChild(renderer.domElement);

4.几何体geometry

//创建一个立方体几何对象
var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), basicMaterials);
//创建一个球体几何对象
var sphere