Skip to content

Commit

Permalink
Merge pull request #10 from JongMany/feature/main
Browse files Browse the repository at this point in the history 
Feature/main
  • Loading branch information
@JongMany
JongMany authored Jul 5, 2024
2 parents f025f5f + 4910a68 commit 57c9b7d
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 186 deletions.
122 changes: 6 additions & 116 deletions fe/src/pages/root/constants/animationScript.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,14 @@ const makeAnimationTimeline = (
return steps;
};

export const animationTimeline = makeAnimationTimeline(
0.05,
0.85,
points.length
);

const makeAnimationScript = () => {
// const animationTimeline = makeAnimationTimeline(0.1, 0.9, points.length);
const animationTimeline = makeAnimationTimeline(0.05, 0.85, points.length);
console.log(animationTimeline);
const animationScript = animationTimeline.map((timeline, index) => ({
start: timeline.start,
end: timeline.end,
Expand Down Expand Up @@ -61,117 +65,3 @@ const makeAnimationScript = () => {
};

export const animationScript = makeAnimationScript();

// export const animationScript = [
// {
// start: 0,
// end: 0.1,
// func: (camera: THREE.Camera) => {
// camera.position.set(0, 0, 7);
// camera.lookAt(0, 0, 0);
// },
// },
// {
// start: animationTimeline[0].start,
// end: animationTimeline[0].end,
// func: (camera: THREE.Camera, scrollProgress: number) => {
// const scale = scalePercent(
// scrollProgress,
// animationTimeline[0].start,
// animationTimeline[0].end
// );
// const xPos = lerp(0, 2, scale);
// const yPos = lerp(0, 6, scale);
// const zPos = lerp(7, -6, scale);
// console.log(yPos);
// camera.position.x = xPos;
// camera.position.y = yPos;
// camera.position.z = zPos;

// camera.lookAt(xPos, yPos, -7);
// // camera.lookAt(2, 6, -7);
// },
// },
// {
// start: animationTimeline[1].start,
// end: animationTimeline[1].end,
// func: (camera: THREE.Camera, scrollProgress: number) => {
// const scale = scalePercent(
// scrollProgress,
// animationTimeline[1].start,
// animationTimeline[1].end
// );
// const xPos = lerp(2, 4, scale);
// const yPos = lerp(6, 5, scale);
// const zPos = lerp(-6, -4, scale);

// camera.position.x = xPos;
// camera.position.y = yPos;
// camera.position.z = zPos;
// // camera.lookAt(xPos, yPos, zPos);
// // camera.lookAt(4, 5, -5);
// // camera.lookAt(0, 0, 0);
// },
// },
// {
// start: animationTimeline[2].start,
// end: animationTimeline[2].end,
// func: (camera: THREE.Camera, scrollProgress: number) => {
// const scale = scalePercent(
// scrollProgress,
// animationTimeline[2].start,
// animationTimeline[2].end
// );
// const xPos = lerp(2, 4, scale);
// const yPos = lerp(6, 5, scale);
// const zPos = lerp(-6, -4, scale);

// camera.position.x = xPos;
// camera.position.y = yPos;
// camera.position.z = zPos;
// // camera.lookAt(xPos, yPos, zPos);
// // camera.lookAt(4, 5, -5);
// // camera.lookAt(0, 0, 0);
// },
// },
// {
// start: animationTimeline[3].start,
// end: animationTimeline[3].end,
// func: (camera: THREE.Camera, scrollProgress: number) => {
// const scale = scalePercent(
// scrollProgress,
// animationTimeline[3].start,
// animationTimeline[3].end
// );
// const xPos = lerp(2, 4, scale);
// const yPos = lerp(6, 5, scale);
// const zPos = lerp(-6, -4, scale);

// camera.position.x = xPos;
// camera.position.y = yPos;
// camera.position.z = zPos;
// // camera.lookAt(xPos, yPos, zPos);
// // camera.lookAt(4, 5, -5);
// // camera.lookAt(0, 0, 0);
// },
// },
// {
// start: 0.6,
// end: 0.8,
// func: (camera: THREE.Camera, scrollProgress: number) => {
// // camera.position.z = 25;
// // camera.position.z = 10;
// // camera.position.y = lerp(5, 0, scalePercent(scrollProgress, 60, 80));
// // camera.lookAt(0, 0, 0);
// },
// },
// {
// start: 0.9,
// end: 1.01,
// func: (camera: THREE.Camera, scrollProgress: number) => {
// // camera.position.z = 30;
// // camera.position.y = lerp(5, 0, scalePercent(scrollProgress, 80, 100));
// // camera.lookAt(0, 0, 0);
// },
// },
// ];
38 changes: 30 additions & 8 deletions fe/src/webGl/MyStar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,16 @@ export class MyStar {
iTime: { value: number };
iResolution: { value: THREE.Vector2 };
iMouse: { value: THREE.Vector2 };
// uColor: { value: THREE.Color };
// color: { value: THREE.Color };
// uAlpha: { value: number };
};
private model: THREE.Points;
private material: THREE.ShaderMaterial;
private geometry: THREE.BufferGeometry;

constructor(
private index: number,
private position: [number, number, number],
private speed: number = 300
) {
Expand All @@ -23,27 +28,36 @@ export class MyStar {
value: new THREE.Vector2(window.innerWidth, window.innerHeight),
},
iMouse: { value: new THREE.Vector2() },
// uColor: { value: new THREE.Color(0xffff00) },
// color: { value: new THREE.Color(0xff0000) },
// uAlpha: { value: 1.0 },
};

this.material = new THREE.ShaderMaterial({
uniforms: this.uniforms,
vertexShader: starVertexShader,
fragmentShader: starFragmentShader,
transparent: true,
depthWrite: false,
uniforms: {
uColor: { value: new THREE.Color(0xffff00) },
uAlpha: { value: 1.0 },
},
});

const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
this.geometry = new THREE.BufferGeometry();

// Adding color attribute as required by vertex shader
const colors = new Float32Array([1.0, 1.0, 1.0]); // Example white color
this.geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

this.geometry.setAttribute(
"position",
new THREE.BufferAttribute(new Float32Array(this.position), 3)
);

geometry.setAttribute("size", new THREE.Float32BufferAttribute([2], 1));
this.model = new THREE.Points(geometry, this.material);
this.geometry.setAttribute(
"size",
new THREE.Float32BufferAttribute([2], 1)
);
this.model = new THREE.Points(this.geometry, this.material);
this.model.name = "myStar_" + index;

this.animate = this.animate.bind(this);
}
Expand All @@ -52,6 +66,14 @@ export class MyStar {
return this.model;
}

setColor(newColor: THREE.Color) {
const colors = this.geometry.attributes.color.array as Float32Array;
colors[0] = newColor.r;
colors[1] = newColor.g;
colors[2] = newColor.b;
this.geometry.attributes.color.needsUpdate = true;
}

animate() {
this.uniforms.iTime.value += 0.01 * this.speed;
// this.material.uniforms.iTime.value += this.speed * 0.01;
Expand Down
Loading

0 comments on commit 57c9b7d

Please sign in to comment.