1 WebGL框架three.js优势简介

2018-02-07 23:43:08 人阅读

案例查看有问题?
全屏试试!

案例解析

 从今天开始,我学习WebGL基础将占时告一段落,开始学习WebGL的流行框架three.js。经验告诉我,学习一种语言,如果入门能力差,最好从框架开始学,虽然会被掩盖很多的原理方面的东西,但是,你能直接做出来一些东西,给自己充足的信心,能让自己做下去。如果你连东西都做不出来,时间长了肯定会想着放弃,学习框架可以使使学习的坡度前期不会那么陡。直接用原生搞,学了好些天,连立方体都画不出来,用框架直接一天就出来了。等你能做着东西再了解原理,何乐不为呢。

那么,three.js有那些特点呢?

(1)three.js掩盖了3D渲染的细节。

three.js将WebGL原生API的细节抽象化,将3D场景拆解为网格、材质和光源(即它内置了图形编程常用的一些对象种类)。

(2)three.js是面向对象的。

开发者可以使用上层的JavaScript对象,而不是仅仅调用JavaScript函数。

(3)three.js功能非常丰富。

除了封装WebGL原始API之外,three.js还包含了许多使用的内置对象,可以方便地应用于游戏开发、动画制作、幻灯片制作、高分辨率模型和一些特殊的视觉效果制作。

(4)three.js速度很快。

three.js采用了3D图形最佳实践来证明在不失可用性的前提下,保持极高的性能。

(5)three.js支持交互。

WebGL本身并不提供拾取(picking)功能(即是否知道鼠标正处于某个物体上)。而three.js则固化了拾取支持,这就使得你可以轻松为你的应用添加交互功能。

(6)three.js包含数学库

three.js拥有一个强大易用的数学库,你可以在其中进行矩阵、投影和矢量运算。

(7)three.js内置文件格式支持。

你可以使用流行的3D建模软件导出文本格式的文件,然后使用three.js加载,也可以使用three.js自己的JSON格式或二进制格式。

(8)three.js扩展性很强

为three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构,那么直需要封装到three.js即可。

(9)three.js同时支持HTML5 2D Canvas

尽管WebGL日益流行,但是仍然有一些环境尚未支持。three.js可以同时在2D画布中渲染大部分的3D内容,尤其是在那些无法成功获取3D上下文的地方,可以让你的代码平滑的回滚到其他解决方案。

缺点:

three.js不是一个游戏引擎,也不是一个虚拟现实平台。它缺少一些在这些系统中常用的特性,比如公告板、头像和物理引擎。如果需要这些东西,需要自己对three.js进行二次封装了。

 

介绍three.js框架的好处就说到这吧,总之,在我的想法里面,three.js对于WebGL就相当于jquery对于js。让你能够忘记原生的好框架。

如果你还想继续了解three.js,请去three.js官网查看一下案例,会让你燃起前所未有的热情的。

主要是,three.js比webgl简单多了

案例源代码


                        

 

 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/lib/three.js"></script>
    <style>
        body{margin:0;}
        canvas{width: 100%; height:100%; display: block;}
    </style>
</head>
<body>
<script>
    //创建场景
    var scene = new THREE.Scene();
    //设置相机(视野,显示口的宽高比,近裁剪面,远裁剪面)
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    //渲染器
    var renderer = new THREE.WebGLRenderer({antialias: true});
    //设置渲染器的高度和宽度,如果加上第三个值 false,则按场景大小显示,等比例缩放
    renderer.setSize( window.innerWidth, window.innerHeight,false);
    //将渲染器添加到html当中
    document.body.appendChild( renderer.domElement );
 
    //盒子模型(BoxGeometry),这是一个包含立方体所有顶点和填充面的对象。
    var geometry = new THREE.BoxGeometry( 1, 2, 1 );
    //使用网孔基础材料(MeshBasicMaterial)进行着色器,这里只绘制了一个绿色
    var material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
    //使用网孔(Mesh)来承载几何模型
    var cube = new THREE.Mesh( geometry, material );
    //将模型添加到场景当中
    scene.add( cube );
    //将相机沿z轴偏移5
    camera.position.z = 5;
 
    //设置一个动画函数
    var animate = function () {
        //一秒钟调用60次,也就是以每秒60帧的频率来绘制场景。
        requestAnimationFrame( animate );
 
        //console.log(cube.rotation);
        //每次调用模型的沿xy轴旋转0.01
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        //使用渲染器把场景和相机都渲染出来
        renderer.render(scene, camera);
    };
 
    animate();
</script>
</body>
</html>
展开内容

CSDN的网页地址

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多