第1章 开启Threejs之旅(二)

1、介绍WebGL基础。

2、介绍WebGL中的骑兵Three.js。

3、了解Three.js的简单实例。

9、第一个框架

为了方便实验,我们提供了2个简单的框架供你使用。你只要改变其中的一些代码或者参数,就能够得到实验的结果。第一个框架的效果是显示一个绿色的正方体,你可以在【初级教程\chapter1\1-2.html】中找到。

<!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();
		
        renderer.setSize(window.innerWidth, window.innerHeight);
		
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>


它的效果如下所示,注意不同版本的three.js,默认的背景色可能不一样,新版本的背景色可能是黑色:

这个旋转的立方体算我们踏入WebGL这个神奇的世界的开始。借助于three.js,我们并没有写太多的代码就完成了这个示例。现在,我们来分析它。

1、三大组建

在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);


在Threejs中场景就只有一种,用THREE.Scene来表示,要构件一个场景也很简单,只要new一个对象就可以了,代码如下:

var scene = new THREE.Scene();

场景是所有物体的容器,如果要显示一个苹果,就需要将苹果对象加入场景中。

2、相机

另一个组建是相机,相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样,人站在不同位置,抬头或者低头都能够看到不同的景色。

场景只有一种,但是相机却又很多种。和现实中一样,不同的相机确定了呈相的各个方面。比如有的相机适合人像,有的相机适合风景,专业的摄影师根据实际用途不一样,选择不同的相机。对程序员来说,只要设置不同的相机参数,就能够让相机产生不一样的效果。

在Threejs中有多种相机,这里介绍两种,它们是:

透视相机(THREE.PerspectiveCamera)、这里我们使用一个透视相机,透视相机的参数很多,这里先不详细讲解。后面关于相机的那一章,我们会花大力气来讲。定义一个相机的代码如下所示:(已经迫不及待想看看相机的参数了,点这里)

 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);


3、渲染器

最后一步就是设置渲染器,渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制。这里我们定义了一个WebRenderer渲染器,代码如下所示:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


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

4、添加物体到场景中

那现在,我们将一个物体添加到场景中:

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


代码中出现了THREE.CubeGeometry,THREE.CubeGeometry是什么东东,他是一个几何体,几何体由什么组成,已经不是本课的主要内容了,后面的课程我们会详细的学到。不过这里你只需要知道CubeGeometry是一个正方体或者长方体,究竟是什么,由它的3个参数所决定,cubeGeometry的原型如下代码所示:

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

width:立方体x轴的长度

height:立方体y轴的长度

depth:立方体z轴的深度,也就是长度

想一想大家就明白,以上3个参数就能够确定一个立方体。

剩下的几个参数就要费解和复杂一些了,不过后面我们会自己来写一个立方体,到时候,你会更明白这些参数的意义,这里你可以将这些参数省略。

5、渲染

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

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

renderer.render(scene, camera);

渲染函数的原型如下:

render( scene, camera, renderTarget, forceClear )

各个参数的意义是:

scene:前面定义的场景

camera:前面定义的相机

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

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

6、渲染循环

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

先看看离线渲染,想想《西游降魔篇》中最后的佛主,他肯定不是真的,是电脑渲染出来的,其画面质量是很高的,它是事先渲染好一帧一帧的图片,然后再把图片拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片,那么电影播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出这种高质量的图片。

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

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

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

如不能理解游戏循环,请在这里提问。

10、场景,相机,渲染器之间的关系

Three.js中的场景是一个物体的容器,开发者可以将需要的角色放入场景中,例如苹果,葡萄。同时,角色自身也管理着其在场景中的位置。

相机的作用就是面对场景,在场景中取一个合适的景,把它拍下来。

渲染器的作用就是将相机拍摄下来的图片,放到浏览器中去显示。他们三者的关系如下图所示:

11、第二个框架(重构)

第一个框架是将所有代码在一段脚本中完成,当逻辑复杂一点后,就比较难读懂。所以,我们将其按照功能分解成函数,代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Three框架</title>
		<script src="js/Three.js" data-ke-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 : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 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() {

                var geometry = new THREE.Geometry();
                var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );
                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

                // 线的材质可以由2点的颜色决定
                var p1 = new THREE.Vector3( -100, 0, 100 );
                var p2 = new THREE.Vector3(  100, 0, -100 );
                geometry.vertices.push(p1);
                geometry.vertices.push(p2);
                geometry.colors.push( color1, color2 );

                var line = new THREE.Line( geometry, material, THREE.LinePieces );
                scene.add(line);
            }
            function render()
            {
                renderer.clear();
                renderer.render(scene, camera);
                requestAnimationFrame(render);
            }
            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                render();
            }

		</script>
	</head>

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


