Threejs系列--20游戏开发--沙漠赛车游戏【点击开始之场景切换】
序言目录结构代码一览Area.js 代码Areas.js代码index.js代码 代码解读运行结果序言
本章将实现鼠标点击切换场景。
目录结构
资源目录里面的结构不变，点击传送门快速查看。
|__src|__assets|__js||__base基础类文件夹||__Camera.js 相机类||__Resources.js 资源类 ||__geometries定制的物体类文件夹||__AreaFenceBufferGeometry.js 栏栅模型||__AreaFloorBorderBufferGeometry.js 进度条几何体 ||__materials材质类文件夹||__Floor.js 地面材质||__AreaFence.js栏栅材质||__AreaFloorBorder.js 进度条着色器 ||__passes合成器通道文件夹||__Blur.js 模糊着色器||__Glows.js发光着色器||__utils工具类文件夹||__Sizes.js 画布大小控制类||__EventEmitter.js 基础事件处理器||__Time.js 动画刷新 ||__Loader.js 加载器 ||__world精灵类文件夹||__Area.js区域基础类 【新增--点击效果】||__Areas.js区域管理类 【新增--鼠标点击监听】||__index.js精灵类||__Floor.js 地面类||__Application.js初始化游戏的文件 |__index.js入口|__index.css 小项目，样式一丢丢
代码一览
Area.js 代码
...export default class Area extends EventEmitter{constructor(_options){super();...// 用于判断是否loading加载完毕 执行鼠标移入动画this.active = _options.active;// 用于判断是否鼠标移入this.isIn = false;...}out(){this.isIn = false;gsap.killTweensOf(this.fence.mesh.position);gsap.to(this.fence.mesh.position, {duration: 0.35, ease: "back.out(4)", z: -this.fence.offset });}in(){this.isIn = true;if (!this.active) return;gsap.killTweensOf(this.fence.mesh.position);gsap.to(this.fence.mesh.position, {duration: 0.35, ease: "back.out(3)", z: this.fence.offset });}activate(){this.active = true;this.isIn && this.in();}deactivate(){this.active = false;this.isIn && this.out();}interact(){if(!this.active) return;//点击时取消正在执行的动画 重新执行gsap.killTweensOf(this.fence.mesh.position);gsap.killTweensOf(this.floorBorder.material.uniforms.uAlpha);gsap.killTweensOf(this.fence.material.uniforms.uBorderAlpha);gsap.to(this.fence.mesh.position, {duration: 0.05,z: 0,onComplete: () => {gsap.to(this.fence.mesh.position, {duration: 0.25, ease: "back.out(2)", z: 0.5});gsap.fromTo(this.floorBorder.material.uniforms.uAlpha, {value: 1}, {value: 0.5, duration: 1.5});gsap.fromTo(this.fence.material.uniforms.uBorderAlpha, {value: 1}, {value: 0.5, duration: 1.5});}});//交互开始this.trigger('interact');}...}
Areas.js代码
...export default class Areas {...add(_options) {const area = new Area({time: this.time,resources: this.resources,active: true, //创建的模型默认鼠标移入载入动画..._options,});this.container.add(area.container);this.items.push(area);return area;}}
index.js代码
setStartingScreen() {this.startingScreen = {};this.startingScreen.area = this.areas.add({position: new THREE.Vector2(0, 0),halfExtents: new THREE.Vector2(2.35, 1.5),active: false, //loading加载中 不执行鼠标移入动画});...this.resources.on('ready', () => {window.requestAnimationFrame(() => {//此方法控制在loading加载过程中是否可点击 切换页面this.startingScreen.area.activate();gsap.to(this.startingScreen.area.floorBorder.material.uniforms.uAlpha, {duration: 0.3, value: 0.3 });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});})})// 交互事件 让开始按钮消失this.startingScreen.area.on('interact', () => {this.startingScreen.area.deactivate();gsap.to(this.startingScreen.area.floorBorder.material.uniforms.uProgress, {duration: 0.3, delay: 0.4, value: 0});gsap.to(this.startingScreen.startLabel.material, {duration: 0.3, delay: 0.4, opacity: 0});})}
代码解读
代码不多。实现了鼠标移入开始按钮后，点击按钮，让当前场景消失。index.js 的setStartingScreen()方法中，在加载完laoding与开始，监听加载结果后，新增了监听交互事件。Area.js 的interact()方法中，判断可点击后，开始执行需要展示的动画，点击后start的边框白色不透明，栏栅的边框一样，并且触发index中监听的交互事件。
运行结果
如果觉得《Threejs系列--20游戏开发--沙漠赛车游戏【点击开始之场景切换】》对你有帮助，请点赞、收藏，并留下你的观点哦！
