fix: 修复第二次进入时UI不显示和转场自动触发的问题
- 在 init3DScene() 中清除 uiLayer 和 hint 的内联 opacity 样式 - 在 SceneManager 中保存事件处理器引用 - 在 dispose() 中正确移除所有事件监听器 - 防止事件监听器重复绑定导致的意外触发 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -126,10 +126,11 @@ class App {
|
|||||||
this.mapInterface.style.display = 'none';
|
this.mapInterface.style.display = 'none';
|
||||||
this.mapInterface.style.opacity = '0';
|
this.mapInterface.style.opacity = '0';
|
||||||
|
|
||||||
// 重置UI层和提示文字的状态
|
// 重置UI层和提示文字的状态(清除转场时设置的内联样式)
|
||||||
this.uiLayer.style.display = 'block';
|
this.uiLayer.style.display = 'block';
|
||||||
|
this.uiLayer.style.opacity = ''; // 清除内联opacity,让CSS和GSAP控制
|
||||||
this.hint.style.display = 'block';
|
this.hint.style.display = 'block';
|
||||||
// 不设置 opacity,让GSAP的 fromTo() 控制
|
this.hint.style.opacity = ''; // 清除内联opacity
|
||||||
|
|
||||||
// 创建场景管理器
|
// 创建场景管理器
|
||||||
this.sceneManager = new SceneManager(
|
this.sceneManager = new SceneManager(
|
||||||
|
|||||||
@@ -154,20 +154,29 @@ export class SceneManager {
|
|||||||
|
|
||||||
// 绑定事件
|
// 绑定事件
|
||||||
bindEvents() {
|
bindEvents() {
|
||||||
|
// 保存事件处理器引用,以便后续移除
|
||||||
|
this.eventHandlers = {
|
||||||
|
mouseMove: (e) => this.onMouseMove(e),
|
||||||
|
mouseDown: () => this.onMouseDown(),
|
||||||
|
touchMove: (e) => this.onTouchMove(e),
|
||||||
|
touchStart: (e) => this.onTouchStart(e),
|
||||||
|
resize: () => this.onWindowResize()
|
||||||
|
};
|
||||||
|
|
||||||
// 鼠标移动
|
// 鼠标移动
|
||||||
window.addEventListener('mousemove', (e) => this.onMouseMove(e));
|
window.addEventListener('mousemove', this.eventHandlers.mouseMove);
|
||||||
|
|
||||||
// 鼠标点击
|
// 鼠标点击
|
||||||
window.addEventListener('mousedown', () => this.onMouseDown());
|
window.addEventListener('mousedown', this.eventHandlers.mouseDown);
|
||||||
|
|
||||||
// 触摸移动(移动端)
|
// 触摸移动(移动端)
|
||||||
window.addEventListener('touchmove', (e) => this.onTouchMove(e), { passive: false });
|
window.addEventListener('touchmove', this.eventHandlers.touchMove, { passive: false });
|
||||||
|
|
||||||
// 触摸点击(移动端)
|
// 触摸点击(移动端)
|
||||||
window.addEventListener('touchstart', (e) => this.onTouchStart(e));
|
window.addEventListener('touchstart', this.eventHandlers.touchStart);
|
||||||
|
|
||||||
// 窗口resize
|
// 窗口resize
|
||||||
window.addEventListener('resize', () => this.onWindowResize());
|
window.addEventListener('resize', this.eventHandlers.resize);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 鼠标移动事件
|
// 鼠标移动事件
|
||||||
@@ -290,6 +299,15 @@ export class SceneManager {
|
|||||||
|
|
||||||
// 销毁场景
|
// 销毁场景
|
||||||
dispose() {
|
dispose() {
|
||||||
|
// 移除事件监听器,防止内存泄漏和重复触发
|
||||||
|
if (this.eventHandlers) {
|
||||||
|
window.removeEventListener('mousemove', this.eventHandlers.mouseMove);
|
||||||
|
window.removeEventListener('mousedown', this.eventHandlers.mouseDown);
|
||||||
|
window.removeEventListener('touchmove', this.eventHandlers.touchMove);
|
||||||
|
window.removeEventListener('touchstart', this.eventHandlers.touchStart);
|
||||||
|
window.removeEventListener('resize', this.eventHandlers.resize);
|
||||||
|
}
|
||||||
|
|
||||||
if (this.starSystem) this.starSystem.dispose();
|
if (this.starSystem) this.starSystem.dispose();
|
||||||
if (this.earthModel) this.earthModel.dispose();
|
if (this.earthModel) this.earthModel.dispose();
|
||||||
if (this.renderer) {
|
if (this.renderer) {
|
||||||
|
|||||||
Reference in New Issue
Block a user