amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: polish responsive scene composition

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-05 17:49:09 +08:00
parent 3d12f48f32
commit 8699b52a94
6 changed files with 64 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/scenes/HeroLandscapeScene.tsx
View File

@@ -47,12 +47,13 @@ const createHeroScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
world.add(clearing);
const secondaryMountains = new THREE.Group();
world.add(secondaryMountains);
const mobileDecor = new THREE.Group();
world.add(secondaryMountains, mobileDecor);
const mountainData = [
[-10.6, -1.7, 4.6, 4.8, 4.2, 0], [-7.2, -2.7, 4.4, 4.4, 4.3, 0],
[-4.3, -3.6, 2.7, 3.0, 2.7, 1], [-11.1, 3.3, 3.3, 3.6, 2.8, 1],
[-11.3, -1.7, 4.3, 4.5, 4.0, 0], [-7.8, -2.7, 4.0, 4.1, 4.0, 0],
[-4.8, -3.6, 2.4, 2.7, 2.5, 1], [-11.5, 3.3, 3.1, 3.3, 2.6, 1],
[-8.8, 4.2, 3.2, 3.0, 2.5, 1], [10.2, -2.1, 4.7, 4.7, 4.3, 0],
[6.8, -3.1, 4.0, 4.1, 4.0, 0], [4.2, -3.8, 2.5, 2.7, 2.6, 1],
[7.5, -3.1, 3.8, 3.9, 3.8, 0], [4.8, -3.8, 2.3, 2.5, 2.4, 1],
[10.8, 3.6, 3.8, 3.6, 3.1, 1], [8.1, 4.3, 3.0, 3.1, 2.5, 1],
] as const;
@@ -62,6 +63,17 @@ const createHeroScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
(secondary ? secondaryMountains : world).add(mesa);
});
const mobileLeftMesa = createMesa(2.2, 2.6, 2.3, palette);
mobileLeftMesa.position.set(-3.1, 0, -0.6);
const mobileRightMesa = createMesa(2.2, 2.8, 2.3, palette);
mobileRightMesa.position.set(3.1, 0, -0.8);
const mobileLeftTree = createTree(palette, 0.72);
mobileLeftTree.position.set(-2.1, 0, 2.2);
const mobileRightTree = createTree(palette, 0.68);
mobileRightTree.position.set(2.1, 0, 2.4);
mobileDecor.add(mobileLeftMesa, mobileRightMesa, mobileLeftTree, mobileRightTree);
mobileDecor.visible = false;
const secondaryTrees = new THREE.Group();
world.add(secondaryTrees);
const treeData = [
@@ -123,6 +135,7 @@ const createHeroScene: SceneFactory = ({ pointer, theme, reduceMotion }) => {
const tablet = width < 1024;
secondaryMountains.visible = !mobile;
secondaryTrees.visible = !mobile;
mobileDecor.visible = mobile;
world.scale.setScalar(mobile ? 0.9 : tablet ? 0.96 : 1);
celestial.position.x = mobile ? -2.35 : tablet ? -4.1 : -5.8;
celestialBaseY = mobile ? 6.8 : 6.25;