您的位置：首页 > Web前端 > JavaScript

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

2015-06-26 22:18 627 查看
三维开发渲染最多的对象大概是网格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 simvar 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.jsthis.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;

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                THREEJS
                                                javascript
                                                webgl
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航