@xrift/world-components 0.30.2 → 0.30.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BillboardY/hooks.d.ts +0 -3
- package/dist/components/BillboardY/hooks.d.ts.map +1 -1
- package/dist/components/BillboardY/hooks.js +16 -36
- package/dist/components/BillboardY/hooks.js.map +1 -1
- package/dist/components/Portal/components/PortalThumbnail/index.d.ts.map +1 -1
- package/dist/components/Portal/components/PortalThumbnail/index.js +16 -0
- package/dist/components/Portal/components/PortalThumbnail/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,9 +3,6 @@ import { type Object3D } from 'three';
|
|
|
3
3
|
* Y軸ビルボードフック
|
|
4
4
|
* 対象の Object3D を毎フレームカメラに向けてY軸のみ回転させる
|
|
5
5
|
* 親のワールド回転を考慮し、ローカル回転として正しい値を設定する
|
|
6
|
-
*
|
|
7
|
-
* sentinel Mesh の onBeforeRender を使用することで、
|
|
8
|
-
* Mirror（Reflector）の virtualCamera でも正しい回転が適用される
|
|
9
6
|
*/
|
|
10
7
|
export declare const useBillboardY: <T extends Object3D>() => import("react").RefObject<T>;
|
|
11
8
|
//# sourceMappingURL=hooks.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/BillboardY/hooks.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/BillboardY/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,QAAQ,EAAuB,MAAM,OAAO,CAAA;AAQjE;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,mCAuB/C,CAAA"}
|
|
@@ -1,53 +1,33 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { useFrame } from '@react-three/fiber';
|
|
2
|
+
import { useRef } from 'react';
|
|
3
|
+
import { Euler, Quaternion, Vector3 } from 'three';
|
|
3
4
|
import { getBillboardYRotation } from './utils';
|
|
4
5
|
const _cameraWorldPos = new Vector3();
|
|
5
6
|
const _targetWorldPos = new Vector3();
|
|
6
7
|
const _parentQuat = new Quaternion();
|
|
7
8
|
const _euler = new Euler();
|
|
8
|
-
const SENTINEL_GEOMETRY = new BoxGeometry(0.001, 0.001, 0.001);
|
|
9
|
-
const SENTINEL_MATERIAL = new MeshBasicMaterial({
|
|
10
|
-
colorWrite: false,
|
|
11
|
-
depthWrite: false,
|
|
12
|
-
depthTest: false,
|
|
13
|
-
});
|
|
14
9
|
/**
|
|
15
10
|
* Y軸ビルボードフック
|
|
16
11
|
* 対象の Object3D を毎フレームカメラに向けてY軸のみ回転させる
|
|
17
12
|
* 親のワールド回転を考慮し、ローカル回転として正しい値を設定する
|
|
18
|
-
*
|
|
19
|
-
* sentinel Mesh の onBeforeRender を使用することで、
|
|
20
|
-
* Mirror（Reflector）の virtualCamera でも正しい回転が適用される
|
|
21
13
|
*/
|
|
22
14
|
export const useBillboardY = () => {
|
|
23
15
|
const ref = useRef(null);
|
|
24
|
-
|
|
16
|
+
useFrame((state) => {
|
|
25
17
|
if (!ref.current)
|
|
26
18
|
return;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
target.rotation.y = worldRotationY;
|
|
42
|
-
}
|
|
43
|
-
target.updateWorldMatrix(false, true);
|
|
44
|
-
};
|
|
45
|
-
target.add(sentinel);
|
|
46
|
-
return () => {
|
|
47
|
-
sentinel.onBeforeRender = () => { };
|
|
48
|
-
target.remove(sentinel);
|
|
49
|
-
};
|
|
50
|
-
}, []);
|
|
19
|
+
state.camera.getWorldPosition(_cameraWorldPos);
|
|
20
|
+
ref.current.getWorldPosition(_targetWorldPos);
|
|
21
|
+
const worldRotationY = getBillboardYRotation(_cameraWorldPos, _targetWorldPos);
|
|
22
|
+
if (ref.current.parent) {
|
|
23
|
+
ref.current.parent.getWorldQuaternion(_parentQuat);
|
|
24
|
+
_euler.setFromQuaternion(_parentQuat, 'YXZ');
|
|
25
|
+
ref.current.rotation.y = worldRotationY - _euler.y;
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
ref.current.rotation.y = worldRotationY;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
51
31
|
return ref;
|
|
52
32
|
};
|
|
53
33
|
//# sourceMappingURL=hooks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/BillboardY/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/BillboardY/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAiB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/C,MAAM,eAAe,GAAG,IAAI,OAAO,EAAE,CAAA;AACrC,MAAM,eAAe,GAAG,IAAI,OAAO,EAAE,CAAA;AACrC,MAAM,WAAW,GAAG,IAAI,UAAU,EAAE,CAAA;AACpC,MAAM,MAAM,GAAG,IAAI,KAAK,EAAE,CAAA;AAE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAuB,EAAE;IACpD,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAA;IAE3B,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;QACjB,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAM;QACxB,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAA;QAC9C,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAA;QAE7C,MAAM,cAAc,GAAG,qBAAqB,CAC1C,eAAe,EACf,eAAe,CAChB,CAAA;QAED,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACvB,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAA;YAClD,MAAM,CAAC,iBAAiB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;YAC5C,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,cAAc,GAAG,MAAM,CAAC,CAAC,CAAA;QACpD,CAAC;aAAM,CAAC;YACN,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,cAAc,CAAA;QACzC,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Portal/components/PortalThumbnail/index.tsx"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;CACrB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Portal/components/PortalThumbnail/index.tsx"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;CACrB;AA+ED,eAAO,MAAM,eAAe,GAAI,gCAAgC,KAAK,mDA8FpE,CAAA"}
|
|
@@ -17,6 +17,7 @@ const fragmentShader = /* glsl */ `
|
|
|
17
17
|
uniform sampler2D uTexture;
|
|
18
18
|
uniform vec3 uGlowColor;
|
|
19
19
|
uniform float uTime;
|
|
20
|
+
uniform float uAspect;
|
|
20
21
|
varying vec2 vUv;
|
|
21
22
|
void main() {
|
|
22
23
|
vec2 center = vUv - 0.5;
|
|
@@ -41,6 +42,16 @@ const fragmentShader = /* glsl */ `
|
|
|
41
42
|
// UVを円の範囲に合わせてスケーリング
|
|
42
43
|
float scale = 0.42 / 0.5;
|
|
43
44
|
vec2 scaledUv = (vUv - 0.5) / scale + 0.5;
|
|
45
|
+
|
|
46
|
+
// アスペクト比補正（cover: 円形領域を埋めつつ比率を維持）
|
|
47
|
+
vec2 aspectUv = scaledUv - 0.5;
|
|
48
|
+
if (uAspect > 1.0) {
|
|
49
|
+
aspectUv.x /= uAspect;
|
|
50
|
+
} else {
|
|
51
|
+
aspectUv.y *= uAspect;
|
|
52
|
+
}
|
|
53
|
+
scaledUv = aspectUv + 0.5;
|
|
54
|
+
|
|
44
55
|
vec4 texColor = texture2D(uTexture, scaledUv);
|
|
45
56
|
|
|
46
57
|
// 縁に近いほどグローを強くする
|
|
@@ -64,6 +75,7 @@ const createUniforms = () => ({
|
|
|
64
75
|
uTexture: { value: null },
|
|
65
76
|
uGlowColor: { value: [0.6, 0.33, 1.0] },
|
|
66
77
|
uTime: { value: 0 },
|
|
78
|
+
uAspect: { value: 1.0 },
|
|
67
79
|
});
|
|
68
80
|
export const PortalThumbnail = ({ thumbnailUrl, portalRadius }) => {
|
|
69
81
|
const [uniforms] = useState(createUniforms);
|
|
@@ -106,6 +118,10 @@ export const PortalThumbnail = ({ thumbnailUrl, portalRadius }) => {
|
|
|
106
118
|
if (!materialRef.current || !texture)
|
|
107
119
|
return;
|
|
108
120
|
materialRef.current.uniforms.uTexture.value = texture;
|
|
121
|
+
const image = texture.image;
|
|
122
|
+
if (image?.width && image?.height) {
|
|
123
|
+
materialRef.current.uniforms.uAspect.value = image.width / image.height;
|
|
124
|
+
}
|
|
109
125
|
}, [texture]);
|
|
110
126
|
useEffect(() => {
|
|
111
127
|
const geometry = geometryRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Portal/components/PortalThumbnail/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,WAAW,EAAgE,aAAa,EAAE,MAAM,OAAO,CAAA;AAChH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAOpD,MAAM,YAAY,GAAG,UAAU,CAAC;;;;;;CAM/B,CAAA;AAED,MAAM,cAAc,GAAG,UAAU,CAAC;IAC9B,cAAc
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Portal/components/PortalThumbnail/index.tsx"],"names":[],"mappings":"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"}
|