WebGL进修—-Three.js进修笔记（1）
webgl引见
WebGL是一种3D画图协定，它把JavaScript和OpenGL ES 2.0连系在一起，经由过程增添OpenGL ES 2.0的一个JavaScript绑定，WebGL可认为HTML5 Canvas供应硬件3D加快衬着。
WebGL技术标准免去了开辟网页专用衬着插件的贫苦，可被用于建立具有庞杂3D构造的网站页面，以至能够用来设想3D网页游戏。
原生的WebGl比较庞杂，重要经由过程对极点着色器和片元着色器的操纵，来完成衬着，但完成起来比较庞杂，须要肯定的数学基本，但更多的是须要进修基本的耐烦。
Three.js引见
Three.js是一个js的开源框架，它把webgl的一切东西都封装好了，我们不再须要去相识webgl那些比较贫苦的细节，直接在此框架上举行开辟，既轻易，又快速，而且很轻易就可以进修，相对于原生的webgl花100多行代码画几个三角形，Three.js只须要几行代码就可以完成更庞杂的3D结果。
下载地点： https://github.com/mrdoob/thr…。
环境搭建
为了今后的进修轻易，首先是搭建一个全能框架，一切的three.js开辟都能够在此框架上举行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js</title>
<script src="../../../Import/three.js"></script>
<script src="../../../Import/stats.js"></script>
<script src="../../../Import/Setting.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 850px;
background-color: #333333;
}
</style>
<script>
let renderer;
function initThree() {
//TODO
}
let camera;
function initCamera() {
//TODO
}
let scene;
function initScene() {
//TODO
}
let light;
function initLight() {
//TODO
}
let cube;
function initObject() {
//TODO
}
//提早定义好的一个功用文件，轻易今后的每个顺序挪用
function initSetting() {
loadAutoScreen(camera,renderer);//自顺应屏幕
loadFullScreen();//网页全屏播放
loadStats();//机能检测插件
}
function threeStart() {
initSetting();
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();
}
function animation(){
renderer.clear();
renderer.render(scene,camera);
stats.update();
requestAnimationFrame(animation);
}
</script>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
</body>
</html>个中Setting.js是我写在另一个文件内里的功用文件，把一些经常使用的功用放在内里，轻易今后写的顺序能够直接去挪用
Setting.js的代码以下：
//进入全屏形式的函数
function loadFullScreen() {
//进入全屏
function requestFullScreen(element) {
let de = document.querySelector(element) || document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
}
//退出全屏
function exitFullscreen(element) {
let de = document.querySelector(element) || document.documentElement;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
//监听事宜
document.onkeydown = function (ev) {
keydownForScreen(ev);
}
//按键检测，112对应键盘的F2，能够检测其他的键位
function keydownForScreen(ev) {
if (ev.keyCode == 113) {
requestFullScreen();
requestFullScreen('body');
requestFullScreen('#main');
}
}
}
//加载机能监视器的函数
function loadStats() {
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '8px';
stats.domElement.style.top = '8px';
let body = document.getElementsByTagName('body');
body[0].appendChild(stats.domElement);
}
//屏幕顺应的函数
function loadAutoScreen(camera, renderer) {
window.addEventListener('resize', onResize, false);
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
}另有另一个引入的文件stats.js的下载地点：https://github.com/mrdoob/sta…
至此，一个全能的架子就已搭建完成，能够最先编写第一个three.js顺序
