WebGL学习第一集 - Three.js入门

最新推荐文章于 2020-05-28 10:24:00 发布

Yaiba123

最新推荐文章于 2020-05-28 10:24:00 发布

阅读量4.5k

点赞数

分类专栏： # WebGL 前端大杂烩

原文链接：http://www.hewebgl.com/article/getarticle/27

版权

前端大杂烩同时被 2 个专栏收录

69 篇文章 9 订阅

订阅专栏

WebGL

3 篇文章 1 订阅

订阅专栏

OpenGl与WebGL的介绍

OpenGL™ 是行业领域中最为广泛接纳的 2D/3D 图形 API，其自诞生至今已催生了各种计算机平台及设备上的数千优秀应用程序。OpenGL™ 是独立于视窗操作系统或其它操作系统的，亦是网络透明的。在包含CAD、内容创作、能源、娱乐、游戏开发、制造业、制药业及虚拟现实等行业领域中，OpenGL™ 帮助程序员实现在 PC、工作站、超级计算机等硬件设备上的高性能、极具冲击力的高视觉表现力图形处理软件的开发。

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

最后，我们用自己的话总结一下，什么是WebGL。WebGL是在浏览器中实现三维效果的一套规范。使用WebGL原生的API来写3D程序是一件非常痛苦的事情，幸好，有很多同行花业余时间写了一些WebGL开源框架，其中three.js就是非常优秀的一个。

javascript能写高效率的3D程序吗？
能。技术在进步，几年前也许这是不行，写3D程序，最好是用c++，这样才能保证效率，但是现在，世界改变了。javascript的计算能力因为google的V8引擎得到了迅猛的增强，做3D程序，做服务器都没有问题。如果你对服务器感兴趣，你可以看看nodejs，当然，不是现在。现在，你最好保持热情，将Three.js学精深，在以后的工作学习中做出更大的成绩。

javascript不是在浏览器上运行的吗，那怎么能写3D程序呢？
是的，不错javascript是在浏览器里运行的，但是没有说3D程序就不能在浏览器上运行。浏览器对3D的支持，是一个激动人心的特性，现在，是的，就是现在，你可以写基于浏览器的3D应用了。

（提示：好的3D应用，在腾讯开放平台上，会有一个不错的收入。腾讯开发平台是通过广告和访问量来收费的，你可以写一个好的3D应用，就能够挣一些钱了。）

Three.js嵌入网页

<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>

为了验证Threejs确实启动，我们用Chrome浏览器打开上面的那个网页，浏览器里面什么都没有，这时按F12键，打开调试窗口，并在Console下输入 THREE.REVISION命令，得到73，这表示现在使用的three.js文件的版本是73。

三大组建
在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
记住关建语句：有了这三样东西，我们才能够使用相机将场景渲染到网页上去。
创建这三要素的代码如下：

var scene = new THREE.Scene();  // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
var renderer = new THREE.WebGLRenderer();   // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);    // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild(renderer.domElement);

栗子1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</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();

        /*关系，Three.js中的场景是一个物体的容器，
        开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。
        相机的作用就是面对场景，在场景中取一个合适的景，把它拍下来。
        渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。*/
		
        // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
        renderer.setSize(window.innerWidth, window.innerHeight);
		
        /* （注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。）*/
        document.body.appendChild(renderer.domElement);



        // CubeGeometry是一个正方体或者长方体，究竟是什么，由它的3个参数所决定width, height, depth
        var geometry = new THREE.CubeGeometry(1,1,1);

         // 基本材质
        var material = new THREE.MeshBasicMaterial({color: 0xC0C0C0});

        // 将模型和贴图结合
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);

        // 位置 camera.position.x（y、z）或 mesh.position.set(x, y, z)
        camera.position.z = 5;

        // 渲染循环
        // 渲染有两种方式：实时渲染和离线渲染 。
        // 先看看离线渲染，想想《西游降魔篇》中最后的佛主，他肯定不是真的，是电脑渲染出来的，其画面质量是很高的，它是事先渲染好一帧一帧的图片，然后再把图片拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片，那么电影播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出这种高质量的图片。
        function render() {
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;

            // 渲染
            // 渲染函数的原型如下：render( scene, camera, renderTarget, forceClear )
            // forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
            renderer.render(scene, camera);

            // requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数
            requestAnimationFrame(render);
        }
        render();
    </script>
</body>
</html>

栗子2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Three框架</title>
		<script src="js/Three.js"></script>
		<style type="text/css">
			div#canvas-frame {
				border: none;
				cursor: pointer;
				width: 100%;
				height: 600px;
				background-color: #EEEEEE;
			}

		</style>
		<script>
            // 渲染器
            var renderer;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    // antialias平滑
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xF2F2F2, 1.0);
            }

            // 透视相机
            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 1000;
                camera.position.z = 0;
                camera.up.x = 0;
                camera.up.y = 0;
                camera.up.z = 1;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });
            }

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

            // 光照
            var light;
            function initLight() {
                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
                light.position.set(100, 100, 200);
                scene.add(light);
            }

            // 几何形状
            var cube;
            function initObject() {

                // 声明了一个几何体geometry
                var geometry = new THREE.Geometry();

                // 定义一种线条的材质，使用THREE.LineBasicMaterial类型来定义，它接受一个集合作为参数，其原型如下：LineBasicMaterial( parameters )
                // VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值
                var material = new THREE.LineBasicMaterial( { vertexColors: true } );

                var color1 = new THREE.Color( 0x444444 );
                var color2 = new THREE.Color( 0xFF0000 );

                // 定义2个顶点的位置，并放到geometry中
                var p1 = new THREE.Vector3( -100, 0, 100 );
                var p2 = new THREE.Vector3(  100, 0, -100 );

                // 几何体里面有一个vertices变量，可以用来存放点
                geometry.vertices.push(p1);
                geometry.vertices.push(p2);

                // 定义的2个顶点，设置不同的颜色，必须材质中vertexColors等于THREE.VertexColors 时，颜色才有效，如果vertexColors等于THREE.NoColors时，颜色就没有效果了。那么就会去取材质中color的值，这个很重要，大家一定记住。
                geometry.colors.push( color1, color2 );

                // 定义一条线，第三个参数是一组点的连接方式
                var line = new THREE.Line( geometry, material, THREE.LinePieces );

                // 将这条线加入到场景中
                scene.add(line);
            }

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

		</script>
	</head>

	<body onload="threeStart();">
		<div id="canvas-frame"></div>
	</body>
</html>