Skip to content

Commit 0838580

Browse files
author
takuma-hmng8
committed
init
1 parent d5508fb commit 0838580

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1798
-1062
lines changed

‎app/ShaderFx.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,18 @@ import { PerformanceMonitor } from "@react-three/drei";
88
export const ShaderFx = ({
99
children,
1010
preserveDrawingBuffer = false,
11+
shadows = false,
1112
}: {
1213
children: React.ReactNode;
1314
preserveDrawingBuffer?: boolean;
15+
shadows?: boolean;
1416
}) => {
1517
const [dpr, setDpr] = useState(1.5);
1618
return (
1719
<Canvas
1820
dpr={dpr}
1921
gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}
20-
shadows>
22+
shadows={shadows}>
2123
<PerformanceMonitor
2224
factor={1}
2325
onChange={({ factor }) => {
@@ -28,7 +30,7 @@ export const ShaderFx = ({
2830
setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
2931
}}>
3032
<Suspense fallback={null}>{children}</Suspense>
31-
{/* <Perf position={"bottom-left"} minimal={false} /> */}
33+
<Perf position={"bottom-left"} minimal={false} />
3234
</PerformanceMonitor>
3335
</Canvas>
3436
);

‎app/playground/CanvasConfig.ts‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { MorphParticlesParams } from "@/packages/use-shader-fx/src";
2+
import gsap from "gsap";
3+
import * as THREE from "three";
4+
5+
export class CanvasConfig {
6+
private static instance: CanvasConfig;
7+
public texturesPath: {
8+
alphaMap: string[];
9+
bgPoints: string[];
10+
points: string[];
11+
} = {
12+
alphaMap: ["/playground/alphaMap.jpg"],
13+
bgPoints: [
14+
"/playground/points/circle-grey.png",
15+
"/playground/points/star-grey.png",
16+
"/playground/points/square-grey.png",
17+
],
18+
points: [
19+
"/playground/points/donut-y.png",
20+
"/playground/points/circle-r.png",
21+
"/playground/points/circles.png",
22+
"/playground/points/rhombus-b.png",
23+
"/playground/points/grid-r.png",
24+
"/playground/points/cell-p.png",
25+
"/playground/points/cell-g.png",
26+
"/playground/points/antenna-y.png",
27+
"/playground/points/cell-r.png",
28+
"/playground/points/cell-b.png",
29+
"/playground/points/grid-g.png",
30+
"/playground/points/square-o.png",
31+
"/playground/points/grid-p.png",
32+
"/playground/points/arrows-o.png",
33+
"/playground/points/donut-b.png",
34+
],
35+
};
36+
public bgPointsOffset: THREE.Vector3 = new THREE.Vector3(0.4, -0.3, -0.4);
37+
public pointsConstantParams: MorphParticlesParams = {
38+
blurAlpha: 1,
39+
blurRadius: 1,
40+
pointSize: 0.12,
41+
sizeRandomIntensity: 1.5,
42+
sizeRandomTimeFrequency: 0.3,
43+
sizeRandomMin: 0.5,
44+
sizeRandomMax: 1.5,
45+
};
46+
public bgPointsConstantParams: MorphParticlesParams = {
47+
blurAlpha: 1,
48+
blurRadius: 1,
49+
pointSize: 0.13,
50+
sizeRandomIntensity: 1,
51+
sizeRandomTimeFrequency: 0.3,
52+
sizeRandomMin: 0.5,
53+
sizeRandomMax: 1.5,
54+
};
55+
56+
public fxParmas: {
57+
morphProgress: number;
58+
yOffset: number;
59+
divergence: number;
60+
cameraZ: number;
61+
} = {
62+
yOffset: -10,
63+
morphProgress: 0.3,
64+
divergence: 0,
65+
cameraZ: 0,
66+
};
67+
68+
private constructor() {}
69+
70+
public static getInstance(): CanvasConfig {
71+
if (!CanvasConfig.instance) {
72+
CanvasConfig.instance = new CanvasConfig();
73+
}
74+
return CanvasConfig.instance;
75+
}
76+
77+
/** オープニング */
78+
public openingAnimate() {
79+
gsap.to(this.fxParmas, {
80+
yOffset: -5,
81+
morphProgress: 0,
82+
divergence: 0,
83+
duration: 2,
84+
ease: "power3.out",
85+
});
86+
}
87+
88+
/** スクロール連動 最初にYを0にする */
89+
public scrollY(y: number) {
90+
if (this.fxParmas.yOffset >= 0) {
91+
return;
92+
}
93+
// this.fxParmas.scrollY = this.fxParmas.scrollY + y;
94+
// 一旦サンプル
95+
gsap.to(this.fxParmas, {
96+
yOffset: 0,
97+
duration: 2,
98+
ease: "power3.out",
99+
});
100+
}
101+
/** 真ん中に集める */
102+
public gather() {
103+
gsap.to(this.fxParmas, {
104+
morphProgress: 0.8,
105+
divergence: -1,
106+
duration: 2,
107+
ease: "power3.out",
108+
});
109+
}
110+
/** 発散 */
111+
public diverge() {
112+
gsap.to(this.fxParmas, {
113+
divergence: 2,
114+
duration: 2,
115+
ease: "power3.out",
116+
});
117+
}
118+
public frameOut() {
119+
gsap.to(this.fxParmas, {
120+
cameraZ: -18,
121+
duration: 3,
122+
ease: "power2.out",
123+
});
124+
}
125+
public frameIn() {
126+
gsap.to(this.fxParmas, {
127+
cameraZ: 0,
128+
duration: 3,
129+
ease: "power2.out",
130+
});
131+
gsap.to(this.fxParmas, {
132+
divergence: -1,
133+
duration: 3,
134+
ease: "power2.inOut",
135+
});
136+
}
137+
public positionBottom() {
138+
gsap.to(this.fxParmas, {
139+
yOffset: -5,
140+
morphProgress: 0,
141+
divergence: 0,
142+
duration: 3,
143+
ease: "power2.out",
144+
});
145+
}
146+
}

‎app/playground/CustomSineCurve.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import * as THREE from "three";
2+
import { useRef } from "react";
3+
import { useFrame } from "@react-three/fiber";
4+
import { useBeat } from "@/packages/use-shader-fx/src";
5+
import { QuadraticBezierLine } from "@react-three/drei";
6+
7+
export const CustomSineCurve = ({
8+
start,
9+
color,
10+
}: {
11+
start: THREE.Vector3;
12+
color: THREE.ColorRepresentation;
13+
}) => {
14+
const ref = useRef<any>();
15+
const getNormalizeRand = () => Math.random() * 2 - 1;
16+
const curveRef = useRef({
17+
start: start,
18+
mid: new THREE.Vector3(
19+
getNormalizeRand(),
20+
getNormalizeRand(),
21+
getNormalizeRand()
22+
).add(start),
23+
end: new THREE.Vector3(
24+
getNormalizeRand(),
25+
getNormalizeRand(),
26+
getNormalizeRand()
27+
).add(start),
28+
hash: 0,
29+
destination: new THREE.Vector3(0, 0, 0),
30+
});
31+
const pointerVec = useRef(new THREE.Vector2(0, 0));
32+
const beat = useBeat(60, "easeInOutSine");
33+
useFrame(({ pointer, clock }) => {
34+
const currentPointer = pointerVec.current
35+
.lerp(pointer, 0.05)
36+
.multiplyScalar(1);
37+
const { hash, fract } = beat(clock);
38+
if (hash !== curveRef.current.hash) {
39+
curveRef.current.hash = hash;
40+
curveRef.current.destination
41+
.set(getNormalizeRand(), getNormalizeRand(), getNormalizeRand())
42+
.add(start);
43+
return;
44+
}
45+
ref.current.setPoints(
46+
[
47+
curveRef.current.start.x + currentPointer.x,
48+
curveRef.current.start.y + currentPointer.y,
49+
curveRef.current.start.z,
50+
],
51+
[
52+
curveRef.current.end.x - currentPointer.x,
53+
curveRef.current.end.y - currentPointer.y,
54+
curveRef.current.end.z,
55+
],
56+
curveRef.current.mid.lerp(curveRef.current.destination, fract)
57+
);
58+
});
59+
return (
60+
<group>
61+
<QuadraticBezierLine
62+
ref={ref}
63+
start={curveRef.current.start}
64+
mid={curveRef.current.mid}
65+
end={curveRef.current.end}
66+
lineWidth={8}
67+
color={color}
68+
/>
69+
</group>
70+
);
71+
};

0 commit comments

Comments
 (0)