Threejs沙漠赛车游戏系列-16游戏开发【loading与start切换效果】
- 序言
- 目录结构
- 新增依赖
- 代码一览
-
- world/index.js代码
- 代码解读
- 运行结果
序言
本章将使页面中的loading实现自动切换。
目录结构
资源目录中的结构保持不变，点击传送门快速查看。
|__src |__assets |__js | |__base基本文件夹 | |__Camera.js 相机类 | |__geometries 物体类文件夹定制 | |__materials 材质类文件夹 | |__Floor.js 地面材质 | |__passes 合成器通道文件夹 | |__Blur.js 模糊着色器 | |__Glows.js 发光着色器 | |__utils 工具文件夹 | |__Sizes.js 画布尺寸控制类 | |__EventEmitter.js 基本事件处理器 | |__Time.js 动画刷新 | |__world 精灵文件夹 | |__index.js 精灵类 【新增--start贴图，loading与start基本切换 | |__Floor.js 地面类 | |__Application.js 游戏初始化文件 |__index.js 入口 |__index.css 小项目，风格丢失
新增依赖
： GSAP 是强大的 JavaScript 工具集可以把开发者变成动画超级英雄。构建适合所有主流浏览器的高性能动画。 CSS、SVG、画布、React、Vue、WebGL、颜色 balabalabala…
总之呢~~简单好用，gsap有完整的文档，可以自己阅读。
代码一览
world/index.js代码
... import gsap from "gsap"; export default class {
... setStartingScreen() {
this.startingScreen = {
}; this.startingScreen.loadingLabel = {
}; //创建loading展示的矩形区域 this.startingScreen.loadingLabel
.geometry
=
new
THREE.PlaneBufferGeometry
(
2.5
,
2.5
/
4
)
;
//加载图片
this
.startingScreen
.loadingLabel
.image
=
new
Image
(
)
;
this
.startingScreen
.loadingLabel
.image
.src
=
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABABAMAAAAHc7SNAAAAMFBMVEUAAAD///9ra2ucnJzR0dH09PQmJiaNjY24uLjp6end3d1CQkLFxcVYWFiqqqp9fX3nQ5qrAAAEVUlEQVRo3u3YT08TQRQA8JEtW6CATGnDdvljaTwYE2IBI/HGRrwSetGTsZh4MPFQYiQe229gE++WePFY9Oqh1cRzieEDYIgXLxjPJu5M33vbZQszW+fgoS+B7ewO836znRl2lg1jGMP4P2Okw0yFvaKsklr3I99Tvl3iPPelGbQhKqxB4eN6N/7gVcsvbEAz1F4RLn67zzl/v6/oLvejGBQ9LsNphio4UFjmEAsVJuOK/zkDtc6w+gyTcZ3LyP6IAzjBDA+pj6LkEgAjW4kANsMAC6vmOvqAMU5RgVOTskQACicCmCcA9AXjkT5gj1MswqlxWcoTgKJ6HuAQAD5guNoAu8QpMnBul1ONMGD2PCBbRgDAKYq6AEtmXvtdj3S6GhRyW1t1DvkAgM0ggG7mu1t3xWFHFzAqv3wYCi0mY1UCGgiQPU+1oWIY8LoXcAA3qeYfr+kClvHW14PJ5OfCAgHYNAoDAORBQIrDvHjqH5c0ANTbORzBacbAQgUC2IAKAzI9gCSHlWEMLmgBPJxMvyARpIICALDm4nkAbwIA71EZx5UOgO48JnLoOhQIAN9sOgKoBoAE5r0aB8ARcNhtFzrg0VQmwCp8CAMeAADGc44S5GMBsF1aCEU2LcAcAPDCvwFytBDehCaUgJxRAKeF8BNUUQJ43iiAUlqwFKoBrTCAHjiagwEgU0YM5IYWYD4KoIgPwIXQwUbVgCXzgLpIBJNeDciWTQNskVsq1ADX/6kYBdCTjse5owbMiX+IpgGWOCPSuWpA2vN/TAMm5QTYg5IC4FdbMA0YF5Nb5s2rAaLyhzBgektGZWDArrgqi0U1QHxf38OABDwUDgTAjGfyPlTVgJT/67FBACbqyGYaaoBctQwD2vI4DecVAPkgZRhQlxPQks2rAePGAbZsRlaa1QBYEQBUHRCAmaXD0QDYxgFWdye05R9cDQCrmQYkeBA6gGXTgNEeQF4DMG4S4MLjOUZRA5A0CcjADgmjqgGwSwSg9wK1GIBS74KTgTxv/EHoiaVQsTOS5RoCJuiZyosB8EIrHpyowFiYofO0i4wCjhCQwL0hq2sCaFNM22S4JXloLk0AuLDTBzCBAAt3xykeA7CHe/mDbgdTvQ9GswSAwdbqA0giYASHjQUJnhQKhQ6z/d8rDA4hAG2Dsk042ejubHMM2nV6AMf93pCkaRjhh0WsWuz+6aasl2FwiAImReEts1/CSaFfwFouAJxC4RW+I4oCThBQE1X2WbKkBFDkqYDtJ0SHaYKq3pJJwCECjjiFPoC1w+2P0gumurgeBjT6AhIIGKOelGIAngWlFnRnMZjMIYBb7gtIIsAuYU+8GICpEhYyZVgIZ2g9rYYAX1lfAKvjnxzjnWrHALDn9K1h2k2aoI1ewGd2AWAVAVMHcKdW4wDYje739pNufJXhkJohgLu9zy4CHCKAJYUge4ddCojGyPrp9kaHmYjUi9N7+2wYwxjGZfEXMKxGE0GkkfIAAAAASUVORK5CYII='
;
//生成纹理贴图
this
.startingScreen
.loadingLabel
.texture
=
new
THREE.Texture
(
this
.startingScreen
.loadingLabel
.image
)
;
//当一个纹素覆盖大于一个像素时，贴图采样方式
this
.startingScreen
.loadingLabel
.texture
.magfilter
=
THREE
.NearestFilter
;
//当一个纹素覆盖小于一个像素时，贴图采样方式
this
.startingScreen
.loadingLabel
.texture
.minFilter
=
THREE
.LinearFilter
;
//下次使用纹理时触发一次更新
this
.startingScreen
.loadingLabel
.texture
.needsUpdate
=
true
;
//创建材质
this
.startingScreen
.loadingLabel
.material
=
new
THREE.MeshBasicMaterial
(
{
transparent
:
true
,
depthWrite
:
false
,
color
:
0xffffff
,
alphaMap
:
this
.startingScreen
.loadingLabel
.texture
}
)
;
//组装
this
.startingScreen
.loadingLabel
.mesh
=
new
THREE.Mesh
(
this
.startingScreen
.loadingLabel
.geometry
,
this
.startingScreen
.loadingLabel
.material
)
;
//不计算每一帧
this
.startingScreen
.loadingLabel
.mesh
.matrixAutoUpdate
=
false
;
this
.container
.
add
(
this
.startingScreen
.loadingLabel
.mesh
)
;
//start的贴图
this
.startingScreen
.startLabel
=
{
}
;
this
.startingScreen
.startLabel
.geometry
=
new
THREE.PlaneBufferGeometry
(
2.5
,
2.5
/
4
)
;
this
.startingScreen
.startLabel
.image
=
new
Image
(
)
;
this
.startingScreen
.startLabel
.image
.src
=
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABABAMAAAAHc7SNAAAAMFBMVEUAAAD///+cnJxra2vR0dHd3d0mJib09PRYWFjp6em4uLhCQkKqqqqNjY19fX3FxcV3XeRgAAADsklEQVRo3u3YsU9TQRwH8KNgLSDQg9ZCAak1IdE4PKPu1NTEsSzOMDl3I3GpcXAxBhLjXFxNjJgQJ2ON0Rnj4uAAEyv8B/L7tV++5/VN+CM69Ldwfa+534d7d793VzeIQQzi/49c4v5lPF/1vvhFm++rjIpcyErrmrSCuz+cxng1iL/If8drPJD2Lc/Iy4VhaZWlFd4tLPfuMc6e/5LvRilJA2SkVSQA8c0OsI0uNtIAU9rsB8y1rAAZjyimAUa1mQDAeGwF+MA+9lIA69qs9AMKVoDP8vhf35A+NiMAc7YJKFSrX7tcI8BW9+k/O/kz6zSunjSnncMHiQYBcmdXrh3xCVbc2WO8N/YZZI0AxxwMArKivmwAwFKSPmV0UwBbCpj5E+C+yzUbQAaJVwUSA9SFjwFgHQ0jAMrBWgzAPCtHgFFbQAlpEwKC2zWUQgJGbAH+naSdu/fTxQAthPL5/ADD6OCpQwCAsb6LsbEGcBluOAYBmG2fkMIawHVWXEsDIGUGpZCAIRsAS93DPgDbhUmUQgKe2NUB90hfhK0YwEJYHkYpJGDbqBKiB86CGLAlzd6/S8CEvh8sACiBvrSXCshKblWEgNy2vkAMAHwGfjECcJHOu5qUQgDm6vXulshZAXJNL9GJAeg+LxeKPQBj1gzgdlnuCWAhbOi7LwaU9u0A2VWPpUgAC+GR5k0iwBtnB3Bj3qMaRYB17X0IOQhYcjYA7guxxyIAGfd1HNqchPfly7aACQUshAA2W1r5G1yG415YpgB3qIIkAHBH2D075QnQ10fHDsCl+CoGSKpiN8kMAVqIN00BsitnVgKyPIBMB4ADKU92AA5BKQIgszjKBGBLagpwB5xZBGS6pbcuizQAXMA6NAK86OCQ3okAI55BQPe7VoDxXzU/iwPASgS4GAASAiYxWgYAzvAa1loA2AkAFQIU2zEELCJtDDgIAG0CFLvp7LblC2kAtF6eTEJJ2CBAr88bAXKY4WkASbzXmwt5AvTvohHA4WSUBmj2Jt+IThQChrAOLQC13vPFMAOAQwuyTAeAKVQto3OBDOdESh2YxNZPbpYBQNbEAoBfod7e1i1BiwB0voSZWgwAOWgtAGPhD18E8ASIiRIAXNPwXJBtcqMbAFAIr5weIJMAcIx1aAAIqk0lAuycompyFwBMHAsAZlj/lgw0rsy2AkhbsgK4Q+70CUBjxeFXsUb0G1HJDJC9rketZRcCWCJwHM8DgJm7b7ch+XizXm25QQxiEOcXvwGCWOhbCZC0qAAAAABJRU5ErkJggg=='
;
this
.startingScreen
.startLabel
.texture
=
new
THREE.Texture
(
this
.startingScreen
.startLabel
.image
)
;
this
.startingScreen
.startLabel
.texture
.magfilter
=
THREE
.NearestFilter
;
this
.startingScreen
.startLabel
.texture
.minFilter
=
THREE
.LinearFilter
;
this
.startingScreen
.startLabel
.texture
.needsUpdate
=
true
;
this
.startingScreen
.startLabel
.material
=
new
THREE.MeshBasicMaterial
(
{
transparent
:
true
,
depthWrite
:
false
,
color
:
0xffffff
,
alphaMap
:
this
.startingScreen
.startLabel
.texture
}
)
this
.startingScreen
.startLabel
.material
.opacity
=
0
;
this
.startingScreen
.startLabel
.mesh
=
new
THREE.Mesh
(
this
.startingScreen
.startLabel
.geometry
,
this
.startingScreen
.startLabel
.material
)
;
this
.startingScreen
.startLabel
.mesh
.matrixAutoUpdate
=
false
;
this
.container
.
add
(
this
.startingScreen
.startLabel
.mesh
)
;
//状态切换 window
.
requestAnimationFrame
(
(
)
=>
{
gsap
.
to
(
this
.startingScreen
.loadingLabel
.material
,
{
duration
:
0.3
,
opacity
:
0
}
)
; gsap
.
to
(
this
.startingScreen
.startLabel
.material
,
{
duration
:
0.3
,
opacity
:
1
,
delay
:
0.3
}
)
;
}
)
}
...
}
代码解读
world/index.js在setStartingScreen()，loading下面新增了start，除了图片内容与透明度不一致，其它都一样。
整体过程让loading显示，start先透明。
之后在requestAnimationFrame中，将loading透明，start显示。
如果你运行了代码，切换是不是猝不及防0.0
这里只是简单的loading切换，下一步将在资源加载完毕的情况下进行状态切换。
运行结果
