webgl初始

18 篇文章 0 订阅

一,什么是WebGL

    WebGL(全写Web Graphics Library)是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。


     webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,由于其易用性被广泛应用。如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。


二,html5 canvas和webgl和three.js有什么区别

其实三者是有联系的,canvas是h5定义的新标签。webgl要依赖于canvas运行。而three.js是webGL的一个库。


三,three.js的入门,我们核心的步骤就是:

1.设置three.js渲染器(三大组件)

2.设置摄像机camera(三大组件)

3.设置场景scene(三大组件)

4.设置光源light

5.设置物体object

6.渲染


开始前先检查设备浏览器是否支持WebGL

if (Detector.webgl) {

init();

animate();

} else {

var warning = Detector.getWebGLErrorMessage();

document.getElementById('container').appendChild(warning);

}


1,渲染器

渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个domElement挂接在定义的div下面,这样渲染的结果就能够在页面中显示了。

var renderer;
function initThree() {
    width = document.getElementById("canvas_frame").clientWidth;
    height = document.getElementById("canvas_frame").clientHeight;
    renderer = new THREE.WebGLRenderer({
        antialias : true
    });
    renderer.setSize(width,height);
    document.getElementById("canvas_frame").appendChild(renderer.domElement);
    renderer.setClearColor(0xFFFFFF, 1.0);
}


2,摄像机

场景只有一种,但是相机却又很多种。

       var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.z = 1000; //只能看到y上的线
        }


3,场景

var scene;
function initScene() {
    scene = new THREE.Scene();
}

4,光源

光源非必需


5,物体

        var cube;
        function initObject() {
         
          var geometry = new THREE.CubeGeometry(1,1,1);
             var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
             cube = new THREE.Mesh(geometry, material);
          scene.add(cube);
}



6,开始渲染函数


终于到了最后一步,这一步做完后,就可以该干嘛干嘛去了。

渲染应该使用渲染器,结合相机和场景来得到结果画面。实现这个功能的函数是

render( scene, camera, renderTarget, forceClear )

各个参数的意义是:

scene:前面定义的场景

camera:前面定义的相机

renderTarget:渲染的目标,默认是渲染到前面定义的render变量中

forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。


function threeStart() {
    initThree();
    initScene();
    initCamera();
    initObject();
    renderer.clear();
    renderer.render(scene, camera);
}

渲染有两种方式:实时渲染和离线渲染 。

实时渲染:就是需要不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染:

function render() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

其中一个重要的函数是requestAnimationFrame,这个函数就是让浏览器去执行一次参数中的函数,这样通过上面render中调用requestAnimationFrame()函数,requestAnimationFrame()函数又让rander()再执行一次,就形成了我们通常所说的游戏循环了。



http://www.hewebgl.com/article/getarticle/50


http://www.bubuko.com/infodetail-1837020.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值