第8章:动画基础-网格模型旋转的常用技巧和方法

1、WebGL中的几种运动

2、绘制每个面颜色不同的的立方体

3、立方体围绕XYZ轴旋转

1.1 3D世界的运动规律

无论你信不信,3D世界只有三种运动方式:移动、旋转、放大缩小。为了让大家记忆深刻,我们绞尽脑汁,终于用男女之间的那些事将3D世界的运动规律进行了归纳。请看下面的讲解:

放大缩小:仅仅发生在,男人在从事某项耗费精力的事情之前和之后,必须要do的事情。

移动:要么是男的移动,要么是女的移动,男女同事移动也可以。

旋转:如果你愿意,你可以旋转一下,不过,这并不是一件经常需要发生的事情。注意,旋转最重要的一个参数是旋转轴。

本课,我们不讲解放大缩小,移动,因为我个人对这两种运动比较厌倦了。我们这里重点讲一下各种旋转方法。

1.2 课前的调情,准备好必要的实验代码

1 绘制立方体

要想试验旋转,那一定需要一些必要的环境了。男女那些事,你也许需要准确一张床,几个好一些的TT。在我们这一节课中,你需要准备一个正方体,用来旋转所用。这个正方体,可以使用下面的代码生成:

var geometry = new THREE.BoxGeometry( 100, 100, 100 );

本节的效果如下图所示:

WEBGL立方体

你可能还想知道BoxGeometry的原型是什么,如下:

THREE.BoxGeometry = function ( width, height, depth, widthSegments, heightSegments, depthSegments )

下面对BoxGeometry的6个参数进行简要介绍:

width:表示立方体的宽度。

height:表示立方体的高度。

depth:表示立方体的长度或者说深度吧。

widthSegments:宽度分段份数

heightSegments:高度分段份数

depthSegments:长度分段份数

2、为立方体的每个面赋予不同的颜色

为了让大家清楚的看到旋转的方向,我们将立方体的每个面赋上不同的颜色。我们看一下1.html中的代码,如下:

function initObject() {
               
	var geometry = new THREE.BoxGeometry( 100, 100, 100 );
	
	for ( var i = 0; i < geometry.faces.length; i += 2 ) {

		var hex = Math.random() * 0xffffff;
		geometry.faces[ i ].color.setHex( hex );
		geometry.faces[ i + 1 ].color.setHex( hex );

	}
	
	var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
	mesh = new THREE.Mesh( geometry,material);
	mesh.position = new THREE.Vector3(0,0,0);
	scene.add(mesh);
	
}

geometry中有一个face成员,用来存储这个Geometry包含的面。每个面(face)有一个color属性,表示这个面的颜色。

仔细看一下,上面的for循环,它的意思是:将Geometry中的每两个面赋予随机的一种颜色。如下图:

3、每面不同颜色的MeshBasicMaterial材质

要让面的颜色发挥效果,一定要使用MeshBasicMaterial材质,这是一种很基本的材质,可以将颜色渲染到Geometry的表面。这种MeshBasicMaterial材质功能有限,对几何体颜色的支持是很好的。但是如果想给几何体赋予图片纹理,那么MeshBasicMaterial材质就江郎才尽了。

最后讲MeshBasicMaterial材质中的vertexColors设置为THREE.FaceColors,就可以让几何体的每个顶点,使用geometry.faces[i].color中的颜色。通过“vertexColors: THREE.FaceColors”指定了一个面中4个顶点的颜色,在渲染的时候,面的颜色就取四个顶点的插值,因为四个顶点的颜色相同,所以面就是纯色的。

ok,关于这部分的原理,我们后续课程分析three.js引擎实现机制的时候,我们在详细讨论吧。

1.3、完整的代码

我们的基础框架的完整代码如下所示,可以在源码包1.html中找到。

