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

时间：2022-07-06 04:25:21

三维开发渲染最多的对象大概是网格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>
 

 

// ConstructorEarthApp = function(){Sim.App.call(this);}// Subclass Sim.AppEarthApp.prototype = new Sim.App();//这一句和上面一句一起，继承Sim.App，采用的是组合继承，某些内容继承了两次有优化的余地可使用，可以使用寄生组合继承// Our custom initializerEarthApp.prototype.init = function(param){// Call superclass init code to set up scene, renderer, default cameraSim.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 classEarth = 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;




标签：
相关文章