初始化多多畅职企业内推平台项目

功能特性:
- 3D地球动画与中国地图可视化
- 省份/城市/企业搜索功能
- 308家企业数据展示
- 响应式设计(PC端和移动端)
- 企业详情页面与业务板块展示
- 官网新闻轮播图

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
KQL
2025-11-22 19:38:14 +08:00
commit ab50931347
41 changed files with 56412 additions and 0 deletions

104
js/scene/Transition.js Normal file
View File

@@ -0,0 +1,104 @@
/* ===================================
转场特效 - 从3D地球到2D地图的超空间跳跃
=================================== */
import { CONFIG } from '../config.js';
export class Transition {
constructor(camera, earthModel, uiElements, onComplete) {
this.camera = camera;
this.earthModel = earthModel;
this.uiElements = uiElements; // { uiLayer, hint, speedLines, cloudFog }
this.onComplete = onComplete;
this.isTransitioning = false;
}
// 触发超空间跳跃转场
trigger() {
if (this.isTransitioning) return;
this.isTransitioning = true;
// 获取UI元素
const { uiLayer, hint, speedLines, cloudFog } = this.uiElements;
// 0. UI 消失
uiLayer.style.opacity = 0;
hint.style.opacity = 0;
const earthGroup = this.earthModel.getGroup();
const clouds = this.earthModel.getClouds();
const atmosphere = this.earthModel.getAtmosphere();
// 创建GSAP时间线
const tl = gsap.timeline({
onComplete: () => {
this.isTransitioning = false;
if (this.onComplete) this.onComplete();
}
});
// 转场配置
const warpConfig = CONFIG.warp;
const transConfig = CONFIG.animation.transition;
// 1. 地球对齐 + 速度线出现
tl.to(earthGroup.rotation, {
y: warpConfig.targetRotationY,
x: warpConfig.targetRotationX,
duration: transConfig.earthRotation,
ease: "power2.inOut"
}, "start");
tl.to(speedLines, {
opacity: 1,
scale: 1.5,
duration: 1.0,
ease: "power1.in"
}, "start");
// 2. 镜头急速突进 (模拟穿过云层)
tl.to(this.camera.position, {
z: warpConfig.finalCameraZ,
x: 0,
y: 0,
duration: transConfig.cameraZoom,
ease: "expo.in",
onUpdate: () => {
// 镜头抖动效果 (Camera Shake) - 只在z<8时轻微抖动
const z = this.camera.position.z;
if (z < warpConfig.shakeThreshold.max && z > warpConfig.shakeThreshold.min) {
const intensity = warpConfig.shakeIntensity;
const shakeX = (Math.random() - 0.5) * intensity;
const shakeY = (Math.random() - 0.5) * intensity;
this.camera.position.x += shakeX;
this.camera.position.y += shakeY;
}
}
}, "start");
// 3. 材质变化:大气层和云层迅速变淡(为了不挡视线)
tl.to([clouds.material, atmosphere.material], {
opacity: 0,
duration: 0.5
}, "-=0.8");
// 4. "云雾吞噬"特效 (Backdrop Blur + Brightness)
tl.to(cloudFog, {
opacity: 1,
scale: 1.2,
backdropFilter: "blur(20px)",
duration: transConfig.fogFade,
ease: "power2.in"
}, "-=0.8");
}
// 重置转场状态
reset() {
this.isTransitioning = false;
}
// 检查是否正在转场
isActive() {
return this.isTransitioning;
}
}