<!DOCTYPE html>
<html>
	<head>
		<!-- 移动相机的位置-->
		<meta charset="UTF-8">
		<title>WebGL中文网</title>
		<script src="js/Three.js"></script>
        <script src="js/Stats.js"></script>
		<script src="js/tween.min.js"></script>

		<style type="text/css">
			div#canvas-frame {
				border: none;
				cursor: pointer;
				width: 100%;
				height: 600px;
				background-color: #EEEEEE;
			}

		</style>
		<script>
			/*
			* 围绕某个 x,y,z轴测试
			*/
			
			
            var renderer;
            var stats;

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

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';
                document.getElementById('canvas-frame').appendChild(stats.domElement);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 100;
                camera.position.y = 300;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });
            }

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

            var light;
            function initLight() {
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);

            }

            var cube;
			var mesh;
            function initObject() {
               
				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
				
				for ( var i = 0; i < geometry.faces.length; i += 2 ) {

					var hex = Math.random() * 0xffffff;
					geometry.faces[ i ].color.setHex( hex );
					geometry.faces[ i + 1 ].color.setHex( hex );

				}
				
                var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
                mesh = new THREE.Mesh( geometry,material);
                mesh.position = new THREE.Vector3(0,0,0);
                scene.add(mesh);
				
				
            }
			
			function initGrid(){
				var helper = new THREE.GridHelper( 1000, 50 );
				helper.setColors( 0x0000ff, 0x808080 );
				scene.add( helper );
			}
			
            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();


                initObject();
				initGrid();
				
                animation();

            }

            // 帧循环、游戏循环
            function animation()
            {
				//mesh.rotation.y +=0.01;
                renderer.render(scene, camera);
                requestAnimationFrame(animation);

            }

		</script>
	</head>

	<body onload="threeStart();">
		<div style="margin-left:150px;">
			<p>课前准备,绘制一个立方体和一个网格线</p>
		</div>
		<div id="canvas-frame"></div>
	</body>
</html>
			
		

1.4、绘制网格

上面的代码中,我们还绘制了一个网格,绘制网格是因为,我们需要一个参照物来反应几何体的旋转,不然很难看清几何体的旋转过程。网格如下图所示:

WEBGL网格线

绘制网格使用如下的代码:

function initGrid(){
	// 网格的边长是1000,每个小网格的边长是50
	var helper = new THREE.GridHelper( 1000, 50 );
	helper.setColors( 0x0000ff, 0x808080 );
	scene.add( helper );
}

上面的代码解释如下:

1、var helper = new THREE.GridHelper( 1000, 50 )这一行,生成了一个网格模型,边长为1000,大网格中有小网格,小网格的边长是50.

2、网格线的颜色一头是0x0000ff,另一头是0x808080。线段中间的颜色取这两个颜色的插值颜色。

1.5、最简单的两种旋转方法

本节的demo,可以在1-2.html中找到,在阅读本节的时候,最好打开这一课。

1、通过Mesh的rotation属性来旋转物体

要让立方体旋转起来,可以更改Mesh的rotation属性,rotation属性是一个欧拉类型THREE.Euler(),它的定义如下:

var rotation = new THREE.Euler();

如果我们要立方体围绕Y轴旋转,那么只需要在animation中调用如下的代码即可:

mesh.rotation.y +=0.01;

注意,这里的0.p01表示的弧度。有的同学可能已经忘记了高中的弧度和角度转换的知识,没关系,我这里给出公式如下:

度=弧度×180°/π

将上面的弧度变为0.01,计算的结果是0.57,也就是每个帧循环将旋转0.57度。

2、通过rotateX、rotateY、rotateZ函数来旋转物体

除了通过直接更改Mesh的rotation属性来旋转物体,还可以调用Mesh的rotateX、rotateY、rotateZ这3个函数来旋转物体,代码如下:

function animation()
{
	mesh.rotateY(0.01);
	renderer.render(scene, camera);
	requestAnimationFrame(animation);

}

mesh.rotateY(0.01)表示围绕Y轴旋转0.01弧度。效果如下图所示:

WEBGL网格线

1.6、小结

