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

mtunique 发布于2019-08-23 17:06 / 3432人阅读

摘要：学习学习笔记介绍是一种绘图协议，它把和结合在一起，通过增加的一个绑定，可以为提供硬件加速渲染。环境搭建为了以后的学习方便，首先是搭建一个万能框架，所有的开发都可以在此框架上进行。

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开发都可以在此框架上进行。




    
    Three.js

其中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程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103814.html

SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
WebGL three.js学习笔记使用粒子系统模拟时空隧道（虫洞）

摘要：学习笔记使用粒子系统模拟时空隧道本例的运行结果如图时空隧道演示地址的粒子系统的粒子系统主要是依靠精灵体来创建的，要实现中的粒子系统创建，一般有两种方式。 WebGL three.js学习笔记使用粒子系统模拟时空隧道本例的运行结果如图：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...

Guakin_Huang 2019-08-23 17:10 评论0 收藏0
WebGL three.js学习笔记自定义顶点建立几何体

摘要：自定义顶点建立几何体与克隆本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，也是可以的。并且不仅要更新顶点，还要更新线条的连接方式，否则是没有效果的。自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，Three.js也是可以的。基本效果...

joyvw 2019-08-23 17:06 评论0 收藏0
WebGL three.js学习笔记法向量网格材质MeshNormalMaterial的介绍和创建

摘要：学习学习笔记点击查看演示地址简单网格材质是一种不受渲染时使用的颜色影响的材质，它只与自己每一个面从内到外的法向量有关。法向量在中用处十分广泛，光的反射，以及三维图形的纹理映射都与这个有关。 WebGL学习----Three.js学习笔记（5）点击查看demo演示 Demo地址：https://nsytsqdtn.github.io/d... 简单网格材质 MeshNormalMat...

陆斌 2019-08-23 17:07 评论0 收藏0