第如何利用Three.js實現(xiàn)跳一跳小游戲目錄前言游戲規(guī)則Three.js整個程序的結(jié)構(gòu)實現(xiàn)html文件引入three.js引擎頁面結(jié)構(gòu)場景相機(jī)幾何體光源渲染添加第二塊跳塊鼠標(biāo)按下狀態(tài)鼠標(biāo)松開彈起狀態(tài)落在哪里結(jié)尾

前言

跳一跳是微信小程序的一個小游戲。長按屏幕讓小人蓄力跳躍，進(jìn)行游玩。按照小人跳躍盒子的數(shù)量，以及特殊盒子加分項計算得分。

游戲地址：不會搞（所以沒放）git地址：/fwjzzz/Jump

游戲規(guī)則

十分簡單：長按鼠標(biāo)蓄力、放手，方塊就會從一個盒子跳到另一個盒子。然而就是這個小動作，讓你一旦開始就魔性地停不下來。

Three.js

Three.js是一款運行在瀏覽器中的3D引擎，你可以用它創(chuàng)建各種三維場景，包括了攝影機(jī)、光影、材質(zhì)等各種對象。

創(chuàng)建一個場景設(shè)置光源創(chuàng)建相機(jī)，設(shè)置相機(jī)位置和相機(jī)鏡頭的朝向創(chuàng)建3D渲染器，使用渲染器把創(chuàng)建的場景渲染出來

整個程序的結(jié)構(gòu)

實現(xiàn)

html文件引入three.js引擎

scriptsrc="/js/three.min.js"/script

頁面結(jié)構(gòu)

div

div

div

p本次得分/p

h10/h1

/div

button

重新開始

/button

/div

/div

div

audioloop="loop"autoplaycontrolssrc="/20250413225245/3060206bc37e3226b7f45fa1

49b0fb2b/jdymusic/obj/wo3DlMOGwrbDjj7DisKwe351/984c/1f8b/f6d3165d6b04dc78ec0d3c273ce02ff2.mp3"

/audio

div

得分：span0/span

/div

/div

場景

letscene=newTHREE.Scene();

//創(chuàng)建一個場景

相機(jī)

常用的相機(jī)有兩種：

透視相機(jī)PerspectiveCamera

符合人心理習(xí)慣，近大遠(yuǎn)小。

正視相機(jī)OrthographicCamera

遠(yuǎn)處和近處一樣大

letcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);

//創(chuàng)建一個透視相機(jī)4個參數(shù)（視覺范圍，寬高比例，近距離，遠(yuǎn)距離）

camera.position.z=10;

camera.position.y=3;

camera.position.x=8;

//相機(jī)的xyz場景方向

幾何體

使用CubeGeometry創(chuàng)建一個立方幾何體，使用MeshLambertMaterial材質(zhì)用來配置立方體渲染看上去暗淡不光亮的表面，該材質(zhì)會對場景中的光源產(chǎn)生反應(yīng)，這個材質(zhì)可以配置一些其他屬性如：顏色等。

letgeometry=newTHREE.CubeGeometry(4,2,4);

//創(chuàng)建一個幾何體對象（寬，高，深度）

letmaterial=newTHREE.MeshLambertMaterial({color:0xbebebe});

//創(chuàng)建了一個可以用于立方體的材質(zhì),對象包含了顏色、透明度等屬性，

letcube=newTHREE.Mesh(geometry,material);

//結(jié)合在一起

cube.position.x=16;

scene.add(cube);

//添加到場景中

光源

場景Scene主要是由幾何體模型和光Light構(gòu)成，在實際開發(fā)過程中，大多數(shù)三維場景往往需要設(shè)置光源，通過不同的光源對模型模擬生活中的光照效果，尤其是為了提高Threejs的渲染效果更需要設(shè)置好光源，就像攝影師拍照要打燈一樣。

letdirectionalLight=newTHREE.DirectionalLight(0xffffff,1.1);

//平行光（顏色，強(qiáng)度)

directionalLight.position.set(3,10,5);

//平行光位置

scene.add(directionalLight);

//在場景中加入平行光

