基于HTML5的椰子科普作品制作

基于HTML5的椰子科普作品制作本科毕业论文论文题目： 基于HTML5的 椰子科普作品制作 指导老师： 张金区 学生姓名： 曾小娟 学 号： 20142100076 学 院： 计算机学院 专 业： 计算机科学与技术 班 级： 2014级 4班 中文摘要现代人生活水平越来越高，高楼大厦此起彼伏，虽然能接触到各种水果，然而很少能够接触到水果的树和它的生长环境，对于这些水果的生长过程并不清楚。因此一个通过网络就可以了解到水果的相关知识的科普应用对于人们来说是一个很方便的应用。本项目设计的主要对象是关于椰子的科普知识。主要功能包括展示椰子树的生长过程、科普其生长过程中的相关知识，展示椰子树的整个树的形态，展示椰子的形状。用户可点击选择种树、收果实、查看相关部位科普介绍，进行交互操作。本项目为网页应用，在HTML5设计页面的基础上，使用Three.js完成三维场景的开发，人们可以随时从浏览器上访问浏览网页,应用简单容易使用，用户可以在娱乐中逐渐了解到椰子的相关科普知识。关键词 ：WebGL，HTML5，科普，椰子，Three.jsAbstractWith the quality of peoples life became higher and more buildings built in the city,although people can meet all kinds of fruit,they rarely know about the fruits tree and growing environment.They dont know about process of growth.So it is very convenient for people that make an application which can show knowledge of fruit through the Internet.This project is aim to show people the knowledge of coconut.The main function includes the following items that show the vegetation process of coconut,the knowledge about process of growth,show the appearance of coconut tree,show the appearance of coconut.Users can click the application to plant coconut tree,gain coconut,see the knowledge of each part of coconut.This project is web application which made in the base of HTML5,it uses three.js to accomplish the development of three-dimensional scene.People can use this application at any time by using browser.The application is easy to use which users can learn knowledge of coconut by entertainment.Keywords ：WebGL,HTML5, popularization of science, coconut,Three.js目录1. 绪论41.1 研究背景及意义41.2 Web3D网页应用现状41.3 HTML5及three.js技术现状52. 总体应用设计62.1 应用需求分析62.2 程序功能设计62.2.1切换场景进行交互62.2.2椰子树的种植和果实收获72.2.3资料卡片展示82.2.4模型场景缩放、旋转92.3 界面设计93. 场景模型处理123.1场景模型来源123.2 导入场景模型124. 程序功能实现134.1 主页面菜单设计134.2 各个模型场景加载及交互134.3 模型的缩放、旋转和选中154.4 种植椰子树及收获果实174.5 资料卡片设计204.6 重设大小215. 应用程序运行225.1 测试设备225.2 运行效果226. 总结26参考文献27致 谢281. 绪论1.1 研究背景及意义椰子在日常生活中会出现在水果店之中，其外壳坚硬，果肉清脆，果子之中充满甜甜的椰子水。椰子除了常见的被人们当成水果以外，它还可以作为优质的农产品 ,并且还可以做成油料1。而椰子树本身也是有各种的效用，可作为园林植株，也可以提取其中的物质做各种物品，比如利用椰叶编织物品2。日常生活中常见椰子果实如下（图1-1-1）：图1-1-1 椰子果实椰子大多分布在亚洲、非洲、大洋洲及美洲的热带滨海及其内陆地区，多数为南北纬20之间，也就表示着该纬度以外的地区的人们日常生活中并不会接触到椰子的生长，这部分地区的人们对于椰子的认识大多仅仅是见过或者吃过椰子。因此，向人们科普椰子的相关知识是很有必要的。在学习过椰子的相关知识后，人们对于椰子的误区将会减少很多。在生活节奏快速的现代，人们总愿意使用最方便的方式学习新的知识，以期望花费最少的时间学习更多的知识。因此，一个网页端的应用在无需安装应用的基础上，只需访问网站即可学习新知识，对于追求高效的人们来说是非常好的学习模式。1.2 Web3D网页应用现状Web3D网页是将由事物转换的3D模型在网页上呈现及实现的一种网页形式，它使得以往平面化的网页变得三维化，让人觉得更有空间感。从20世纪90年代开始，人们就已经在考虑如何才能更方便地获取环境或物体的三维信息3。而在这个时候，Web3D技术也逐渐被提出，并随着研究的进行，产生了Web3D组织，并由该组织制订了相关标准X-3D。而随着X-3D不断地完善，不断地添加新的技术，Web3D也逐渐拥有了更强大的功能。在开发Web3D应用中，常用的技术有Flash、Java、MGI、VRML，它们各有各自的优点和缺点。而随着开发技术的发展，逐渐出现了基于HTML5技术的Web3D网页应用，虽然这种网页形式还处于起步状态，但它也在不断地发展，逐步渗透到人们的生活中。而由Web3D技术开发的应用也逐渐充斥着人们的生活，包括化学和物理实验教学、地理区域显示、古董展示、生物细胞展示、商品展现、3D景点、虚拟楼盘等3D应用，让人感受到真实性。技术会不断发展，在未来Web3D应用会得到更广泛的使用。1.3 HTML5及three.js技术现状我们提到的Html5 技术是指在万维网络中的核心、标准语言标记下的、经第五次修改后的应用超文本标记语言4。HTML5是为了实现在移动设备支持多媒体而设计的，有了它就能很好地替代传统的Flash，能更好地适应多设备跨平台。HTML5是基于前几个HTML标准逐渐完善发展起来的，相对于HTML4以前的标准而言增加了新的属性和定义，并移除了某些元素，而其在某些方面也做了很大的改进，比如支持2D/3D制图。在如今移动设备方便携带、广泛使用的时代，HTML5的出现使得开发跨平台的应用更加方便，因此HTML5的发展具有很大的优势，未来HTML5使用将会更加广泛。three.js是JavaScript编写的WebGL第三方库5，它使得开发人员在不深入了解复杂的图形学的情况下，也能够利用three.js开发三维网页。three.js代码是开放的，源代码托管在Github上，其开发和维护相对活跃。而作为原生的Web3D引擎，其具有明显的优势：用户不需要安装额外的插件、开发的应用在移动端也可很好地支持。由于three.js提供了更为简化的处理三维场景的方式，会有更多的开发人员学习并使用它，其对于开发人员来说是非常优秀的WebGL第三方库，可减少很多不必要的开发时间。2. 总体应用设计2.1 应用需求分析（1）切换生长环境、椰子树、椰子果实场景用户可以根据自身的需求，在底部菜单栏中点击选项按钮，选择切换不同的场景，加载对应的3D模型，以便用户观察和进行交互操作。在生长环境的场景下，用户可点击生长环境的某些部位，了解关于椰子的生长环境；在椰子树的场景下，点击屏幕中的椰子树各个部位，弹出对应文字资料；在椰子的场景下，点击屏幕中的椰子，弹出椰子对应的部位文字资料。（2）种植椰子树，收获果实用户可以点击菜单按钮，根据弹出的提示框选择是否种植椰子树。确定种植椰子树的情况下，向用户显示如何种植的指引。用户可根据种植指引进行对应的点击操作，种植椰子树。在用户种下树以后，一定时间内展示椰子的生长和产生果实的过程。在种植椰子树之后，椰子树成长到一定高度时会生产椰子，当椰子不再长大后，用户可选择点击屏幕上的椰子，将椰子收获。同时，在收获之后，用户的总椰子数目增加。（3）展示文字资料用户可点击底部菜单，程序弹出文字卡片，卡片撰写与椰子相关的各种资料，用户可切换卡片，以便查看不同的知识点。（4）椰子科普知识内容对于一种植物的科普，其知识应该有其产地、品种、形态特征，了解其生长环境，在该环境下的生长周期，应该如何种植，以及其最终产物的效用。（5）应用易用性程序应该具有明确的菜单按钮的页面设计，同时应该提供对应的操作指引，以便用户更轻松地操作程序。设计简单的点击事件，方便用户操作。在显示场景上，应该选择合适的呈现角度，以便用户使用应用时更舒服。2.2 程序功能设计2.2.1切换场景进行交互（1）设置菜单栏在页面底部设置固定的菜单栏，无论切换至哪个场景均不隐藏底部菜单栏，给菜单栏对应选项添加点击事件，让用户选择想要的场景，当程序接收到用户的点击事件之后，在菜单栏上方的主要空间中清除当前的场景和交互按钮，清除后加载对应的3D场景和交互按钮。（2）给每个场景添加鼠标监听事件由于用户需要与页面进行交互操作，因此对于每个页面都需要时刻监听鼠标按下、松开、移动等事件，因此，统一给页面添加监听事件，在触发事件后根据鼠标点击的内容进行不同的显示内容。在生产环境中，当用户点击了场景中的具体事物，需要将场景中的具体事物对应的介绍显示出来。在椰子树场景中，用户可通过点击场景中的椰子树，程序显示关于椰子树的各个部位的详细介绍资料，以便用户查看。在椰子场景中，用户可通过点击场景中的椰子，程序显示关于椰子的各个部位的详细介绍资料，以便用户查看。2.2.2椰子树的种植和果实收获（1）种植椰子树在生产环境场景中，页面需要设置种植椰子树的按钮，给按钮添加点击事件，用户可点击按钮，页面获取点击事件，弹出对话框提示是否种植树，用户选择确定选项，可开始种植活动。在第一次种植时，还应该给用户展示操作指引，方便用户了解种植树木如何操作。（2）椰子树正常生长在用户开始种植树木之后，需要往场景中用户点击的位置添加未萌芽的椰子树，然后利用设置多个不同时间的定时器的方式，设置椰子树的规模数值，指定在某个时间段应该修改数值为某个值，然后利用重设椰子树规模的方式，逐渐使得椰子树不断地长大，以演示椰子树的生长过程。（3）收获椰子果实当椰子树进入初产期时，往场景中树生长果实的位置添加刚生成的小果实，然后利用重设椰子模型的规模值的方式，利用three.js的渲染循环方式，不断地修改规模值，实现果实逐渐长大的过程。当椰子果实长到成熟时，用户可对其进行收获，点击果实，程序会将果实收获，并将收获果实总量增加数值。流程图（如图2-2-2-1）：图2-2-2-1 种植椰子树的流程图2.2.3资料卡片展示（1）资料卡片样式设计资料卡片的样式设计为多个类似文件散乱叠在一起的效果，但并不是无规则的散乱，而是设计最上面的方正摆放着，而下面的卡片资料则是旋转一定的角度，摆放在下面，给人一种可看到有多个文件的视觉效果，更有层次感。同时，需要设计上一张和下一张的小按钮，以便用户可方便地查看卡片资料。（2）资料卡片内容设计资料卡片内容针对的是椰子的相关知识科普。首先，为了深入了解椰子，需要对椰子的最佳生长环境做介绍。在了解了生长环境之后，需要介绍椰子的生长周期，从生长过程中了解椰子的一生。然后，需要了解椰子的种植与栽培技术。椰子是有不同的产地和品种的，因此需要展示椰子的产地和品种的详细资料。而了解了这些之后，还需要对椰子的功效进行科普，以便知道椰子在日常生活中有哪些作用。2.2.4模型场景缩放、旋转3D场景加载之后，由于初始设置的位置、观看视角是处于整体化的情况，而用户有可能想要详细查看场景中的事物，因此，需要给整个场景增加可缩放、可旋转的功能。用户可使用鼠标操作，利用鼠标左键点击移动进行旋转操作，改变观察视角，寻求最佳的观察角度观察场景中的植株。用户也可使用鼠标滚轮进行缩放操作，可放大场景中的植株，实现近距离观察3D场景中的物体，以便更清晰地观看物体。2.3 界面设计生长环境页面设计（如图2-3-1）：图2-3-1 生产环境页面椰子树页面设计（如图2-3-2）：图2-3-2 椰子树页面椰子的页面设计（如图2-3-3）：图2-3-3 椰子页面资料卡片弹出层设计（如图2-3-4）：图2-3-4 资料卡片弹出层色彩设计采用蓝色为主要色调，配合灰色的背景颜色，使的模型在场景中显得更加突出。3. 场景模型处理3.1场景模型来源主场景中小岛的模型来源于网站/，模型格式主要为obj加上mtl，及对应材质图片。单个椰子树的模型来源于网站/，模型格式为obj加上mtl，因为没有配备对应材质图片，加载时部分材质缺失，因此，使用了小岛模型的树皮的材质图片，修改了材质文件mtl里面的内容，使其能正常显示。单个椰子的模型来源于网站，模型格式为max，使用3D max软件打开，由于模型有两个椰子，因此需要对其进行分离，将分离后的模型导出obj与mtl文件，由于加载时模型表面材质缺失，因此，同样使用修改mtl文件的方式，使用了该模型提供的材质图片，使模型材质正常显示。3.2 导入场景模型所有模型使用的都是obj加上mtl的格式，因此加载方式都是一样的，使用OBJLoader和MTLLoader。首先需要在html结构中引入OBJLoader.js和MTLLoader.js，创建MTLLoader对象，设置路径，调用MTLLoader对象的load方法，加载材质文件。接着在load方法的回调函数中创建OBJLoader对象，设置材质、路径，调用OBJLoader对象的load方法，加载模型文件，在回调函数中根据需要有选择地决定是否修改模型的规模，最后将模型添加到scene场景中。通用伪代码为下：mtl加载器=new THREE.MTLLoader();mtl加载器.setPath(/*mtl文件所在目录*/);mtl加载器.load(/*mtl文件名*/.mtl, function( materials ) materials.preload(); obj加载器 = new THREE.OBJLoader(); obj加载器.setMaterials( materials ); obj加载器.setPath( /*obj文件所在目录*/ ); obj加载器.load( /*obj文件名*/.obj, function ( object ) /*对模型的处理*/ scene.add( object );););4. 程序功能实现4.1 主页面菜单设计主菜单作为必须存在的固定元素，需要在页面中处于固定的位置，它的存在使得程序可切换不同的模型场景。其HTML结构如下：生长环境椰子树椰子果实资料卡片为了使整个菜单固定在页面的底部，需要设置整个菜单.bottom_munu的部分样式为：position：absolute;bottom：0px;right：0px;width:100%;而为了使菜单里的四个菜单选项等分排列，需要对整个菜单设置布局，使用flex布局，设置其父元素.bottom_munu的部分样式为：display:flex，设置其子元素.column的部分样式为：flex:1，如此设置之后，四个菜单选项就可以等分排列，固定在页面底部。为了使用户可点击菜单切换场景，需要在initial.js给四个菜单选项添加点击事件，具体如下：Menus1.addEventListener(click,onClickGrow,false);Menus2.addEventListener(click,onClickPalm,false);Menus3.addEventListener(click,onClickFruit,false);Menus4.addEventListener(click,onClickContent,false);当用户点击某一菜单选项之后，程序监听到单击事件，就会触发菜单选项对应的函数，执行函数对应的代码。4.2 各个模型场景加载及交互（1）生产环境生产环境场景在页面第一次加载时即随之加载模型，在initObject函数中，使用OBJLoader和MTLLoader加载3D模型的方式加载沙滩小岛场景，加载完毕后给整个页面添加鼠标监听事件：renderer.domElement.addEventListener(mousedown,oneEvent1,false);该函数监听鼠标的按下事件，监听用户的交互操作，做相应的操作。当页面切换到其他场景后，点击生产环境按钮，可切换回生产环境场景。由于切换场景时采用的是直接清除scene中已加载的所有模型，因此，在onClickGrow函数中，需要重新加载沙滩小岛场景。因为不确定切换场景前所在的场景是哪一个，因此使用条件语句，判断椰子树模型Tree和椰子模型Coconut是否是undefined，是的情况下，使用scene.remove()方法将模型从当前场景移除，同时设置Tree或Coconut为undefined，彻底删除模型。在切换到其他场景之后，用户有可能会对场景进行旋转、缩放操作，从而导致程序中的camera的位置等参数发生改变，而使得场景可见角度发生改变，因此，在onClickGrow函数需添加重置camera参数的设置，代码如下：camera.up.x=0;camera.up.y=1;camera.up.z=0;camera.position.x=-460;camera.position.y=400;camera.position.z=700;camera.lookAt(x:0,y:0, z:0);在页面左上角设置种植椰子树的按钮，在按钮下方设置椰子果实总数量显示标签，在initial.js文件中，给按钮添加click监听事件，处理种植事件：clickPlant.addEventListener(click,onClickPlant,false);在没有种植树木的情况下，用户可以与场景交互，进行点击操作。在oneEvent1函数中，记录当前点击位置的鼠标的clientX和clientY：mouseX=event.clientX;mouseY=event.clientY;然后给页面添加监听鼠标松开的事件：renderer.domElement.addEventListener(mouseup,oneEvent2,false);在oneEvent2中，判断鼠标松开时当前鼠标所在位置的clientX和clientY是否与鼠标按下时所记录的鼠标位置一致，不一致则不进行操作。而在一致的情况下，首先进行移除监听鼠标松开的事件，避免出现冲突：renderer.domElement.removeEventListener(mouseup,oneEvent2,false);然后针对点击位置进行操作，判断是否选中场景中的模型，在选中的前提下，在生产环境模型bigThing不等于undefined即当前处于生产环境场景的情况下，对进行条件判断，按照其对应场景中的具体物品的名字，显示对应设计的弹出框。（2）椰子树用户选择椰子树的菜单选项后，重新设置camera的某些属性值，与生产环境设置的值一致。因为不确定切换场景前所在的场景是哪一个，因此使用条件语句，判断生产环境模型bigThing和椰子模型Coconut是否是undefined，是的情况下，使用scene.remove()方法将模型从当前场景移除，同时设置bigThing或Coconut为undefined，彻底删除模型。此外，由于生产环境有可能会存在种植的椰子树和椰子，因此，根据记录的种植椰子树数目TreesNumber和生产的椰子数量sumNumber的值，去对椰子树模型数组plantTrees和椰子模型数组plantFruits的成员进行scene.remove()的操作，同时设置数组的length=0，彻底删除模型。在oneEvent2函数中，确定选中模型后，判断Tree是否等于undefined，是的情况下，即表明当前所在场景为椰子树场景，因此，弹出椰子树的各部位形态特征的文字介绍资料卡，包括根、茎、叶、花。（3）椰子用户选择椰子的菜单选项后，重新设置camera的某些属性值，与生产环境设置的值一致。因为不确定切换场景前所在的场景是哪一个，因此使用条件语句，判断生产环境模型bigThing和椰子树模型Tree是否是undefined，是的情况下，使用scene.remove()方法将模型从当前场景移除，同时设置bigThing或Tree为undefined，彻底删除模型。此外，由于生产环境有可能会存在种植的椰子树和椰子，因此，根据记录的种植椰子树数目TreesNumber和生产的椰子数量sumNumber的值，去对椰子树模型数组plantTrees和椰子模型数组plantFruits的成员进行scene.remove()的操作，同时设置数组的length=0，彻底删除模型。在oneEvent2函数中，确定选中模型后，判断Coconut是否等于undefined，是的情况下，即表明当前所在场景为椰子场景，因此，弹出椰子的各部位形态特征的文字介绍资料卡，包括外果皮、中果皮、内果皮、种皮、椰肉、椰子水和胚。4.3 模型的缩放、旋转和选中模型的缩放与旋转使用了第三方的js控制器：TrackballControls.js。这是three.js提供的组件，利用它可以方便地进行交互操作，包括选择模型、移动模型、缩放模型。在使用的时候，需要在index.html文件中引入，同时在initial.js文件中需要设置相关的属性值，具体设置如下：/*初始化控制器*/controls = new THREE.TrackballControls( camera );/*旋转速度，设置为0的时候则不可旋转*/controls.rotateSpeed = 1.0;/*变焦速度即缩放速度*/controls.zoomSpeed = 1.2;/*平移速度与右键相关，可关闭*/controls.panSpeed = 0.8;/*是否不变焦即是否不缩放*/controls.noZoom = false;/*是否不平移，本项目不需要移动，因此设置为true*/controls.noPan = true;/*是否开启移动惯性*/controls.staticMoving = true;/*动态阻尼系数，就是灵敏度*/controls.dynamicDampingFactor = 0.3;初始化控制器后，需要在渲染循环函数中实时更新控制器，因此在render()函数中添加以下语句：controls.update();在程序要进行种植椰子树的操作时，有对话框的弹出，在这种情况下，需要将程序的控制器暂时关闭，让用户暂时无法操作缩放与旋转，代码如下：/*暂时关闭控制器*/*旋转速度*/controls.rotateSpeed = 0;/*是否不变焦即是否不缩放*/controls.noZoom = true;在对话框结束之后，恢复程序可缩放、可旋转的功能，代码如下：/*重新开启控制器*/*旋转速度*/controls.rotateSpeed = 1.0;/*是否不变焦即是否不缩放*/controls.noZoom = false;模型的选中功能的实现使用的是射线拾取技术，它的设计思路是利用点击屏幕的点坐标，转换为场景中的世界坐标，发射一条射线，找出与这条射线相交的所有模型object，对每个object算出对应的焦点与距离，比较这些距离，找出最短距离的object6。通用代码如下：var m=new THREE.Vector2();/屏幕坐标转标准设备坐标m.x=(event.clientX/window.innerWidth)*2-1;/标准设备横坐标m.y=-(event.clientY/window.innerHeight)*2+1;/标准设备纵坐标standardVector = new THREE.Vector3(m.x, m.y, 0.5);/标准设备坐标/标准设备坐标转世界坐标worldVector = standardVector.unproject(camera);/单位向量var Ray = worldVector.sub(camera.position).normalize();/创建射线投射器对象var RayCaster = new THREE.Raycaster();RayCaster.setFromCamera(m,camera);/返回射线选中的对象var intersects = RayCersectObjects(scene.children, true);if (intersects.length 0) /*length大于0即表示有选中模型，此时进行对应的操作*/返回射线选中的对象的方法：RayCersectObjects()其第一个参数一个Object3D对象构成的数组，在本程序中，可选择scene.children即场景中所有的模型。返回的intersects中有选中的Object3D对象，可通过intersects0.object访问最短距离的3D模型即选中的模型。4.4 种植椰子树及收获果实在生产环境场景下，点击左上角的种植椰子树按钮，开始种植椰子树。点击后，弹出对话框，询问用户是否种植椰子树，否的情况下，关闭对话框，不做操作。是的情况下，进行种植椰子树。在第一次点击的时候，为了使用户知道如何操作，需要在程序页面中展示操作指引，所以在确定是种植椰子树后触发的函数onClickPlantY()中，需要设置第一次时显示操作指引的方法setPos(window.innerWidth/2,2*window.innerHeight/3)，在该方法里，设置指引提示smallTip为可见，其对应的按钮事件在initEvent()中初始化：/*下一步指引*/sub1.addEventListener(click,onTipNext,false);/*完成指引观看*/sub2.addEventListener(click,onTipFinish,false);结束指引或第二次点击种植椰子树的情况下，首先需要移除已添加的鼠标事件，关闭之前的点击触发事件：renderer.domElement.removeEventListener(mousedown,oneEvent1,false);重新设置新的鼠标事件：renderer.domElement.addEventListener(mousedown,onDocumentMouseDown,false);在onDocumentMouseDown函数中，首先，记录当前鼠标按下来的位置(clientX,clientY)：mouseX=event.clientX;mouseY=event.clientY;然后给页面添加监听鼠标松开的事件：renderer.domElement.addEventListener(mouseup,onDocumentMouseUp,false);在onDocumentMouseUp函数中，判断鼠标松开时当前鼠标的位置(clientX,clientY)是否与鼠标按下的位置一致，一致的情况下则表明进行了单击操作。此时，调用种植函数：PlantGrow(event.clientX,event.clientY);该函数中首先使用射线拾取技术，判断用户是否点击屏幕上的模型。确认有点击到模型，则对用户点击的模型进行判断，判断是否等于sceneThings0即沙滩，不等于不进行种植操作。等于的情况下，先进行移除鼠标事件，避免用户再一次点击屏幕时造成冲突：renderer.domElement.removeEventListener(mousedown,onDocumentMouseDown,false);renderer.domElement.removeEventListener(mouseup,onDocumentMouseUp,false);移除事件后，针对用户点击的位置加载单个椰子树的模型，设置模型的位置、规模：/*设置模型的位置*/object.position.x=intersects0.point.x;object.position.y =intersects0.point.y;object.position.z=intersects0.point.z;/*设置模型的规模大小*/object.scale.x = object.scale.y = object.scale.z = 0.001;/*种植的椰子树数组和数量增加一个椰子树*/plantTreesTreesNumber=object;TreesNumber=TreesNumber+1;模型加载后，添加多个定时器修改模型的规模数值scale：setTimeout(function () scale=0.1;,1000);设置好定时器后需要重新设置新的鼠标点击事件：renderer.domElement.addEventListener(mousedown,oneEvent1,false);该事件监听的是普通的点击事件，而非监听种植椰子树的事件。定时器分阶段表示了椰子树的萌芽期、幼苗期、幼树期、初产期。scale的值是定时修改，而椰子树的成长则需要在渲染循环函数render()逐步更改模型的scale，以便演示椰子树逐渐长大的过程：if(TreesNumber0&plantTreesTreesNumber-1.scale.x0&plantFruitssumNumber-1.scale.x0.2) plantFruitssumNumber-1.scale.x = plantFruitssumNumber-1.scale.y = plantFruitssumNumber-1.scale.z = plantFruitssumNumber-1.scale.x+0.001;4.5 资料卡片设计资料卡片主要设计为弹出层的模式，具体的html结构如下： /*具体的资料文本*/ /*多个资料文本*/Id为Msgs的容器为所有卡片的父容器，包裹着所有的文字卡片,id为Cone的容器为第一个卡片容器，类推有Ctwo、Cthree、Cfour、Cfive。资料卡片显示的内容有椰子的最佳生存环境，椰子的生长周期，椰子的种植与栽培，椰子的产地、品种、形态特征，椰子的效用。每个卡片设置不同的颜色，利用CSS3的transform: rotate()定义 2D 旋转，设置不同的角度以使卡片叠起来显得更有层次感。当用户想查看资料卡片的时候，需要点击屏幕中的菜单栏的资料卡片选项，触发onClickContent()。在onClickContent()函数中，首先需要暂时关闭TrackballControls控制器，因为卡片切换时会有鼠标事件发生。关闭控制器后，使父容器的CSS样式display的值为block，使其可见。然后，给资料卡片菜单选项设置以下内容，监听点击事件：Menus4.removeEventListener(click,onClickContent,false);Menus4.addEventListener(click,onClickNoContent,false);在onClickNoContent()函数中开启TrackballControls控制器，修改click事件：Menus4.removeEventListener(click,onClickNoContent,false);Menus4.addEventListener(click,onClickContent,false);卡片中设置了上一张和下一张的图片按钮，给它们添加点击事件：Prev.addEventListener(click,onPrev,false);Next.addEventListener(click,onNext,false);资料卡片因为存在不同的旋转角度，因此将最初的顺序存储在arrs数组中，使用数组的方法pop()和unshift()搭配，push()和shift()搭配，更改切换的顺序，以便在更改了页面之后，使用.style.transform更改每个页面的旋转角度。所有卡片子容器存储在数组Cgroup中，给所有的Cgroup元素添加监听鼠标事件，监听鼠标进行切换页面的操作：Cgroupi.addEventListener(mousedown,switchDown,false);在switchDown()函数中，记录当前点击的鼠标位置(clientX,clientY)，添加以下代码：var clickIndex = parseInt(this.getAttribute(index);CgroupclickIndex.addEventListener(mousemove,switchMove,false);CgroupclickIndex.addEventListener(mouseup,function (e) if(e.clientX=MX1&e.clientY=MY1)CgroupclickIndex.removeEventListener(mousemove,switchMove,false); ,false);当程序出现鼠标按下事件时，判断在当前位置是否出现鼠标松开事件，若出现则表明用户没有要切换页面的意向，此时移除鼠标移动监听事件。若出现鼠标移动事件，则在switchMove()函数中，计算鼠标移动前后的X位置的差值，若为正值表示查看上一张，为负值表示查看下一张，根据差值修改卡片的位置和旋转角度，实现鼠标切换卡片资料。4.6 重设大小程序运行时有时候会出现对屏幕进行缩小的操作，这个时候就需要程序及时更改大小以适应新的屏幕，因此需要给程序增加一个监听器，监听设备屏幕大小：window.addEventListener( resize, onWindowResize, false );在onWindowResize函数中，获取当前屏幕的宽度和高度：Width=window.innerWidth;Height=window.innerHeight;然后对程序的渲染器和相机进行重设参数操作：camera.aspect = Width / Height;camera.updateProjectionMatrix();renderer.setSize( Width, Height );此时，就能使scene中的场景随着屏幕的改变而更改其被观察的范围。5. 应用程序运行5.1 测试设备本程序使用的测试浏览器（如表5-1-1）：表5-1-1 浏览器版本表：浏览器名称版本Chrome 64.0.3282.186Opera49.0.2723.0Firefox59.0.2IE11.0.9600.17416搜狗7421测试使用的电脑为Windows8.1系统的笔记本电脑，处理器为Inter(R) Core(TM) i5-2430M CPU 2.40GHz 2.40GHz，安装内存(RAM)为6GB，系统类型为64位操作系统，基于x64的处理器。使用的网页服务器工具是本地安装的XAMPP软件，版本号为7.1.7。它包含Apache、MySQL、PHP和PERL，是一款建站软件包。它可以方便快捷在电脑建立网页服务器，使用时需要将应用程序的源文件放进其安装路径下的htdocs文件夹中，在index.php文件中编辑header(Location:.$uri./index.html)，在浏览器中输入链接http:/localhost/，就可以正常访问网页应用程序。本程序在Chrome、Opera、Firefox浏览器运行均良好，页面正常加载，可正常进行交互，在加载椰子模型的时候时间上比其他模型要长一点。在IE浏览器中，在程序加载椰子模型的时候，IE浏览器出现存储空间不足、无法完成此操作的错误，此时程序还正常显示着界面，但是关于椰子方面的模型和操作均无法正常执行。在搜狗浏览器中，若设置的是高速模式，在加载椰子模型时会出现重新刷新回首个页面的情况，无法正常显示椰子模型和执行相关的操作。而若设置的是兼容模式，则其运行效果与Chrome、Opera、Firefox浏览器的运行效果近似。5.2 运行效果程序在电脑运行的效果图截取自Chrome浏览器运行的效果。生产环境场景（如图5-2-1）：图5-2-1 生产环境场景椰子树场景（如图