Three.js
Three.js 是基于原生 WebGL 封装运行的三维引擎，在所有 WebGL 引擎中，Three.js 是国内文资料最多、使用最广泛的三维引擎。
Three.js 通俗的讲就是制作 3D 效果的 js 插件
兼容性问题
移动端
PC 端
Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge
可以使用 Detector.js 文件进行检测，可在网上进行下载，也可以直接 copy 下面的代码
查看版本：*THREE.REVISION*
Detector.js 代码如下：
/** * @author alteredq / http://alteredqualia.com/ * @author mr.doob / http://mrdoob.com/ */
var Detector = {
canvas: !!window.CanvasRenderingContext2D, webgl: (function () { try { var canvas = document.createElement('canvas'); return !!( window.WebGLRenderingContext && ( canvas.getContext('webgl') || canvas.getContext('experimental-webgl') ) ); } catch (e) { return false; } })(), workers: !!window.Worker, fileapi: window.File && window.FileReader && window.FileList && window.Blob,
getWebGLErrorMessage: function () {
var element = document.createElement('div'); element.id = 'webgl-error-message'; element.style.fontFamily = 'monospace'; element.style.fontSize = '13px'; element.style.fontWeight = 'normal'; element.style.textAlign = 'center'; element.style.background = '#ffd598'; element.style.color = '#000'; element.style.padding = '1em 0'; element.style.position = 'absolute'; element.style.top = '0'; element.style.left = '0'; element.style.width = '100%'; element.style.zIndex = '10';
if (!this.webgl) { element.innerHTML = window.WebGLRenderingContext ? '您的显卡似乎不支持 <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>。<br />点击 <a href="http://get.webgl.org/" style="color:#000">这里</a> 查看如何获取WebGL支持' : '您的浏览器似乎不支持 <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>。<br />点击 <a href="http://get.webgl.org/" style="color:#000">这里</a> 查看如何获取WebGL支持'; } return element;
},
addGetWebGLMessage: function (parameters) { var parent, id, element; parameters = parameters || {}; parent = parameters.parent !== undefined ? parameters.parent : document.body; id = parameters.id !== undefined ? parameters.id : 'oldie'; element = Detector.getWebGLErrorMessage(); element.id = id; parent.appendChild(element); }};
复制代码
使用 Detector.js 测试代码
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/Detector.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> if (Detector.webgl) { } else { var warning = Detector.getWebGLErrorMessage(); document.getElementById('container').appendChild(warning); } </script> </body></html>
复制代码
效果：
Three.js 四大组件
场景 scene
在 Threejs 中场景就只有一种，用 THREE.Scene 来表示，要构件一个场景也很简单，只要 new 一个对象就可以了，代码如下：var scene = new THREE.Scene();
相当于舞台
相机
相机分为两种：
- 透视相机：透视投影符合人们心理习惯，即离视点近的物体大，离视点远的物体小，远到极点即为消失，成为灭点。透视相机并非真的“透视”
- 正投影相机：就是远处和近处是一样大的。
渲染器
渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制
相当于一个画笔，将内容绘制在画布也就是场景之上
渲染有两种方式：实时渲染和离线渲染 。
先看看离线渲染，想想《西游降魔篇》中最后的佛主，他肯定不是真的，是电脑渲染出来的，其画面质量是很高的，它是事先渲染好一帧一帧的图片，然后再把图片拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片，那么电影播放得会很卡。CPU 和 GPU 根本没有能力在播放的时候渲染出这种高质量的图片。
实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。
物体
物体是要绘制到 scene 场景中的东西，比如最简单的 Geometry 立方体或者圆体，也可以导入 3D 模型。
几何体本质
查看下面一段代码，你可以看出来立方体网格模型 Mesh 是由立方体几何体 geometry 和材质 material 两部分构成，立方体几何体 BoxGeometry 本质上就是一系列的顶点构成，只是 Threejs 的 APIBoxGeometry 把顶点的生成细节封装了，用户可以直接使用。比如一个立方体网格模型，有 6 个面，每个面至少两个三角形拼成一个矩形平面，每个三角形三个顶点构成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。
参考：Three.js - EdgesGeometry 几何体边框辅助线
代码：
<body> <div id="app"></div> <script> // 创建场景 var scene = new THREE.Scene(); // 创建相机 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素 camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000); // 渲染器 // 把眼睛看到的大千世界绘制到HTML页面中 render = new THREE.WebGLRenderer({ antialias: true }); // 计算处理dpi render.setPixelRatio(window.devicePixelRatio); // 设置画布大小 render.setSize(window.innerWidth, window.innerHeight) var app = document.getElementById("app"); // 绘制出一个canvas小面板 app.appendChild(render.domElement); // 创造一个立方体, 点模型 var geometry = new THREE.CylinderGeometry(10, 10, 20, 15); //创建一个立方体几何对象Geometry // 创造一个立方体, 网格模型 var material3 = new THREE.MeshBasicMaterial({ color: 0xffff00, }); var meshs = new THREE.Mesh(geometry, material3); // 创建物体的边框线 var geoEdges = new THREE.EdgesGeometry(geometry, 1); var edgesMtl = new THREE.LineBasicMaterial({color: 0xff0000}); var geoLine = new THREE.LineSegments(geoEdges, edgesMtl); meshs.add(geoLine); scene.add(meshs); //执行渲染操作 指定场景、相机作为参数 camera.position.z = 40; camera.position.y = 20; camera.position.x = 0; render.render(scene, camera); // 产生动效 function animate(){ render.render(scene, camera); } setInterval(animate,100); </script></body>
复制代码
效果：
评论