three-jump
基于three.js的跳一跳 在线试一试
three 必要
scene, camera and renderer, ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); ```
添加一个3D对象的必要步骤
javascript
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
当看不到物体时，尝试设置相机位置(step-1)
javascript
camera.position.set(0, 0, 25);
camera.position.z = 25;
利用editor调整相机位置
javascript
camera.position.set(-7.97, 16.97, 17.59);
lookAt
利用插件调整相机(step-2)
javascript
import OrbitControls from 'three-orbitcontrols';
var controls = new OrbitControls(camera, renderer.domElement);
loader
```javascript // instantiate a loader var loader = new THREE.JSONLoader();
// load a resource loader.load( // resource URL 'models/animated/monster/monster.js',
// onLoad callback
function ( geometry, materials ) {
var material = materials[ 0 ];
var object = new THREE.Mesh( geometry, material );
scene.add( object );
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function( err ) {
console.log( 'An error happened' );
}
);
loader.parse ---> .js
ObjectLoader.prototype.parse ---> .json ```
灯光
javascript
DirectionalLigh + AmbientLight
阴影(都必须设置阴影才有效)
javascript
renderer.shadowMap.enabled = true;
Light.castShadow = true;
cube.castShadow = true; // Mesh
// 部分场景还需接收阴影
floor.receiveShadow = true;
游戏逻辑(step-3)
- 缩小身体
- 跳跃， 方块创建方向 = 跳跃方向， 跳跃动画
- 检测是否跳到方块上
-
倒地方向
左手坐标系，右手扭动旋转轴，顺时针为负数(角度)。 5. 移动相机，移动灯光 6. 删除不可见的方块
参考文献
- 基于HTML5的移动电商系统前端的设计与实现（南京大学·段跃润）
- 基于SSH架构的个人空间交友网站的设计与实现（北京邮电大学·隋昕航）
- 网上购物模拟系统（吉林大学·郭秋野）
- 基于SSH框架和ExtJs框架的资质管理系统的设计与实现（云南大学·职辉）
- J2EE平台下快速WEB开发的研究与应用（武汉理工大学·李涛）
- 基于Web Service的企业搜索引擎的架构及优化（吉林大学·吴学义）
- 基于SSH框架和ExtJs框架的资质管理系统的设计与实现（云南大学·职辉）
- 基于JSP的雄霸天下游戏网的后台操作系统的开发设计（电子科技大学·张璇）
- 基于WebWork+Spring+Hiberante架构的Web应用的研究与实现（大连海事大学·吴波）
- 基于WCA的Web组件测试研究（华中科技大学·方磊）
- 基于SSH架构的个人空间交友网站的设计与实现（北京邮电大学·隋昕航）
- 移动端音乐Web APP的设计与实现（华中科技大学·金旻）
- J2EE平台下快速WEB开发的研究与应用（武汉理工大学·李涛）
- 基于WCA的Web组件测试研究（华中科技大学·方磊）
- 基于.NET的Web应用框架的设计与实现（解放军信息工程大学·郭晓峰）
本文内容包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主题。发布者：源码项目助手 ，原文地址：https://m.bishedaima.com/yuanma/35952.html