大概了解一下就可以了,它只是将框架一的代码,放到了不同的函数中,最终通过threeStart()函数调用而已。这段比较规范的代码在以后的例子中可能会用到。

12、结尾

本章即将结束,我相信,你应该学到了一些东西,至少你能写一个html,并且加上three.js,让它运行起来。非常高兴为你献上了本节的内容。 快点收藏本网站吧,因为“再过五十年我就是古董了,所以你趁现在赶紧好好收藏我吧”。

如果,你觉得本章不错,欢迎你分享到你的QQ空间,或者微博里面去。

[1楼] goat** 2016-07-26 21:52

没有人在这个网站学习么?

[2楼] xiol** 2016-08-14 21:35

说好介绍两种相机的,另一种呢?

[3楼] Medi** 2016-08-16 12:53

都说了在另一章介绍

[4楼] elle** 2016-08-26 16:31

今天初次接触webGL,看了两章了,希望自己加油、、

[5楼] zhao** 2016-09-12 17:46

老是提three.js里有报错。这怎么解决啊,最简单的例子都出不来

[6楼] ice1** 2016-09-26 10:23

报错应该是你的three.js文件位置和他设置的不一样吧

[7楼] 1839** 2016-10-05 21:19

老师你好,我想知道怎么才能在webstorm里,会有three.js的代码提示,我跟着视频做的时候都要一个个字母敲出来,太长的根本记不下来

[8楼] 王红12** 2016-10-22 15:11

我之前没有看过那个threejs 的书,直接看这个也可以吗,其中的那些基本元素我需要看书吗

[9楼] Big丶** 2016-10-28 09:56

Refused to execute script from 'https://raw.github.com/mrdoob/three.js/master/build/three.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.


报上面错的解决方法:把

https://raw.github.com/mrdoob/three.js/master/build/three.js改为https://rawgithub.com/mrdoob/three.js/master/build/three.js

[10楼] woni** 2016-12-03 15:14

老师你好。我想问一下:为什么requestAnimationFrame()函数既可以放在render()的第一行,也可以放在最后一行?不是应该只有放在最后一行才是正确的吗?为什么把它放在function  render()的 第一行的时候,render()的后续代码会执行?

 

[11楼] Zhan** 2016-12-07 15:25

老师您好,这段代码在运行时会提示Uncaught TypeError: Cannot read property 'lookAT' of undefined?

请问这是什么原因呢?

[12楼] 凯尔萨斯** 2017-01-09 15:53

嘿嘿

[13楼] 芸豆子s** 2017-02-06 17:11

渲染一根线,为什么要配置光源?可以不配么?

[14楼] ding** 2017-02-20 17:18

大拿们你好,我是一个JAVA开发人员,之前从未了解3D,WebGl,three.js这块,这次是由于项目需要,需做一个人工交互的场景,其中就是通过问题以及答案给出相应的3D效果出来;

哈哈,说了这么多,其实就是要了解下什么是游戏循环。。。顺便请问一下,我的这个需求3D这块你妹这边有什么好的建议没有?比如说从哪方面入手。。。。

[15楼] gent** 2017-03-28 12:54

我chrome控制台报错啊:“

THREE.WebGLRenderer 73

three.js:21432 THREE.WebGLRenderer: Error creating WebGL context.

THREE.WebGLRenderer @ three.js:21432

initThree @ testDemo1.html:11

threeStart @ testDemo1.html:71

onload @ testDemo1.html:95

three.js:25239 Uncaught TypeError: Cannot read property 'getExtension' of null

    at THREE.WebGLExtensions.get (three.js:25239)

    at new THREE.WebGLRenderer (three.js:21438)

    at initThree (testDemo1.html:11)

    at threeStart (testDemo1.html:71)

    at onload (testDemo1.html:95)

get @ three.js:25239

THREE.WebGLRenderer @ three.js:21438

initThree @ testDemo1.html:11

threeStart @ testDemo1.html:71

onload @ testDemo1.html:95


将“WebGLRenderer”改成“CanvasRenderer”还是报错:“THREE.CanvasRenderer has been moved to /examples/js/renderers/CanvasRenderer.js”

这怎么办啊??

提问或评论

登陆后才可留言或提问哦:) 登陆 | 注册 登陆后请返回本课提问
用户名
密   码
验证码