基于three.js的3D贪吃蛇资源-CSDN文库

共2个文件

html：1个

js：1个

需积分: 34 7 浏览量 2016-05-12 21:15:53 上传评论 1 收藏 139KB RAR 举报

**Three.js概述** Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建3D图形。WebGL是一种在网页上实现硬件加速3D图形的API，而Three.js则简化了WebGL的学习曲线，提供了丰富的功能和易用的接口，使得开发者能够更便捷地构建复杂的3D场景。 **3D贪吃蛇项目** "基于three.js的3D贪吃蛇"项目是一个利用Three.js库创建的互动游戏。在这个项目中，开发者将传统的2D贪吃蛇游戏转化为3D形式，增加了游戏的视觉效果和趣味性。游戏的核心机制包括蛇的移动、食物生成、碰撞检测以及得分系统。 **Three.js的关键组件** 1. **场景（Scene）**：所有3D对象都在场景中呈现。开发者需要创建一个场景实例，并向其中添加各种几何体、光源、相机等元素。 2. **几何体（Geometry）**：这些是3D形状的基础，如立方体、球体或平面。在3D贪吃蛇游戏中，蛇的身体和食物可能由一系列几何体组成。 3. **材质（Material）**：定义物体表面的外观，如颜色、反射、透明度等。贪吃蛇可能有不同的材质来区分身体部分和食物。 4. **相机（Camera）**：控制观察者如何看待3D场景。在3D贪吃蛇中，可能使用第一人称或第三人称相机，以便玩家可以自由查看周围环境。 5. **光源（Light）**：为场景添加照明，使3D对象看起来更加真实。在贪吃蛇游戏中，可以使用点光源或环境光来照亮场景。 6. **渲染器（Renderer）**：负责将3D场景转换成2D图像显示在屏幕上。Three.js内部包含了WebGLRenderer，它处理所有的图形渲染工作。 **Three.js开发指南** 提供的Three.Js开发指南PDF扫描版，通常会涵盖以下内容： 1. **基础知识**：介绍WebGL和Three.js的基本概念，包括坐标系统、颜色管理等。 2. **对象与属性**：详细讲解Three.js中的主要对象类型，如几何体、材质、相机和光源的属性和使用方法。 3. **动画与交互**：教学如何使用Three.js实现物体运动、用户交互，如鼠标点击或键盘控制。 4. **加载模型与纹理**：如何加载外部3D模型和应用纹理到物体表面，以增强场景的复杂性和真实性。 5. **优化技巧**：讨论性能优化策略，如减少绘制调用、批处理几何体等。 6. **实例分析**：提供实际项目案例，如3D模型展示、游戏开发等，帮助学习者理解和应用所学知识。通过学习Three.js，开发者不仅可以创建3D贪吃蛇这样的游戏，还可以制作各种3D可视化应用，如产品展示、虚拟现实体验、科学模拟等。对于初学者来说，这个项目和指南是一个很好的起点，可以深入理解Three.js的使用和3D编程的基本原理。

资源推荐

资源详情

资源评论

收起资源包目录

3D贪吃蛇.rar （2个子文件）

3D贪吃蛇

three.js 793KB

3D贪吃蛇.html 13KB

