This commit is contained in:
@@ -99,23 +99,20 @@
|
||||
/* 3D 地球容器:与 section-content 右对齐(和下方卡片区域右边保持一致) */
|
||||
.banner-globe {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
/* 相对于 section-content 右对齐,section-content padding-right 为 20px */
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
/* 适当放大画布,让粒子有更大的可视范围,减少“被方框裁切”的感觉 */
|
||||
width: 520px;
|
||||
height: 520px;
|
||||
z-index: 20; /* 高于轮播图与文案层 */
|
||||
pointer-events: none; /* 不影响轮播图滑动与点击 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* 画布充满整个 banner 文案区域,让粒子可以从整个区域四面八方飞入 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5; /* 保持在文案层之下 */
|
||||
pointer-events: none; /* 不影响轮播图滑动与点击 */
|
||||
}
|
||||
|
||||
/* 中等屏幕下稍微缩小地球,避免挡住文案 */
|
||||
@media (max-width: 1400px) {
|
||||
.banner-globe {
|
||||
right: 20px;
|
||||
width: 440px;
|
||||
height: 440px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -47,6 +47,7 @@
|
||||
// 可调参数:你可以根据效果需求自行修改
|
||||
var PARTICLE_COUNT = 1200; // 粒子数量,越多越实,但性能负担也越大
|
||||
var SPHERE_RADIUS = 2.6; // 球体半径(世界单位)
|
||||
var SPHERE_OFFSET_X = 2.4; // 球心在 X 轴上的偏移量,用于将球体放在画布偏右的位置
|
||||
var START_RADIUS_MIN = 10.0; // 粒子起始距离下限(调大一点,让更多粒子从画布边缘外飞入)
|
||||
var START_RADIUS_MAX = 18.0; // 粒子起始距离上限
|
||||
var FORMATION_DURATION = 4000; // 粒子从散开到聚合成球的时间(毫秒)
|
||||
@@ -138,6 +139,12 @@
|
||||
var innerSphereMesh = new THREE.Mesh(innerSphereGeom, innerSphereMat);
|
||||
scene.add(innerSphereMesh);
|
||||
|
||||
// 将球体整体向右偏移,让球体位于画布偏右侧,避免挡住左侧文案
|
||||
particleSphere.position.x = SPHERE_OFFSET_X;
|
||||
innerSphereMesh.position.x = SPHERE_OFFSET_X;
|
||||
// 相机始终看向球心
|
||||
camera.lookAt(SPHERE_OFFSET_X, 0, 0);
|
||||
|
||||
// 暴露给调试用
|
||||
if (typeof window !== "undefined") {
|
||||
window.__particleGlobe = {
|
||||
|
||||
Reference in New Issue
Block a user