Threejs系列-14游戏开发-沙漠赛车游戏纹理地图loading加载】
- 序言
- 目录结构
- 代码一览
-
- world/index.js代码
- Application.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 精灵类 【新增--loading材料纹理 | |__Floor.js 地面类 | |__Application.js 游戏初始化文件 |__index.js 入口 |__index.css 小项目，风格丢失
代码一览
world/index.js代码
... export default class {
constructor(){
... //设置启动屏 this.setStartingScreen(); } setStartingScreen() {
this.startingScreen = {
}; this.startingScreen.loadingLabel = {
}; //创建loading展示的矩形区域/span> 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); } ... } Application.js代码
...
export default class Application extends React.Component {
...
setCamera(){
...
this.camera.instance.position.z = 5;
//相机实例添加到场景中
this.scene.add(this.camera.container);
}
...
}
代码解读
world/index.js中的setStartingScreen方法实现了loading展示。
通过纹理贴图，将需要展示的图片导入;
将纹理添加到材质上;
将材质与几何体结合,添加到3d容器中准备展示。
前期为了看的见，可以将相机的z轴加大，相信你已经对threejs有了更深刻的认识，代码emmmm随便加，我放在了setCamera方法中。下章会调节相机角度，本章就随意加了。
运行结果