<!DOCTYPE html> <html> <meta charset="utf-8" /> <script type="text/javascript" src="three.js"></script> <body onload="init()"> <canvas id="mainCanvas" width="800px" height="600px"></canvas><br><br> P开始暂停游戏<br><br> W S A D 对应上下左右旋转地图<br><br> 箭头上下左右对应蛇上下左右的转向 <script> function init(){ function $(id){ return document.getElementById(id); } //获取一个0~X的随机数，包括0不包括X function getInt(x){ var i = Math.floor(Math.random()*x); return i; } //创建一个反光材质的方块，参数为长宽高和颜色 function createLambertCube(l,w,h,colo){ return new THREE.Mesh( //形状立方体 new THREE.CubeGeometry(l,w,h), //材质反光 new THREE.MeshLambertMaterial({color:colo}) ); } //计算方块绕原点旋转时的瞬时位置 function Rotate(Source,Angle){ var A,R; A = Math.atan2(Source.Y,Source.X) A += Angle; R = Math.sqrt(Source.X * Source.X + Source.Y * Source.Y); return { X : Math.cos(A) * R, Y : Math.sin(A) * R } } //方块自转（Y轴）的瞬时状态，du的正负控制两种方向旋转 function rotationCubeByY(obj,du){ obj.rotation.y=(obj.rotation.y-du)%(Math.PI*2); } //方块绕Y轴旋转的瞬时状态 function rotationFoodByY(obj,du){ var rot=Rotate({ X:obj.position.x,Y:obj.position.z },du); obj.position.x=rot.X;obj.position.z=rot.Y; obj.rotation.y=(obj.rotation.y-du)%(Math.PI*2); } //蛇身绕Y轴旋转的瞬时状态 function rotationSnakeByY(obj,du){ for(var i=0;i<obj.length;i++){ var rot=Rotate({ X:obj[i].body.position.x, Y:obj[i].body.position.z },du); obj[i].body.position.x=rot.X; obj[i].body.position.z=rot.Y; obj[i].body.rotation.y=(obj[i].body.rotation.y-du)%(Math.PI*2); } } //方块自转（X轴）的瞬时状态 function rotationCubeByX(obj,du){ obj.rotation.x=(obj.rotation.x-du)%(Math.PI*2); } //方块绕X轴旋转的瞬时状态 function rotationFoodByX(obj,du){ var rot=Rotate({ X:obj.position.y,Y:obj.position.z },-du); obj.position.y=rot.X; obj.position.z=rot.Y; obj.rotation.x=(obj.rotation.x-du)%(Math.PI*2); } //蛇身绕X轴旋转的瞬时状态 function rotationSnakeByX(obj,du){ for(var i=0;i<obj.length;i++){ var rot=Rotate({ X:obj[i].body.position.y, Y:obj[i].body.position.z },-du); obj[i].body.position.y=rot.X; obj[i].body.position.z=rot.Y; obj[i].body.rotation.x=(obj[i].body.rotation.x-du)%(Math.PI*2); } } //纠正旋转过程中的位移偏差 function correcyCubeRotationY(obj){ obj.rotation.y=0; //不保留小数位 obj.position.x=parseInt(obj.position.x.toFixed(0)); obj.position.z=parseInt(obj.position.z.toFixed(0)); } //纠正旋转过程中的位移偏差 function correcySnakeRotationY(obj){ for(var i=0;i<obj.length;i++){ obj[i].body.position.x=parseInt(obj[i].body.position.x.toFixed(0)); obj[i].body.position.z=parseInt(obj[i].body.position.z.toFixed(0)); obj[i].body.rotation.y=0; } } //纠正旋转过程中的位移偏差 function correcyCubeRotationX(obj){ obj.rotation.x=0; obj.position.y=parseInt(obj.position.y.toFixed(0)); obj.position.z=parseInt(obj.position.z.toFixed(0)); } //纠正旋转过程中的位移偏差 function correcySnakeRotationX(obj){ for(var i=0;i<obj.length;i++){ obj[i].body.position.y=parseInt(obj[i].body.position.y.toFixed(0)); obj[i].body.position.z=parseInt(obj[i].body.position.z.toFixed(0)); obj[i].body.rotation.x=0%(Math.PI*2); } } //纠正旋转过程中的自转角度的偏差 function rotationAll(xx,du,obj1,obj2,obj3){ if(xx=="x"){ rotationCubeByX(obj1,du); rotationFoodByX(obj2,du); rotationSnakeByX(obj3,du); }else if(xx=="y"){ rotationCubeByY(obj1,du); rotationFoodByY(obj2,du); rotationSnakeByY(obj3,du); } } //纠正旋转过程中的位移偏差 function correcyrotationAll(xx,obj1,obj2,obj3){ if(xx=="y"){ correcyCubeRotationY(obj1); correcyCubeRotationY(obj2); correcySnakeRotationY(obj3); }else if(xx=="x"){ correcyCubeRotationX(obj1); correcyCubeRotationX(obj2); correcySnakeRotationX(obj3); } } //地图转向过程中的自转角度的偏差 function correcyTurn(tow){ if(tow==65 || tow==68){ if(lastkey==87 || lastkey==83){ cube.rotation.x=0; food.rotation.x=0; } if((lastkey==68 && tow==65) || (lastkey==65 && tow==68)){ cube.rotation.y=-cube.rotation.y; food.rotation.y=-food.rotation.y; } }else if(tow==83 || tow==87){ if(lastkey==65 || lastkey==68){ cube.rotation.y=0; food.rotation.x=0; } if((lastkey==83 && tow==87) || (lastkey==87 && tow==83)){ cube.rotation.y=-cube.rotation.y; food.rotation.x=-food.rotation.x; } } lastkey=tow; } //判断是否为食物 function isFood(x,y,z){ if( x==food.position.x && y==food.position.y && z==food.position.z){ scene.remove(food); snake.splice(0,0,{body:createLambertCube(1,1,1,0x4F9D9D)} ); scene.add(snake[0].body); cooking(); } else return false; } //制作一个食物 function cooking(){ food.position.x=getInt(8); food.position.y=getInt(8); food.position.z=getInt(8); for(var i=0;i<snake.length;i++) if( food.position.x==snake[i].body.position.x && food.position.y==snake[i].body.position.y && food.position.z==snake[i].body.position.z){ i=-1; food.position.x=getInt(8); food.position.y=getInt(8); food.position.z=getInt(8); } scene.add(food); } //更新蛇身位置数据，蛇头不变 function updateSnake(){ for(var i=0;i<snake.length-1;i++){ snake[i].body.position.x=snake[i+1].body.position.x; snake[i].body.position.y=snake[i+1].body.position.y; snake[i].body.position.z=snake[i+1].body.position.z; } } //获取蛇当前前行的方向，用蛇头减去蛇脖子 function getToward(){ var toward=""; if(snake[snake.length-1].body.position.x- snake[snake.length-2].body.position.x>0) toward="+x"; else if(snake[snake.length-1].body.position.x- snake[snake.length-2].body.position.x<0) toward="-x"; else if(snake[snake.length-1].body.position.y- snake[snake.length-2].body.position.y>0) toward="+y"; else if(snake[snake.length-1].body.position.y- snake[snake.length-2].body.position.y<0) toward="-y"; else if(snake[snake.length-1].body.position.z- snake[snake.length-2].body.position.z>0) toward="+z"; else if(snake[snake.length-1].body.position.z- snake[snake.length-2].body.position.z<0) toward="-z"; return toward; } //创建渲染器并绑定画布 var renderer=new THREE.WebGLRenderer({ canvas:document.getElementById("mainCanvas") }); //渲染器初始化 renderer.setClearColor(0x666666); //创建场景 var scene=new THREE.Scene(); //创建照相机并绑定画布 var camera=new THREE.PerspectiveCamera(65,$("mainCanvas").width/$("mainCanvas").height,1,100); //照相机位置 camera.position.set(10,9,20); //照相机观测方向 camera.lookAt(new THREE.Vector3(0,0,0)); //将照相机添加至场景中 scene.add(camera); //创建地图 var cube=new THREE.Mesh( new THREE.CubeGeometry(15,15,15), new THREE.MeshBasicMaterial({color:0x999999,wireframe:true}) ); //添加地图 scene.add(cube); //定义食物 var food=createLambertCube(1,1,1,0x53FF53); //定义蛇 var snake=[

评论收藏

内容反馈