查看内容

大瞳3D引擎入门教程--ChristmasTree

项目效果链接:http://www.tongworld.cn/dede58/ChristmasTree/
项目下载地址:http://pan.baidu.com/s/1boZB98b
概述:此次案例中,主要功能点有:利用高脚杯建造一棵树的模型;代码更改材质颜色;检测输入控制;第一人称漫游场景;切换摄像机方法;对象材质循环变化;对象来回移动;
案例模型:
1.高脚杯建模出一棵大树,并赋予绿色材质:

2.为树添加小方块,以便用于材质颜色的切换

3.树下模拟人物模型

3.小树模型

4.两个来回移动的box与一个摄像机

脚本介绍
CameraControls.js


  1. player.setCamera(this);

RedToYellow.js


  1. var step=0;
  2. var isRed=true;
  3. var isYellow=false;
  4. var group1 = this.getObjectByName("ColorGroup1").children; //获取树上灯泡数组
  5. var group2 = this.getObjectByName("ColorGroup2").children; //获取树上灯泡数组
  6. var group3 = this.getObjectByName("LightGroup").children; //获取树下面三个cube对象
  7. var matRed = new TONG.MeshBasicMaterial({color:0xff0000}); //定义红色材质
  8. var matGreen = new TONG.MeshBasicMaterial({color:0x00ff00}); //定义绿色材质
  9. var matYellow = new TONG.MeshBasicMaterial({color:0xffff00}); //定义黄色材质
  10. var camera = this.getObjectByName("MainCamera");
  11. var mousePosition = new TONG.Vector3(0,0,0);
  12. var box01 = this.getObjectByName("Box01");
  13. var box02 = this.getObjectByName("Box02");
  14. //获取camera对象
  15. //获取控制器对象
  16. var turnLeft = false;
  17. var turnRight = false;
  18. var forwardMove = false;
  19. var backMove = false;
  20. var isJump =false;
  21. var rotateRight = false;
  22. var rotateLeft = false;
  23.  
  24.  
  25. function update( event ){
  26.  
  27. step+=0.1;
  28. if(turnLeft){
  29. camera.translateX(-0.05); //左转
  30. }
  31. if(turnRight){
  32. camera.translateX(0.05); //右转
  33. }
  34. if(forwardMove){
  35. camera.translateZ(-0.1); //前进
  36. }
  37. if(backMove){
  38. camera.translateZ(0.1); //后退
  39. }
  40. if(rotateRight){
  41. camera.rotation.y-=0.03;
  42. }
  43. if(rotateLeft){
  44. camera.rotation.y+=0.03;
  45. }
  46. if(Math.sin(step)>0){
  47.  
  48. isRed=true;
  49. isYellow=false;
  50. }
  51. else{
  52. isRed=false;
  53. isYellow=true;
  54. }
  55. sinMove(box01,step);
  56. sinMove(box02,step)
  57. ChangeCubeColor(isRed);
  58.  
  59. }
  60. function ChangeCubeColor(red) //改变对象的材质颜色
  61. {
  62. if(red){
  63.  
  64. for(var i=0;i<group1.length;i++){
  65. group1[i].material = matRed;
  66. group2[i].material = matGreen;
  67.  
  68. }
  69. group3[0].material = matRed;
  70. group3[2].material = matRed;
  71. group3[1].material = matYellow;
  72. box01.material = matYellow;
  73. box02.material = matGreen;
  74.  
  75. }
  76. else{
  77. for(var i=0;i<group2.length;i++){
  78. group1[i].material = matGreen;
  79. group2[i].material = matRed;
  80.  
  81. }
  82. group3[0].material = matYellow;
  83. group3[1].material = matRed;
  84. group3[2].material = matYellow;
  85. box01.material = matGreen;
  86. box02.material = matYellow;
  87.  
  88. }
  89. }
  90.  
  91. function keydown(event) //控制方法,上下左右方向键控制小球bool值
  92. {
  93. if(event.keyCode==65) //是否左转
  94. {
  95. turnLeft=true;
  96. turnRight = false;
  97.  
  98. }
  99. if(event.keyCode==87) //是否前进
  100. {turnLeft=false;
  101. turnRight = false;
  102.  
  103. forwardMove = true;
  104. backMove = false;
  105. }
  106. if(event.keyCode==68) //是否右转
  107. {
  108. turnLeft=false;
  109. turnRight = true;
  110.  
  111. }
  112. if(event.keyCode==83) //是否后退
  113. {
  114. turnLeft=false;
  115. turnRight = false;
  116. forwardMove = false;
  117. backMove = true;
  118. }
  119. if(event.keyCode==81){
  120. rotateRight=false;
  121. rotateLeft=true;
  122. }
  123. if(event.keyCode==69){
  124. rotateRight=true;
  125. rotateLeft=false;
  126.  
  127. }
  128.  
  129. }
  130. function keyup()
  131. {
  132. rotateRight=false;
  133. rotateLeft=false;
  134. turnLeft=false;
  135. turnRight = false;
  136. forwardMove = false;
  137. backMove = false;
  138. }
  139. function sinMove(obj,step)
  140. {
  141. obj.position.z = 5*Math.sin(step)+10;
  142. }

项目效果图:

分享: