WebGL three.js学习笔记建立three.js代码的基本框架

时间 2019-11-07

标签 webgl three.js 学习笔记建立代码基本框架栏目 JavaScript 繁體版

原文原文链接

WebGL学习----Three.js学习笔记（1）

webgl介绍

WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一块儿，经过增长OpenGL ES 2.0的一个JavaScript绑定，WebGL能够为HTML5 Canvas提供硬件3D加速渲染。javascript

WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于建立具备复杂3D结构的网站页面，甚至能够用来设计3D网页游戏。
原生的WebGl比较复杂，主要经过对顶点着色器和片元着色器的操做，来实现渲染，但实现起来比较复杂，须要必定的数学基础，但更多的是须要学习基础的耐心。css

Three.js介绍

Three.js是一个js的开源框架，它把webgl的全部东西都封装好了，咱们再也不须要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，并且很容易就能学习，相对于原生的webgl花100多行代码画几个三角形，Three.js只须要几行代码就能实现更复杂的3D效果。html

下载地址： https://github.com/mrdoob/three.js。java

环境搭建

为了之后的学习方便，首先是搭建一个万能框架，全部的three.js开发均可以在此框架上进行。git

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <title>Three.js</title>
 6    <script src="../../../Import/three.js"></script>
 7    <script src="../../../Import/stats.js"></script>
 8    <script src="../../../Import/Setting.js"></script>
 9    <style type="text/css">
10        div#canvas-frame {
11            border: none;
12            cursor: pointer;
13            width: 100%;
14            height: 850px;
15            background-color: #333333;
16        }
17    </style>
18    <script>
19        let renderer;
20        function initThree() {
21           //TODO
22        }
23        let camera;
24        function initCamera() {
25           //TODO
26        }
27        let scene;
28        function initScene() {
29           //TODO
30        }
31        let light;
32        function initLight() {
33           //TODO
34        }
35        let cube;
36        function initObject() {
37           //TODO
38        }
39
40        //提早定义好的一个功能文件，方便之后的每个程序调用
41        function initSetting() {
42        loadAutoScreen(camera,renderer);//自适应屏幕
43        loadFullScreen();//网页全屏播放
44        loadStats();//性能检测插件
45        }
46
47        function threeStart() {
48            initSetting();
49            initThree();
50            initCamera();
51            initScene();
52            initLight();
53            initObject();
54            animation();
55        }
56
57        function animation(){
58            renderer.clear();
59            renderer.render(scene,camera);
60            stats.update();
61            requestAnimationFrame(animation);
62        }
63
64    </script>
65
66</head>
67<body onload="threeStart()">
68<div id="canvas-frame"></div>
69</body>
70</html>
复制代码

其中Setting.js是我写在另外一个文件里面的功能文件，把一些经常使用的功能放在里面，方便之后写的程序能够直接去调用
Setting.js的代码以下：github

 1//进入全屏模式的函数
 2function loadFullScreen() {
 3    //进入全屏
 4    function requestFullScreen(element) {
 5        let de = document.querySelector(element) || document.documentElement;
 6        if (de.requestFullscreen) {
 7            de.requestFullscreen();
 8        } else if (de.mozRequestFullScreen) {
 9            de.mozRequestFullScreen();
10        } else if (de.webkitRequestFullScreen) {
11            de.webkitRequestFullScreen();
12        }
13    }
14
15//退出全屏
16    function exitFullscreen(element) {
17        let de = document.querySelector(element) || document.documentElement;
18        if (de.exitFullscreen) {
19            de.exitFullscreen();
20        } else if (de.mozCancelFullScreen) {
21            de.mozCancelFullScreen();
22        } else if (de.webkitCancelFullScreen) {
23            de.webkitCancelFullScreen();
24        }
25    }
26    //监听事件
27    document.onkeydown = function (ev) {
28        keydownForScreen(ev);
29    }
30    //按键检测，112对应键盘的F2，能够检测其余的键位
31    function keydownForScreen(ev) {
32        if (ev.keyCode == 113) {
33            requestFullScreen();
34            requestFullScreen('body');
35            requestFullScreen('#main');
36        }
37    }
38}
39
40//加载性能监视器的函数
41function loadStats() {
42    stats = new Stats();
43    stats.domElement.style.position = 'absolute';
44    stats.domElement.style.left = '8px';
45    stats.domElement.style.top = '8px';
46    let body = document.getElementsByTagName('body');
47    body[0].appendChild(stats.domElement);
48}
49
50//屏幕适应的函数
51function loadAutoScreen(camera, renderer) {
52    window.addEventListener('resize', onResize, false);
53
54    function onResize() {
55        camera.aspect = window.innerWidth / window.innerHeight;
56        camera.updateProjectionMatrix();
57        renderer.setSize(window.innerWidth, window.innerHeight);
58    }
59}
复制代码

还有另外一个引入的文件stats.js的下载地址：https://github.com/mrdoob/stats.jsweb

至此，一个万能的架子就已经搭建完成，能够开始编写第一个three.js程序canvas

WebGL three.js学习笔记 建立three.js代码的基本框架

WebGL学习----Three.js学习笔记（1）

webgl介绍

Three.js介绍

环境搭建

WebGL three.js学习笔记建立three.js代码的基本框架