Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7afcd6e

Browse files
author
takuma-hmng8
committed
v1.1.31
1 parent 362f189 commit 7afcd6e

File tree

117 files changed

+9056
-298
lines changed

Some content is hidden

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

117 files changed

+9056
-298
lines changed

‎app/stickers/CanvasState.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import * as THREE from "three";
2+
import { CLICKED_WOBBLE_STRENGTH } from "./StickerBall";
3+
import { STICKER_TEXTURES_LENGTH } from "./useStickers";
24

35
export class CanvasState {
46
private static instance: CanvasState;
@@ -9,24 +11,30 @@ export class CanvasState {
911
}
1012
return CanvasState.instance;
1113
}
12-
private STICKERSIZE = {
14+
15+
private STICKER_SIZE = {
1316
min: 0.04,
1417
max: 0.08,
1518
};
19+
20+
public CAMERA_Z = {
21+
zoom: 3.5,
22+
default: 4,
23+
};
24+
1625
private getRandomSize() {
1726
return (
18-
Math.random() * (this.STICKERSIZE.max - this.STICKERSIZE.min) +
19-
this.STICKERSIZE.min
27+
Math.random() * (this.STICKER_SIZE.max - this.STICKER_SIZE.min) +
28+
this.STICKER_SIZE.min
2029
);
2130
}
2231
private getRandomAngle() {
2332
return Math.random() * Math.PI * 2;
2433
}
25-
2634
private getNextStickerIndex() {
2735
const prevIndex = this.stickerState.nextStickerIndex;
2836
let nextIndex;
29-
// 重複しないように次のステッカーを選ぶ
37+
// Select the next sticker to avoid duplication.
3038
do {
3139
nextIndex = Math.floor(Math.random() * this.textures.stickers.length);
3240
} while (nextIndex === prevIndex);
@@ -49,7 +57,11 @@ export class CanvasState {
4957
public cameraState: {
5058
point: THREE.Vector3;
5159
} = {
52-
point: new THREE.Vector3(0, 0, 4),
60+
point: new THREE.Vector3(0, 0, this.CAMERA_Z.default),
61+
};
62+
63+
public clockState = {
64+
waiting: 0,
5365
};
5466

5567
public stickerState: {
@@ -68,7 +80,7 @@ export class CanvasState {
6880
wobbleStrength: 0,
6981
point: new THREE.Vector2(0, 0),
7082
sticker: null,
71-
nextStickerIndex: 0,
83+
nextStickerIndex: Math.floor(Math.random()*STICKER_TEXTURES_LENGTH),
7284
wrinkle: null,
7385
wrinkleIntensity: Math.random(),
7486
size: this.getRandomSize(),
@@ -79,7 +91,7 @@ export class CanvasState {
7991
public setStickerState(point: THREE.Vector2) {
8092
this.stickerState = {
8193
isNotSticked: false,
82-
wobbleStrength: 0.4,
94+
wobbleStrength: CLICKED_WOBBLE_STRENGTH,
8395
point: point,
8496
sticker: this.textures.stickers[this.stickerState.nextStickerIndex],
8597
nextStickerIndex: this.getNextStickerIndex(),
@@ -90,7 +102,7 @@ export class CanvasState {
90102
wrinkleIntensity: Math.random(),
91103
size: this.getRandomSize(),
92104
angle: this.getRandomAngle(),
93-
count: this.stickerState.count + 2,
105+
count: this.stickerState.count + 2,// To swap FBOs
94106
};
95107
}
96108
}

‎app/stickers/CursorUI/index.tsx‎

Lines changed: 0 additions & 184 deletions
This file was deleted.

‎app/stickers/Playground.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@ import { useFrame } from "@react-three/fiber";
77
import { useStickers } from "./useStickers";
88
import { CanvasState } from "./CanvasState";
99
import { StickerBall } from "./StickerBall";
10+
import { Easing, Utils } from "@/packages/use-shader-fx/src";
1011

1112
const Background = memo(({ stickerMap }: { stickerMap: THREE.Texture }) => {
1213
return (
1314
<>
1415
<Environment preset="warehouse" environmentIntensity={0.5} />
1516
<mesh scale={100}>
16-
<sphereGeometry args={[2,64,64]} />
17+
<sphereGeometry args={[3,32,32]} />
1718
<meshBasicMaterial
18-
color={new THREE.Color(0x333333)}
19+
color={new THREE.Color(0x444444)}
1920
map={stickerMap}
2021
side={THREE.BackSide}
2122
/>
@@ -30,15 +31,34 @@ export const Playground = () => {
3031

3132
const canvasState = CanvasState.getInstance();
3233

33-
useFrame(({ camera }, delta) => {
34+
useFrame(({ camera, clock }, delta) => {
3435
if (!isReady) {
3536
return;
3637
}
37-
if (canvasState.cameraState.point.z < 4) {
38+
39+
// control camera state
40+
if (canvasState.cameraState.point.z < canvasState.CAMERA_Z.default) {
3841
canvasState.cameraState.point.z += delta;
3942
}
4043
camera.position.lerp(canvasState.cameraState.point, 0.16);
4144
camera.lookAt(0, 0, 0);
45+
46+
// control clock state
47+
if (canvasState.stickerState.isNotSticked) {
48+
const eased = Easing.easeOutSine(
49+
Math.sin(clock.getElapsedTime() * 3.5) * 0.5 + 0.5
50+
);
51+
canvasState.clockState.waiting = Utils.interpolate(
52+
canvasState.clockState.waiting,
53+
eased,
54+
0.1
55+
);
56+
} else if (canvasState.clockState.waiting > 0) {
57+
canvasState.clockState.waiting =
58+
canvasState.clockState.waiting > 0.001
59+
? Utils.interpolate(canvasState.clockState.waiting, 0, 0.16)
60+
: 0;
61+
}
4262
});
4363
return (
4464
<mesh visible={isReady}>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /