《webgl入门指南》学习笔记二之three.js创建mesh

时间：2021-09-03 04:07:50

三维开发渲染最多的对象大概是网格mesh了，Webgl开发三维也不例外。

网格就是一系列的多边形组成的，三角形或者四边形，网格一般由顶点来描绘，我们看见的三维开发的模型就是由一系列的点组成的。

现在我们就来使用mesh组建一个太阳系，这是chapter-3的内容，它里面主要将如何使用mesh，以及贴图组成一个地球，自转的地球，这次内容有点跳了。

<!DOCTYPE html>
<html>
<head>
<title>Earth to WebGL</title>

	<script src="../libs/Three.js"></script>
	<script src="../libs/jquery-1.6.4.js"></script>
    <script src="../libs/jquery.mousewheel.js"></script>
	<script src="../libs/RequestAnimationFrame.js"></script>
	<script src="../sim/sim.js"></script>
	<script src="earth-basic.js"></script>
	<script>

	var renderer = null;
	var scene = null;
	var camera = null;
	var mesh = null;
	
	$(document).ready(//
		function() {//获取容器
			var container = document.getElementById("container");
                         //初始化程序
			var app = new EarthApp();
			app.init({ container: container });
			app.run();
		}
	);
	

	</script>

</head>
<body>
    <div id="container" style="width:98%; height:98%; overflow:hidden; position:absolute; background-color:#000000"></div>

</body>
</html>

 

以下是<span style="font-family: Arial, Helvetica, sans-serif;">earth-basic.js</span>
 

 

// Constructor
EarthApp = function()
{
	Sim.App.call(this);
}

// Subclass Sim.App
EarthApp.prototype = new Sim.App();//这一句和上面一句一起，继承Sim.App，采用的是组合继承，某些内容继承了两次有优化的余地可使用，可以使用寄生组合继承

// Our custom initializer
EarthApp.prototype.init = function(param)
{
	// Call superclass init code to set up scene, renderer, default camera
	Sim.App.prototype.init.call(this, param);//目测是继承自Sim.App,使用超类的scene, renderer, default camera
                                             //问题：上面的已经继承了，EarthApp,已经包含了Sim.App原型函数里面的init
                                             //这里再搞一次是什么意思？
	
    // Create the Earth and add it to our sim
    var earth = new Earth();
    earth.init();
    this.addObject(earth);//这里是调用Sim.App调用自身原型函数addObject();
}

// Custom Earth class
Earth = function()
{
	Sim.Object.call(this);
}

Earth.prototype = new Sim.Object();

Earth.prototype.init = function()
{
    // Create our Earth with nice texture



    //指定贴图url，使用这个图片贴到球体的表面
    var earthmap = "../images/earth_surface_2048.jpg";
 

 

    //创建球体的Geometry，指定了球体的中心
    var geometry = new THREE.SphereGeometry(1, 32, 32);
 

 

    //这里创建了贴图，一会用贴图创建材质
    var texture = THREE.ImageUtils.loadTexture(earthmap); 
 

 

    //创建了<span style="font-family: Arial, Helvetica, sans-serif;">MeshBasicMaterial，将贴图传送到材质里面，创建材质这里大家不需要理解这个</span>
 

<span style="font-family: Arial, Helvetica, sans-serif;">      //</span><span style="font-family: Arial, Helvetica, sans-serif;">东西到底是什么东西，</span><span style="font-family: Arial, Helvetica, sans-serif;">因为我们会快速的略过three.js的内容跳到webgl，之所介绍three.js</span>
 

<span style="font-family: Arial, Helvetica, sans-serif;">      //</span><span style="font-family: Arial, Helvetica, sans-serif;">只是让大家</span><span style="font-family: Arial, Helvetica, sans-serif;">对三维开发有个感性的认识</span>
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var mesh = new THREE.Mesh( geometry, material ); 

    // 指定mesh旋转的角度为<span style="font-family: Arial, Helvetica, sans-serif;">Earth.TILT(这里只是旋转了一下下，用来模拟地球黄道）</span><span style="font-family: Arial, Helvetica, sans-serif;">，rotate.x为绕x轴旋转</span>
    mesh.rotation.x = Earth.TILT;
    
    // 将mesh交给sim.js
    this.setObject3D(mesh);    
}

Earth.prototype.update = function()// 问题：Earth继承自Sim.Object,但是Sim.Object下面有Sim.Object.prototype.update()？？？？咋个办
                                   //也就是sim.js，<span style="font-family: Arial, Helvetica, sans-serif;">update（）</span>方法重复了，什么意思框架的问题
{
	// 绕着y轴旋转<span style="font-family: Arial, Helvetica, sans-serif;">Earth.ROTATION_Y</span>，这里是uodate（），<span style="font-family: Arial, Helvetica, sans-serif;">所有在這的函数每一帧都会被调用，</span>
        //每一帧都旋转一定角度，就是在不停旋转，就是自转咯，做过unity3d开发的同学应该明白
	this.object3D.rotation.y += Earth.ROTATION_Y;
}
//定义全局变量供前面两个旋转使用
Earth.ROTATION_Y = 0.0025;
Earth.TILT = 0.41;





标签：
相关文章