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