Skip to content

Commit

Permalink
feat: stage 1 end
Browse files Browse the repository at this point in the history
  • Loading branch information
@KairuiLiu
KairuiLiu committed Sep 9, 2022
1 parent 277ad48 commit da0364c
Show file tree
Hide file tree
Showing 8 changed files with 200 additions and 58 deletions.
2 changes: 2 additions & 0 deletions en/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,7 @@ <h2 class="h15">A front-end tech enthusiast</h2>
Here is my works, hope it can turn you on.
<!--I do not think so...-->
</p>
<div id="page2-anchor"></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -473,6 +474,7 @@ <h2 class="h25 subtitle">Let's look at the subsites</h2>
<p>IDE</p>
<p>: <a href="https://vsc.liukairui.me">vsc.liukairui.me </a></p>
</div>
<div id="totop"></div>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,7 @@ <h2 class="h15">热爱前端技术的新人开发者</h2>
下面是我的作品, 希望能让你眼前一亮.
<!--虽然我觉得不太行QAQ-->
</p>
<div id="page2-anchor"></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -467,6 +468,7 @@ <h2 class="h25 subtitle">不如看看子站点</h2>
<p>IDE</p>
<p>: <a href="https://vsc.liukairui.me">vsc.liukairui.me </a></p>
</div>
<div id="totop"></div>
</div>
</div>
</div>
Expand Down
34 changes: 25 additions & 9 deletions src/controller/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class Controller {
this.ref = ref;
this.threeEl = threeEl;
this.background = background;
this.core = new Core(threeEl);
this.core = new Core(threeEl, this.getPagePercentage.bind(this));
this.ui = new UI(app, background, ref, threeEl);
this.listen();
}
Expand All @@ -41,6 +41,9 @@ class Controller {
.querySelector('#dark')
?.addEventListener('click', this.darkModeHandler.bind(this));
this.resizeHandler();
this.app
.querySelector('#totop')
?.addEventListener('click', this.toTopHandler.bind(this));
window.addEventListener('resize', this.resizeHandler.bind(this));
[...this.app.querySelectorAll('#page3 .workItem')].forEach(
(d: HTMLElement) => {
Expand All @@ -63,13 +66,10 @@ class Controller {
}

scrollHandler() {
const { clientHeight } = document.body;
const pagePercentage = lerpPageOffset(
-this.ref.getBoundingClientRect().top
);
this.ui.setAppTop(pagePercentage * clientHeight);
const pagePercentage = this.getPagePercentage();
this.ui.setAppTop(pagePercentage * document.body.clientHeight);
this.ui.setBackgroundRotate(pagePercentage);
this.core.tryRelocate(pagePercentage);
this.core.tryRelocate();
}

langHandler() {
Expand All @@ -96,12 +96,12 @@ class Controller {
this.ui.setDarkMode();
}

projectPreviewEnterHandler(preview: HTMLElement, e) {
projectPreviewEnterHandler(preview: HTMLElement) {
preview.style.opacity = '0.8';
this;
}

projectPreviewOutHandler(preview: HTMLElement, e) {
projectPreviewOutHandler(preview: HTMLElement) {
preview.style.opacity = '0';
this;
}
Expand All @@ -111,6 +111,22 @@ class Controller {
preview.style.left = `${e.offsetX}px`;
this;
}

toTopHandler() {
const speed = (document.documentElement.scrollTop / 1500) * 41;
const token = setInterval(() => {
document.documentElement.scrollTop -= speed;
if (document.documentElement.scrollTop <= 0) {
document.documentElement.scrollTop = 0;
clearInterval(token);
}
}, 41);
this;
}

getPagePercentage() {
return lerpPageOffset(-this.ref.getBoundingClientRect().top);
}
}

export default Controller;
185 changes: 142 additions & 43 deletions src/core/ball/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,10 @@ import {
Box3,
CatmullRomCurve3,
Vector3,
BufferGeometry,
LineBasicMaterial,
Color,
Line,
Curve,
Camera,
} from 'three';
import { lerpBallRun } from '../../utils/lerp';
import { s2w } from '../../utils/screenWorldCoordTrans';
import * as vertexShader from './shaders/vertexShader.shader';
import * as fragmentShader from './shaders/fragmentShader.shader';

Expand All @@ -34,10 +32,14 @@ class Ball {

private worldHeight: number;

private curve: Curve;
private curve: CatmullRomCurve3[];

constructor(scene: Scene) {
private camera: Camera;

constructor(scene: Scene, camera: Camera) {
this.scene = scene;
this.camera = camera;
this.curve = [];
this.seed = Math.random() * 12345;
this.geometry = new IcosahedronBufferGeometry(15, 50);
this.material = new ShaderMaterial({
Expand Down Expand Up @@ -94,52 +96,149 @@ class Ball {
const scaleY = halfHeight / this.maxRadius;
const scaleX = (halfWidth - centerX) / this.maxRadius;
this.basicScale = Math.min(scaleY, scaleX, 1);
this.mesh.scale.set(this.basicScale, this.basicScale, this.basicScale);
// this.mesh.position.set(centerX, 0, 0);
} else {
// this.mesh.position.set(0, 0, 0);
this.basicScale = 1;
}
this.generateCurve();
}

generateCurve() {
const delta = this.worldWidth - this.worldHeight;
const centerX = 0.3 * delta;
this.curve = new CatmullRomCurve3(
[
// 起点
new Vector3(centerX, 0, 0),

new Vector3(-this.worldWidth / 4, -this.worldHeight / 4, -20),
new Vector3(
(-this.worldWidth / 4) * 3,
(-this.worldHeight / 4) * 3,
-10
const page2Anchor = document.getElementById('page2-anchor');
const v3pos = s2w(
this.camera,
new Vector3(
page2Anchor!.offsetLeft,
page2Anchor!.offsetTop - window.innerHeight,
0
),
0
);
if (this.worldHeight < this.worldWidth) {
this.curve = [
new CatmullRomCurve3(
[
// 起点
new Vector3(centerX, 0, 0),
new Vector3(-this.worldWidth / 4, -this.worldHeight / 4, -20),
new Vector3(-this.worldWidth, -this.worldHeight, -10),
new Vector3(0, this.worldHeight * 0.3, -10),
new Vector3(
this.maxRadius * 0.3 + v3pos!.x,
v3pos!.y - this.maxRadius * 0.3,
0
),
],
false
),
new CatmullRomCurve3(
[
new Vector3(
this.maxRadius * 0.3 + v3pos!.x,
v3pos!.y - this.maxRadius * 0.3,
0
),
new Vector3(0, 0, 0),
],
false
),
new CatmullRomCurve3(
[
new Vector3(0, 0, 0),
new Vector3(this.worldWidth, -this.worldHeight, -10),
new Vector3(
(this.worldWidth * 3) / 8,
(-this.worldHeight * 3) / 8,
0
),
],
false
),
new Vector3((-this.worldHeight / 8) * 3, 0, 0),
new CatmullRomCurve3(
[
new Vector3(
(this.worldWidth * 3) / 8,
(-this.worldHeight * 3) / 8,
0
),
new Vector3(
(this.worldWidth * 3) / 8,
(-this.worldHeight * 3) / 8,
0
),
],
false
),
];
} else {
this.curve = [
new CatmullRomCurve3(
[
// 起点
new Vector3(0, 0, 0),

new Vector3(0, 0, 40),
new Vector3((this.worldWidth * 3) / 8, (-this.worldHeight * 3) / 8, 0),
],
false
);
// const geometry = new BufferGeometry().setFromPoints(
// this.curve.getSpacedPoints(100)
// );
// const material = new LineBasicMaterial({
// color: new Color().setHSL(Math.random(), 0.5, 0.5),
// });
// const curveObject = new Line(geometry, material);
// this.scene.add(curveObject);
new Vector3(-this.worldWidth / 4, -this.worldHeight / 4, -20),
new Vector3(-this.worldWidth, -this.worldHeight, -10),
new Vector3(
this.maxRadius * 0.2 + v3pos!.x,
v3pos!.y - this.maxRadius * 0.2,
0
),
],
false
),
new CatmullRomCurve3(
[
new Vector3(
this.maxRadius * 0.2 + v3pos!.x,
v3pos!.y - this.maxRadius * 0.2,
0
),
new Vector3(0, 0, 0),
],
false
),
new CatmullRomCurve3(
[
new Vector3(0, 0, 0),
new Vector3(this.worldWidth, -this.worldHeight, -10),
new Vector3(
(this.worldWidth * 3) / 8,
(-this.worldHeight * 3) / 8,
0
),
],
false
),
new CatmullRomCurve3(
[
new Vector3(
(this.worldWidth * 3) / 8,
(-this.worldHeight * 3) / 8,
0
),
new Vector3(
(this.worldWidth * 3) / 8,
(-this.worldHeight * 3) / 8,
0
),
],
false
),
];
}
}

tryRelocate(pagePercentage: number) {
if (this.worldWidth > this.worldHeight) {
const pos = this.curve.getPointAt(pagePercentage / 3);
this.mesh.position.set(pos.x, pos.y, pos.z);
} else {
this.mesh.position.set(0, 0, 0);
}
pagePercentage =
Math.floor(pagePercentage) +
lerpBallRun(pagePercentage - Math.floor(pagePercentage));
const pos = this.curve[Math.floor(pagePercentage)].getPointAt(
pagePercentage - Math.floor(pagePercentage)
);
this.mesh.position.set(pos.x, pos.y, pos.z);

switch (true) {
case pagePercentage <= 1:
this.mesh.scale.set(
Expand All @@ -157,9 +256,9 @@ class Ball {
break;
case pagePercentage <= 3:
this.mesh.scale.set(
this.basicScale * (6 - 5.8 * (pagePercentage - 2)),
this.basicScale * (6 - 5.8 * (pagePercentage - 2)),
this.basicScale * (6 - 5.8 * (pagePercentage - 2))
this.basicScale * (6 - 5.9 * (pagePercentage - 2)),
this.basicScale * (6 - 5.9 * (pagePercentage - 2)),
this.basicScale * (6 - 5.9 * (pagePercentage - 2))
);
break;
default:
Expand Down
13 changes: 8 additions & 5 deletions src/core/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,11 @@ class Core {

ball?: Ball;

constructor(el: HTMLElement) {
getPagePercentage: () => number;

constructor(el: HTMLElement, getPagePercentage: () => number) {
this.threeEl = el;
this.getPagePercentage = getPagePercentage;
this.camera = new THREE.PerspectiveCamera();
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
Expand All @@ -27,7 +30,7 @@ class Core {
}

initScene() {
this.ball = new Ball(this.scene);
this.ball = new Ball(this.scene, this.camera);
}

reload(relocate = true) {
Expand All @@ -53,13 +56,13 @@ class Core {
new THREE.Vector3(window.innerWidth, 0, 0),
0
);
this.ball?.tryResize(range?.x, range?.y);
this.ball?.tryResize(range!.x, range!.y);

this.tryRelocate();
}

tryRelocate(pagePercentage = 0) {
this.ball?.tryRelocate(pagePercentage);
tryRelocate() {
this.ball?.tryRelocate(this.getPagePercentage());
}
}

Expand Down
10 changes: 10 additions & 0 deletions src/ui/css/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ body {

#app {
& > div[id^='page'] {
// position: relative;
box-sizing: border-box;
display: flex;
height: 100%;
Expand Down Expand Up @@ -226,3 +227,12 @@ body {
border-color: #e7e7e7;
}
}

#totop {
position: absolute;
width: 7vmax;
height: 7vmax;
left: 87.5vw;
top: 387.5vh;
transform: translate(-50%, -50%);
}
Loading

0 comments on commit da0364c

Please sign in to comment.