Three.js入门篇之1 - WebGL on HTML

最新推荐文章于 2024-08-09 10:32:16 发布

allenjiao

最新推荐文章于 2024-08-09 10:32:16 发布

阅读量534

点赞数

分类专栏： webgl

webgl 专栏收录该内容

37 篇文章 12 订阅

订阅专栏

一. 何为WebGL？

WebGL 是基于Web的三维渲染接口，与OpenGL的不同之处在于，添加了对 JavaScript 的支持，能够为 HTML5 提供硬件加速的三维图形渲染（通过Canvas来和DOM打交道）。

WebGL 是基于 OpenGL ES 2.0 的 Javascript API。通过 HTML5 的 Canvas 来和 DOM 打交道。

讲到这里，总结一下：

1. 如果你是OpenGL程序员，学习WebGL对你来讲会是非常简单的；

你只需要熟悉 JS 语法和WebGL对应的API就好了，大多数人两个月能够入门。

2. 如果你只是熟悉 Web，那么GL对你来讲也许是个挑战；

你要熟悉3D坐标系、World-View-Proj 成像、三维渲染流程、Shader等等，也许需要更多的时间。

幸运的是，Three.js 引擎已经为我们提供了底层的封装，你需要提前熟悉三维渲染流程，然后 run demo，这是最好的也是最快的入门流程。

Three.js 已在主流浏览器下得到支持，调试建议用 FireFox 或者 Chrome，下载地址：https://threejs.org/ ，下图是第一个例子效果：

二. Canvas

Canvas是 HTML5 新定义的标签，可以看成是一个矩形绘图容器，支持事件响应与 JavaScript 绘图。

Canvas和GDI绘图接口比较类似，来看下如何采用Canvas绘制一个矩形：

[html]view plain copy
<html>  
<head/>  
<body>  
    <canvas id="Canvas2D"/>  
    <script type="text/javascript">  
        var canv=document.getElementById('Canvas2D');  
        var context=canv.getContext('2d');  
        context.fillStyle='#0000FF';  
        context.fillRect(10,10,120,80);  
    </script>  
</body>  
</html>  

三. 加载 Three.js引擎

通过 Three.js 进行渲染，需要调用 three.js 接口，这是一个 JavaScript库，简要使用方式如下：

[html]view plain copy
<html>  
<head>  
    <script type="text/javascript" src="three.js"></script>  
</head>  
<body>  
    <canvas id="Canvas3D" width="352px" height="288px"/>  
    <script type="text/javascript">  
        // render  
        var renderer = new THREE.WebGLRenderer();  
          
        // scene  
        var scene = new THREE.Scene();  
  
        // camera  
        var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);  
  
        renderer.render(scene, camera);  
    </script>  
</body>  
</html>  