letlight=newTHREE.AmbientLight(0xffffff,0.4);

//光的材質(zhì)

scene.add(light);

//把光添加到場景

渲染

直接通過WebGL渲染器WebGLRenderer的.setSize()方法設(shè)置渲染尺寸為瀏覽器body區(qū)域?qū)捀叨取?/p>

letrenderer=newTHREE.WebGLRenderer({antialias:true});

//創(chuàng)建一個渲染器（讓邊緣動畫沒有鋸齒感）

renderer.setSize(window.innerWidth,window.innerHeight);

//畫布寬高

renderer.setClearColor(0x282828);

//修改畫布顏色

renderer.render(scene,camera);

//渲染場景相機(jī)（后續(xù)更新也是這里）

document.body.appendChild(renderer.domElement);

//把當(dāng)前渲染的畫布放到body里面

letx=8;

functionrender(){

//遞歸

x-=0.1;

camera.position.x=x;

renderer.render(scene,camera);

//更新重新渲染

if(x=-8){

//滿足當(dāng)前條件

requestAnimationFrame(render)

//循環(huán)渲染

}

目前為止實現(xiàn)了一個雛形

添加第二塊

_createCube(){

letgeometry=newTHREE.CubeGeometry(this.config.cubeWidth,this.config.cubeHeight,this.config.cubeDeep);

//創(chuàng)建一個幾何體對象（寬，高，深度）

letmaterial=newTHREE.MeshLambertMaterial({

color:this.config.cubeColor

//材質(zhì),對象包含了顏色、透明度等屬性，

letcube=newTHREE.Mesh(geometry,material);//合并在一起

if(this.cubes.length){

//從第二塊開始隨機(jī)左右方向出現(xiàn)

cube.position.x=this.cubes[this.cubes.length-1].position.x;

cube.position.y=this.cubes[this.cubes.length-1].position.y;

cube.position.z=this.cubes[this.cubes.length-1].position.z;

this.cubeStat.nextDir=Math.random()0.5"left":"right";//要不左邊要不右邊

if(this.cubeStat.nextDir=="left"){

//左邊改變x軸否則y軸

cube.position.x=cube.position.x-Math.round(Math.random()*4+6);

}else{

cube.position.z=cube.position.z-Math.round(Math.random()*4+6);

this.cubes.push(cube);//統(tǒng)一添加塊

if(this.cubes.length5){

//頁面最多看到5個塊

this.scene.remove(this.cubes.shift());//超過就移除

this.scene.add(cube);//添加到場景中

if(this.cubes.length1){

//更新鏡頭位置

this._updateCameraPros();

};

定義一個方塊數(shù)組，判斷從第二塊開始向左右兩邊隨機(jī)出現(xiàn)。this.cubeStat.nextDir=Math.random()0.5left:right如上圖：(這是由兩張圖組成的)

跳塊

_createJumper(){

letgeometry=newTHREE.CubeGeometry(this.config.jumperWidth,this.config.jumperHeight,this.config

.jumperDeep);//（寬，高，深度）

letmaterial=newTHREE.MeshLambertMaterial({

color:this.config.jumperColor

});//材質(zhì),顏色、透明度

this.jumper=newTHREE.Mesh(geometry,material);//合并在一起

this.jumper.position.y=1;//顯示跳塊

geometry.translate(0,1,0);//平移

this.scene.add(this.jumper);//添加到場景中

}

使用Geometry幾何體對象有一系列的頂點屬性和方法，通過.scale()、.translate()、.rotateX()等方法可以對幾何體本身進(jìn)行縮放、平移、旋轉(zhuǎn)等幾何變換。注意本質(zhì)上都是改變結(jié)合體頂點位置坐標(biāo)數(shù)據(jù)。

鼠標(biāo)按下狀態(tài)

this.jumperStat={

//鼠標(biāo)按下速度

ready:false,

xSpeed:0,

ySpeed:0

};

_handleMouseDown(){

if(!this.jumperStat.readythis.jumper.scale.y0.02){

this.jumper.scale.y-=0.01;//壓縮塊

this.jumperStat.xSpeed+=0.004;

this.jumperStat.ySpeed+=0.008;

this._render();

requestAnimationFrame(()={

this._handleMouseDown()

};

鼠標(biāo)松開彈起狀態(tài)

人生不就是這樣嗎？只要你跳對了位置，就能夠逆襲！

//鼠標(biāo)松開談起狀態(tài)

_handleMouseUp(){

this.jumperStat.ready=true;

if(this.jumper.position.y=1){

if(this.jumper.scale.y1){

this.jumper.scale.y+=0.1;//壓縮狀態(tài)小于1就+

if(this.cubeStat.nextDir=="left"){

//挑起盒子落在哪里

this.jumper.position.x-=this.jumperStat.xSpeed;

}else{

this.jumper.position.z-=this.jumperStat.xSpeed;

this.jumper.position.y+=this.jumperStat.ySpeed;

this.jumperStat.ySpeed-=0.01;//上升落下狀態(tài)

this._render();

requestAnimationFrame(()={

//循環(huán)執(zhí)行

this._handleMouseUp();

}else{

//落下狀態(tài)

this.jumperStat.ready=false;

this.jumperStat.xSpeed=0;

this.jumperStat.ySpeed=0;

this.jumper.position.y=1;

this.jumper.scale.y=1;

this._checkInCube();//檢測落在哪里

if(this.falledStat.location==1){

//下落后等于1，+分?jǐn)?shù)

this.score++;

this._createCube();

this._updateCamera();

if(this.successCallback){

//否則失敗

this.successCallback(this.score);

}else{

this._falling()

};

落在哪里

學(xué)會控制速度感是非常奇妙的事情。當(dāng)你慢下來了，學(xué)會控制速度。因為在每一個過程當(dāng)中，都有你生命中值得停下來瀏覽、欣賞、感受的事物。在我們的認(rèn)知中，總覺得越快，擁有的時間就越多，效率就越高，生產(chǎn)力就提高。其實并不是。如果你的頭腦常常處在思維高速運轉(zhuǎn)的狀態(tài)，一定會感覺繁忙且毫無頭緒；如果你總是擔(dān)心著未來或者掛念過去，就無法專注在當(dāng)下所做的事，也一定感到時間不夠用，效率大大降低。

this.falledStat={

location:-1,//落在哪里當(dāng)前塊塊上

distance:0,//距離是否倒下

this.fallingStat={

//有沒有落到點

end:false,

speed:0.2

}

//檢測落在哪里

//-1-10從當(dāng)前盒子掉落

//1下一個盒子上10從下一個盒子上掉落

//0沒有落在盒子上

_checkInCube(){

letdistanceCur,distanceNext;

//當(dāng)前盒子距離下一個盒子距離

letshould=(this.config.jumperWidth+this.config.cubeWidth)/2;

if(this.cubeStat.nextDir=="left"){

//往左走了

distanceCur=Math.abs(this.jumper.position.x-this.cubes[this.cubes.length-2].position.x);

distanceNext=Math.abs(this.jumper.position.x-this.cubes[this.cubes.length-1].position.x);

}else{

//往右走了

distanceCur=Math.abs(this.jumper.position.z-this.cubes[this.cubes.length-2].position.z);

distanceNext=Math.abs(this.jumper.position.z-this.cubes[this.cubes.length-1].position.z);

if(distanceCurshould){

//落在當(dāng)前塊

this.falledStat.distance=distanceCur;

this.falledStat.location=distanceCurthis.config.cubeWidth/2-1:-10;

}elseif(distanceNextshould){

//落在下一個塊上

this.falledStat.distance=distanceNext;

this.falledStat.location=distanceNextthis.config.cubeWidth/21:10;

}else{

//落在中間

this.falledStat.location=0;

};

落到方塊上，停上一會兒，放松自己，亦會有十分的額外獎勵。人生路上，匆匆忙忙趕路的時候，不要忘了適度休息調(diào)整，你會有意外地收獲，命運的魔方會給你別致的驚喜。人生很短，何須急著走完。

//下落過程

_falling(){

if(this.falledStat.location==10){

//從下一個盒子落下

if(this.cubeStat.nextDir=="left")