本课讲解了最基本的旋转方法。有一点需要注意,本节对物体旋转的时候,旋转中心在立方体的中心 ,这样我们看起来很自然。但是,很多时候,旋转的中心不再物体的中心,例如,运动员扔铁饼的时候,铁饼的旋转中心就不是其中心,而是人的中心,这个时候,怎么旋转呢,我们下回分解。

WEBGL网格线

给WebGL中文网团队的女程序员"小果妹妹"发一个鸡腿吧,微信扫一扫赞赏,感谢。

亲爱的读者,如果你觉得WebGL中文网的课程不错,您可以购买《WebGL中文网视频课程》 课程支持我们哦,购买后记得给我们好评哦!我们强烈建议您不要在iphone上的网易云课堂软件中购买,这样苹果会收取31%左右的服务费,虽然这是明码标价,我们也表示认可和理解,具体选择权在您自己了。

感谢大家的支持,下面是课程的截图之一

[1楼] 真由理的** 2016-07-13 15:45

for ( var i = 0; i < geometry.faces.length; i += 2 ) {

var hex = Math.random() * 0xffffff;
geometry.faces[ i ].color.setHex( hex );
geometry.faces[ i + 1 ].color.setHex( hex );

}

这段不是将每两个面随机赋予一种颜色吗,为什么出来的效果却是每个面颜色都不同呢

[2楼] y860** 2016-08-31 10:59

活捉色情老师一只,我报警了。

WebGL中文网老师回答:

啊,啊,啊,你是女孩吗,你是女孩吗,你是女孩吗?我们色吗,色吗,不色啊!有女孩可以证明吗?嘿嘿!

[3楼] shen** 2016-09-06 21:01

老师,为啥在three.js立方体有12个表面,而你两两赋予颜色,恰好不重复。

[4楼] cgh2** 2016-09-09 13:20

因為1個方形面是由2個三角形組成的

[5楼] LML1** 2016-11-06 11:53

geometry.faces[i+1].color.setHex(hex);为什么会在控制台里报错呢?Uncaught TypeError: Cannot read property 'color' of undefined

[6楼] anjo** 2016-11-30 18:29

var helper = new THREE.GridHelper( 1000, 50 )这一行


50是分成50份,而不是设置小网格边长为50.

[7楼] drag** 2017-03-13 12:57



请问一下缩放和移动要怎么做呢?

[8楼] qaz8** 2017-06-09 18:20

这章,好短,还没开始就结束了,另外,这个网站没设置cookie啥的吗?动不动要重新登录才能评论。

[9楼] 小不点儿** 2017-11-15 11:14

老师,正方体不是又6个面吗,geometry.faces.length为啥输出的是12(难道是分外面、里面),六个面渲染颜色的顺序是固定的吧?

WebGL中文网老师回答:

不是,正方形只有6个面,但是一个面是由2个三角形组成。为什么用三角形,不用四边形作为一个基本图元。因为三个点才能保证一定在一个面上。这么宝贵的知识都告诉你了哦,好好学习吧,哈哈。

[10楼] btsh** 2017-12-13 22:51

有谁知道初级视频后面的课程的解压密码吗?游戏玩不了,报错

[11楼] 每天一小** 2018-12-07 17:26

我的这句代码怎么报错?

	function initGrid(){
			var helper = new THREE.GridHelper(10000,500);
			helper.setColors(0x0000ff,0x808080); // 报错了
			scene.add(helper);
		}

报错内容:

THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead.

[12楼] 1581** 2019-02-27 15:54

报错:THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead.

function initGrid () {

    let helper = new THREE.GridHelper(1000, 50)

    helper.setColors(0x0000ff, 0x808080)

    scene.add(helper)

  }

改成

function initGrid () {

    let helper = new THREE.GridHelper(1000, 50, 0x0000ff, 0x808080)

    scene.add(helper)

  }

我是 97 版本的

[13楼] kubi** 2019-07-04 11:30

小宝呗,下回分解呢??????

[14楼] zinl** 2019-08-22 15:04

这是一趟高速转弯的列车。。。。。。

[15楼] Hicc** 2020-10-08 14:07

车速好快。。。刚看开头就想来评论区看看了

提问或评论

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