three.js实现简单的跳一跳逻辑

最新推荐文章于 2024-04-19 10:00:00 发布

风舞红枫

最新推荐文章于 2024-04-19 10:00:00 发布

阅读量589

点赞数 1

分类专栏： three 文章标签： three.js

本文链接：https://blog.csdn.net/qq_42231248/article/details/114384575

版权

three 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

无图不欢，先上静态图
在这里插入图片描述
图片资源下载
操作使用空格

<!DOCTYPE html>
<html>
<head>
    <meta name="keywords" content="风舞红枫,前端技术,canvas"/>
    <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
    <title>three.js演示</title>
    <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="OrbitControls.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        canvas{display:block;}
    </style>
</head>
<body>
	<div id="fwhf"></div>
	<script type="text/javascript">
		window.onload = function(){
			class FwhfYZH{
				constructor(){
					this.speedStart = 0;
					this.speedMove = 0
					this.i = 0;
					this.init();	
				}
				init(){
					// 创建一个渲染器
					this.renderer = new THREE.WebGLRenderer({antialias: true});
					this.renderer.setSize(window.innerWidth,window.innerHeight);
					this.renderer.setClearColor('#222',1);
					this.renderer.shadowMap.enabled  = true;
					document.getElementById("fwhf").append(this.renderer.domElement);

					//创建一个场景
        			this.scene=new THREE.Scene();

        			//创建一个相机
					this.camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
					this.camera.position.x=0;
			        this.camera.position.y=80;
			        this.camera.position.z=120;

			        this.help();
			        this.light();
			        this.cylinder();
			        this.character();
			        this.start();

					window.onkeydown = (e)=>{
						var e = e || event;
						if(e.keyCode == 32){
							if(this.cylind[this.i]['scaleIndex'] > 0.5){
								this.cylind[this.i]['scaleIndex'] -= 0.02;
								this.cylind[this.i].position.y -= 14*0.01;
								this.cylind[this.i].scale.set(1,this.cylind[this.i]['scaleIndex'],1);

								this.cube.position.y -= 14*0.02;
							}
						}
					}
					window.onkeyup = (e)=>{
						var e = e || event;
						if(e.keyCode == 32){
							this.speedStart = (1-this.cylind[this.i]['scaleIndex'])*10;
							this.speedMove = (1-this.cylind[this.i]['scaleIndex'])*10;

							this.cylind[this.i]['scaleIndex'] = 1;
							this.cylind[this.i].position.y = 7;
							this.cylind[this.i].scale.set(1,this.cylind[this.i]['scaleIndex'],1);

							this.cube.position.y = 17;
						}
					}
				}
				help(){
					//三维辅助线
				    var axes=new THREE.AxesHelper(40);
				    this.scene.add(axes);
				}
				light(){
				    // 创建光源
			        var light = new THREE.SpotLight(0xffffff,1,0);
			        light.position.set(40,60,100);
			        light.castShadow = true;
			        this.scene.add(light);
				}
				cylinder(){
					this.cylind = [];
					for(var i = 0 ; i < 50 ; i++){
						var texture = new THREE.TextureLoader().load( "tyt512.png" );
						var geometry = new THREE.CylinderGeometry( 14, 14, 14, 32 );
						var material = new THREE.MeshLambertMaterial( {map:texture,transparent:true,side:THREE.DoubleSide} );
						this.cylind[i] = new THREE.Mesh( geometry, material );
						this.cylind[i].position.y += 7;
						this.cylind[i].position.x -= 40*i;
						this.cylind[i]['scaleIndex'] = 1;
						this.cylind[i].receiveShadow = true;
						this.scene.add( this.cylind[i] );
					}
				}
				character(){
					var geometry = new THREE.BoxGeometry( 6, 6, 6 );
					var material = new THREE.MeshLambertMaterial();
					this.cube = new THREE.Mesh( geometry, material );
					this.cube.position.y = 17;
					this.cube.castShadow = true; 
					this.scene.add( this.cube );
					// this.camera.lookAt(this.cube.position);
				}
				characterAnimation(){
					if(this.speedStart != 0){
						this.cube.position.y += this.speedMove;
						this.cube.position.x -= (this.speedMove+this.speedStart)/2;
						this.camera.position.x -= (this.speedMove+this.speedStart)/2;
						// this.camera.lookAt(this.cube.position);
						// this.camera.position.z += (this.speedMove+this.speedStart)/4;
						this.speedMove -= 0.1;
						if(this.speedMove <= -this.speedStart){
							this.speedMove = this.speedStart = 0;
							this.cube.position.y = 17;
							this.i++;
							if(this.cube.position.x < this.i*(-40)-14 || this.cube.position.x > this.i*(-40)+14){
								alert('Game over');
								location.href = location.href;
							}
						}
					}
				}
				start(){
					this.controls = new THREE.OrbitControls(this.camera);
					this.controls.addEventListener('mousemove', this.renderer);
				    this.controls.update();
					this.animate();
				}
				animate(){
				    requestAnimationFrame( this.animate.bind(this) );
				    // this.controls.update();
				    this.characterAnimation();
				    this.renderer.render( this.scene, this.camera );
				}
				rand(n,m){
					var c = m - n + 1;
					return Math.floor(Math.random() * c + n);
				}
			}
			new FwhfYZH();
		}
	</script>
</body>
</html>

风舞红枫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
three.js实现简单的跳一跳逻辑

无图不欢，先上静态图图片资源下载操作使用空格<!DOCTYPE html><html><head> <meta name="keywords" content="风舞红枫,前端技术,canvas"/> <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/> <title>three.js演示</title
复制链接

扫一扫