Threejs系列--14游戏开发--沙漠赛车游戏【纹理贴图之loading加载】
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展示的矩形区域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方法中。下章会调节相机角度,本章就随意加了。
运行结果
Threejs系列--14游戏开发--沙漠赛车游戏【纹理贴图之loading加载】相关推荐
- Threejs系列--9游戏开发--沙漠赛车游戏【基础场景渲染】
Threejs系列--9游戏开发--沙漠赛车游戏[基础场景渲染] 序言 准备工作 目录结构 代码一览 index.js代码 index.css代码 Camera.js代码 Sizes.js代码 App ...
- Threejs系列--11游戏开发--沙漠赛车游戏【初步加载地面】
Threejs系列--11游戏开发--沙漠赛车游戏[初步加载地面] 序言 目录结构 代码一览 world/index.js代码 world/Floor.js代码 materials/Floor.js代 ...
- Threejs系列--22游戏开发--沙漠赛车游戏【布置游戏开始场景】
Threejs系列--22游戏开发--沙漠赛车游戏[布置游戏开始场景] 序言 目录结构 代码一览 index.js代码 Objects.js代码 Materials.js代码 materials/Fl ...
- Threejs系列--10游戏开发--沙漠赛车游戏【基础事件处理器】
Threejs系列--9游戏开发--沙漠赛车游戏[基础事件处理器] 序言 目录结构 代码一览 Time.js代码 EventEmitter.js代码 Sizes.js代码 Application.js ...
- Threejs系列--16游戏开发--沙漠赛车游戏【loading与start切换效果】
Threejs系列--16游戏开发--沙漠赛车游戏[loading与start切换效果] 序言 目录结构 新增依赖 代码一览 world/index.js代码 代码解读 运行结果 序言 本章将使页面中 ...
- Threejs系列--18游戏开发--沙漠赛车游戏【loading资源加载进度条】
Threejs系列--18游戏开发--沙漠赛车游戏[loading资源加载进度条] 序言 目录结构 代码一览 AreaFloorBorderBufferGeometry.js代码 AreaFloorB ...
- Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】
Threejs系列--13游戏开发--沙漠赛车游戏[使用效果合成器添加高级效果] 序言 目录结构 代码一览 Blur.js代码 Glows.js代码 Application.js代码 代码解读 运行结 ...
- cocos微信小游戏开发-http请求-使用微信云函数-toast-loading-动态加载图片-添加触摸事件-微信分享-label点击事件-背景音乐音效-程序活动状态判断-性能优化
cocos开发微信小游戏相关-<益智推箱> 扫码查看功能,有需要可直接提问 Cocos Creator 3.4 用户手册 cocos creator基本操作 微信开发文档|云函数 1. h ...
- jpct-ae开发3D赛车游戏
http://magicbird.iteye.com/blog/1578367 jpct-ae开发3D赛车游戏博客分类: jpct ae jpct-ae游戏引擎的资料比较少,本人是在官网中hellow ...
最新文章
- 订单管理之更新订单表状态数据
- mysqll底层分享(一):MySQL索引背后的数据结构及算法原理
- 如何自行绕制所需要的2.2uH的电感?
- sublime使用总结
- 区块链:这项颠覆性技术将如何改变未来
- 构建高性能J2EE应用的十个技巧
- Codejock Xtreme Toolkit Pro v12.0.0 Full Release
- 使用ReportNG更好看的TestNG HTML测试报告– Maven指南
- 如何在CDN边缘节点执行你的JavaScript?
- linux lzo 压缩文件,Linux常用压缩和解压命令
- 我真的是前端公众号 NO.1 ?
- libsvm中数据归一化的重要性
- 随笔小算法:从一个数据根据CRC校验出特定包
- error: The following untracked working tree files would be overwritten by merge:
- Codeforces Round #544 (Div. 3) A.Middle of the Contest
- LeetCode 623. Add One Row to Tree
- 处理字符数据--排序规则(Collation)
- mfc c++string、char与char*之间的关系
- python背景色渐变_Python 生成纯色或渐变色图片
- mysql front修改数据传奇_如何修改传奇数据库HeroDB名称?