react-native-3d-model-carousel 0.4.0
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/LICENSE +20 -0
- package/README.md +166 -0
- package/lib/module/components/ModelCarousel.js +281 -0
- package/lib/module/components/ModelCarousel.js.map +1 -0
- package/lib/module/components/ModelViewer.js +47 -0
- package/lib/module/components/ModelViewer.js.map +1 -0
- package/lib/module/hooks/useModelLoader.js +10 -0
- package/lib/module/hooks/useModelLoader.js.map +1 -0
- package/lib/module/index.js +4 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/multiply.js +6 -0
- package/lib/module/multiply.js.map +1 -0
- package/lib/module/package.json +1 -0
- package/lib/module/types/glb.d.js +2 -0
- package/lib/module/types/glb.d.js.map +1 -0
- package/lib/module/types/react-three-native.d.js +2 -0
- package/lib/module/types/react-three-native.d.js.map +1 -0
- package/lib/typescript/package.json +1 -0
- package/lib/typescript/src/components/ModelCarousel.d.ts +41 -0
- package/lib/typescript/src/components/ModelCarousel.d.ts.map +1 -0
- package/lib/typescript/src/components/ModelViewer.d.ts +15 -0
- package/lib/typescript/src/components/ModelViewer.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useModelLoader.d.ts +2 -0
- package/lib/typescript/src/hooks/useModelLoader.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +2 -0
- package/lib/typescript/src/index.d.ts.map +1 -0
- package/lib/typescript/src/multiply.d.ts +2 -0
- package/lib/typescript/src/multiply.d.ts.map +1 -0
- package/package.json +162 -0
- package/src/components/ModelCarousel.tsx +426 -0
- package/src/components/ModelViewer.tsx +60 -0
- package/src/hooks/useModelLoader.ts +7 -0
- package/src/index.tsx +1 -0
- package/src/multiply.tsx +3 -0
- package/src/types/glb.d.ts +9 -0
- package/src/types/react-three-native.d.ts +21 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Tehseem
|
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
6
|
+
in the Software without restriction, including without limitation the rights
|
|
7
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
8
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
9
|
+
furnished to do so, subject to the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12
|
+
copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
15
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
16
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
17
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
18
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
19
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
20
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
# react-native-3d-model-carousel
|
|
2
|
+
|
|
3
|
+
A React Native library for rendering interactive 3D `.glb`/`.gltf` models in a simple carousel with previous/next controls and optional swipe navigation.
|
|
4
|
+
|
|
5
|
+
## Preview
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<img
|
|
9
|
+
src="./example/assets/Preview%20GIF/PreviewGif.gif"
|
|
10
|
+
alt="Carousel Preview GIF 1"
|
|
11
|
+
width="250"
|
|
12
|
+
/>
|
|
13
|
+
<img
|
|
14
|
+
src="./example/assets/Preview%20GIF/PreviewGif2.gif"
|
|
15
|
+
alt="Carousel Preview GIF 2"
|
|
16
|
+
width="250"
|
|
17
|
+
/>
|
|
18
|
+
</p>
|
|
19
|
+
|
|
20
|
+
<p align="center">
|
|
21
|
+
<img src="./example/assets/Preview%20Image/img1.png" alt="Preview 1" width="240" />
|
|
22
|
+
<img src="./example/assets/Preview%20Image/img2.png" alt="Preview 2" width="240" />
|
|
23
|
+
<img src="./example/assets/Preview%20Image/img3.png" alt="Preview 3" width="240" />
|
|
24
|
+
</p>
|
|
25
|
+
|
|
26
|
+
## Installation
|
|
27
|
+
|
|
28
|
+
```sh
|
|
29
|
+
npm install react-native-3d-model-carousel @react-three/fiber @react-three/drei three
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
If you use Expo, also install `expo-gl`.
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { ModelCarousel } from 'react-native-3d-model-carousel';
|
|
38
|
+
import { Pressable, Text } from 'react-native';
|
|
39
|
+
|
|
40
|
+
import Car1 from './assets/Car1.glb';
|
|
41
|
+
import Car2 from './assets/Car2.glb';
|
|
42
|
+
import Car3 from './assets/Car3.glb';
|
|
43
|
+
|
|
44
|
+
export default function App() {
|
|
45
|
+
return (
|
|
46
|
+
<ModelCarousel
|
|
47
|
+
models={[
|
|
48
|
+
{
|
|
49
|
+
path: Car1,
|
|
50
|
+
scale: 1.1,
|
|
51
|
+
position: [0, -3, 0],
|
|
52
|
+
cameraPosition: [0, 7, 6],
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
path: Car2,
|
|
56
|
+
scale: 1.5,
|
|
57
|
+
position: [0, -2.4, 0],
|
|
58
|
+
cameraPosition: [0, 6, 5],
|
|
59
|
+
},
|
|
60
|
+
Car3,
|
|
61
|
+
]}
|
|
62
|
+
width="100%"
|
|
63
|
+
height="100%"
|
|
64
|
+
scale={1.3}
|
|
65
|
+
position={[0, -3, 0]}
|
|
66
|
+
cameraPosition={[0, 8, 6]}
|
|
67
|
+
fov={40}
|
|
68
|
+
autoRotate
|
|
69
|
+
autoRotateSpeed={5}
|
|
70
|
+
autoPlay
|
|
71
|
+
autoPlayInterval={3000}
|
|
72
|
+
containerStyle={{ backgroundColor: '#f0f0f0' }}
|
|
73
|
+
renderPrevButton={({ onPress, disabled }) => (
|
|
74
|
+
<Pressable onPress={onPress} disabled={disabled}>
|
|
75
|
+
<Text>Prev</Text>
|
|
76
|
+
</Pressable>
|
|
77
|
+
)}
|
|
78
|
+
renderNextButton={({ onPress, disabled }) => (
|
|
79
|
+
<Pressable onPress={onPress} disabled={disabled}>
|
|
80
|
+
<Text>Next</Text>
|
|
81
|
+
</Pressable>
|
|
82
|
+
)}
|
|
83
|
+
/>
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## TypeScript asset declarations
|
|
89
|
+
|
|
90
|
+
If your app does not already declare 3D asset modules, add this to a `*.d.ts` file:
|
|
91
|
+
|
|
92
|
+
```ts
|
|
93
|
+
declare module '*.glb' {
|
|
94
|
+
const content: any;
|
|
95
|
+
export default content;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
declare module '*.gltf' {
|
|
99
|
+
const content: any;
|
|
100
|
+
export default content;
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Props
|
|
105
|
+
|
|
106
|
+
| Prop | Type | Default | Description |
|
|
107
|
+
| ------------------ | ---------------------- | -------------- | -------------------------------------------------- |
|
|
108
|
+
| `models` | `ModelCarouselItem[]` | - | Array of model assets or per-model config objects. |
|
|
109
|
+
| `width` | `DimensionValue` | `'100%'` | Carousel container width. |
|
|
110
|
+
| `height` | `DimensionValue` | `'100%'` | Carousel container height. |
|
|
111
|
+
| `containerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional wrapper style. |
|
|
112
|
+
| `scale` | `number` | `0.8` | Model scale. |
|
|
113
|
+
| `position` | `number[]` | `[0, -2.7, 0]` | Model XYZ position. |
|
|
114
|
+
| `cameraPosition` | `number[]` | `[0, 9, 5]` | Camera XYZ position. |
|
|
115
|
+
| `fov` | `number` | `35` | Camera field of view. |
|
|
116
|
+
| `autoRotate` | `boolean` | `true` | Enables model auto-rotation. |
|
|
117
|
+
| `autoRotateSpeed` | `number` | `10` | Auto-rotation speed. |
|
|
118
|
+
| `autoPlay` | `boolean` | `false` | Automatically advances to the next model in an infinite loop. |
|
|
119
|
+
| `autoPlayInterval` | `number` | `2500` | Delay in milliseconds between each automatic model change. |
|
|
120
|
+
| `enableSwipeNavigation` | `boolean` | `true` | Enables horizontal swipe to switch models and disables model panning. |
|
|
121
|
+
| `swipeThreshold` | `number` | `36` | Minimum horizontal drag distance (px) required to trigger swipe navigation. |
|
|
122
|
+
| `showPaginationDots` | `boolean` | `true` | Shows bottom dots indicating total models and current active model. |
|
|
123
|
+
| `showDefaultButtons` | `boolean` | `false` | Shows built-in previous/next buttons when custom buttons are not provided. |
|
|
124
|
+
| `renderPrevButton` | `(props) => ReactNode` | `undefined` | Custom previous button renderer. |
|
|
125
|
+
| `renderNextButton` | `(props) => ReactNode` | `undefined` | Custom next button renderer. |
|
|
126
|
+
|
|
127
|
+
`ModelCarouselItem` can be either:
|
|
128
|
+
|
|
129
|
+
```ts
|
|
130
|
+
type ModelCarouselItem =
|
|
131
|
+
| unknown
|
|
132
|
+
| {
|
|
133
|
+
path: unknown;
|
|
134
|
+
scale?: number;
|
|
135
|
+
position?: number[];
|
|
136
|
+
cameraPosition?: number[];
|
|
137
|
+
};
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
When a model item includes `scale`, `position`, or `cameraPosition`, those values override the global props for that specific model only.
|
|
141
|
+
|
|
142
|
+
`renderPrevButton` and `renderNextButton` receive:
|
|
143
|
+
|
|
144
|
+
```ts
|
|
145
|
+
type NavigationButtonRenderProps = {
|
|
146
|
+
onPress: () => void;
|
|
147
|
+
disabled: boolean;
|
|
148
|
+
index: number;
|
|
149
|
+
total: number;
|
|
150
|
+
isAnimating: boolean;
|
|
151
|
+
};
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Contributing
|
|
155
|
+
|
|
156
|
+
- [Development workflow](CONTRIBUTING.md#development-workflow)
|
|
157
|
+
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
|
|
158
|
+
- [Code of conduct](CODE_OF_CONDUCT.md)
|
|
159
|
+
|
|
160
|
+
## License
|
|
161
|
+
|
|
162
|
+
MIT
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
5
|
+
import { useGLTF } from '@react-three/drei/native';
|
|
6
|
+
import ModelViewer from "./ModelViewer.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const isConfiguredModel = item => {
|
|
9
|
+
return typeof item === 'object' && item !== null && 'path' in item;
|
|
10
|
+
};
|
|
11
|
+
const getModelPath = item => isConfiguredModel(item) ? item.path : item;
|
|
12
|
+
const getResolvedValue = (itemValue, fallbackValue) => itemValue ?? fallbackValue;
|
|
13
|
+
const ModelCarousel = ({
|
|
14
|
+
models,
|
|
15
|
+
width = '100%',
|
|
16
|
+
height = '100%',
|
|
17
|
+
containerStyle,
|
|
18
|
+
scale,
|
|
19
|
+
position,
|
|
20
|
+
cameraPosition,
|
|
21
|
+
fov,
|
|
22
|
+
autoRotate,
|
|
23
|
+
autoRotateSpeed,
|
|
24
|
+
autoPlay = false,
|
|
25
|
+
autoPlayInterval = 2500,
|
|
26
|
+
enableSwipeNavigation = true,
|
|
27
|
+
swipeThreshold = 36,
|
|
28
|
+
showPaginationDots = true,
|
|
29
|
+
showDefaultButtons = false,
|
|
30
|
+
transitionDuration = 260,
|
|
31
|
+
transitionScale = 0.96,
|
|
32
|
+
renderPrevButton,
|
|
33
|
+
renderNextButton
|
|
34
|
+
}) => {
|
|
35
|
+
const [index, setIndex] = useState(0);
|
|
36
|
+
const fade = useRef(new Animated.Value(1)).current;
|
|
37
|
+
const zoom = useRef(new Animated.Value(1)).current;
|
|
38
|
+
const isAnimating = useRef(false);
|
|
39
|
+
const touchStartX = useRef(null);
|
|
40
|
+
const touchStartY = useRef(null);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
if (models.length === 0) {
|
|
43
|
+
setIndex(0);
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
if (index >= models.length) {
|
|
47
|
+
setIndex(0);
|
|
48
|
+
}
|
|
49
|
+
}, [index, models.length]);
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
models.forEach(modelItem => {
|
|
52
|
+
useGLTF.preload(getModelPath(modelItem));
|
|
53
|
+
});
|
|
54
|
+
}, [models]);
|
|
55
|
+
const runTransition = useCallback(nextIndex => {
|
|
56
|
+
if (isAnimating.current || models.length <= 1) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
isAnimating.current = true;
|
|
60
|
+
Animated.parallel([Animated.timing(fade, {
|
|
61
|
+
toValue: 0,
|
|
62
|
+
duration: Math.round(transitionDuration * 0.45),
|
|
63
|
+
useNativeDriver: true
|
|
64
|
+
}), Animated.timing(zoom, {
|
|
65
|
+
toValue: transitionScale,
|
|
66
|
+
duration: Math.round(transitionDuration * 0.45),
|
|
67
|
+
useNativeDriver: true
|
|
68
|
+
})]).start(() => {
|
|
69
|
+
setIndex(nextIndex);
|
|
70
|
+
fade.setValue(0);
|
|
71
|
+
zoom.setValue(transitionScale);
|
|
72
|
+
Animated.parallel([Animated.timing(fade, {
|
|
73
|
+
toValue: 1,
|
|
74
|
+
duration: Math.round(transitionDuration * 0.55),
|
|
75
|
+
useNativeDriver: true
|
|
76
|
+
}), Animated.timing(zoom, {
|
|
77
|
+
toValue: 1,
|
|
78
|
+
duration: Math.round(transitionDuration * 0.55),
|
|
79
|
+
useNativeDriver: true
|
|
80
|
+
})]).start(() => {
|
|
81
|
+
isAnimating.current = false;
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
}, [fade, models.length, transitionDuration, transitionScale, zoom]);
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
if (!autoPlay || models.length <= 1) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
const timeout = setTimeout(() => {
|
|
90
|
+
const nextIndex = (index + 1) % models.length;
|
|
91
|
+
runTransition(nextIndex);
|
|
92
|
+
}, autoPlayInterval);
|
|
93
|
+
return () => {
|
|
94
|
+
clearTimeout(timeout);
|
|
95
|
+
};
|
|
96
|
+
}, [autoPlay, autoPlayInterval, index, models.length, runTransition]);
|
|
97
|
+
const next = () => {
|
|
98
|
+
if (models.length === 0) {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
const nextIndex = (index + 1) % models.length;
|
|
102
|
+
runTransition(nextIndex);
|
|
103
|
+
};
|
|
104
|
+
const prev = () => {
|
|
105
|
+
if (models.length === 0) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
const nextIndex = (index - 1 + models.length) % models.length;
|
|
109
|
+
runTransition(nextIndex);
|
|
110
|
+
};
|
|
111
|
+
const onViewerTouchStart = event => {
|
|
112
|
+
if (!enableSwipeNavigation) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
touchStartX.current = event.nativeEvent.pageX;
|
|
116
|
+
touchStartY.current = event.nativeEvent.pageY;
|
|
117
|
+
};
|
|
118
|
+
const onViewerTouchEnd = event => {
|
|
119
|
+
if (!enableSwipeNavigation || touchStartX.current === null || touchStartY.current === null) {
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
const deltaX = event.nativeEvent.pageX - touchStartX.current;
|
|
123
|
+
const deltaY = event.nativeEvent.pageY - touchStartY.current;
|
|
124
|
+
touchStartX.current = null;
|
|
125
|
+
touchStartY.current = null;
|
|
126
|
+
if (Math.abs(deltaX) < swipeThreshold || Math.abs(deltaX) <= Math.abs(deltaY)) {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
if (deltaX < 0) {
|
|
130
|
+
next();
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
prev();
|
|
134
|
+
};
|
|
135
|
+
const wrapperStyle = useMemo(() => [{
|
|
136
|
+
width,
|
|
137
|
+
height
|
|
138
|
+
}, containerStyle], [containerStyle, height, width]);
|
|
139
|
+
const controlsDisabled = models.length <= 1;
|
|
140
|
+
const controlsProps = {
|
|
141
|
+
onPress: () => undefined,
|
|
142
|
+
disabled: controlsDisabled,
|
|
143
|
+
index,
|
|
144
|
+
total: models.length,
|
|
145
|
+
isAnimating: isAnimating.current
|
|
146
|
+
};
|
|
147
|
+
if (models.length === 0) {
|
|
148
|
+
return /*#__PURE__*/_jsx(View, {
|
|
149
|
+
style: wrapperStyle
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
const activeItem = models[index];
|
|
153
|
+
const activeModelPath = getModelPath(activeItem);
|
|
154
|
+
const activeScale = getResolvedValue(isConfiguredModel(activeItem) ? activeItem.scale : undefined, scale);
|
|
155
|
+
const activePosition = getResolvedValue(isConfiguredModel(activeItem) ? activeItem.position : undefined, position);
|
|
156
|
+
const activeCameraPosition = getResolvedValue(isConfiguredModel(activeItem) ? activeItem.cameraPosition : undefined, cameraPosition);
|
|
157
|
+
const shouldRenderPrevButton = !!renderPrevButton || showDefaultButtons;
|
|
158
|
+
const shouldRenderNextButton = !!renderNextButton || showDefaultButtons;
|
|
159
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
160
|
+
style: wrapperStyle,
|
|
161
|
+
children: [/*#__PURE__*/_jsx(Animated.View, {
|
|
162
|
+
onTouchStart: onViewerTouchStart,
|
|
163
|
+
onTouchEnd: onViewerTouchEnd,
|
|
164
|
+
style: [styles.viewer, {
|
|
165
|
+
opacity: fade,
|
|
166
|
+
transform: [{
|
|
167
|
+
scale: zoom
|
|
168
|
+
}]
|
|
169
|
+
}],
|
|
170
|
+
children: /*#__PURE__*/_jsx(ModelViewer, {
|
|
171
|
+
modelPath: activeModelPath,
|
|
172
|
+
scale: activeScale,
|
|
173
|
+
position: activePosition,
|
|
174
|
+
cameraPosition: activeCameraPosition,
|
|
175
|
+
fov: fov,
|
|
176
|
+
autoRotate: autoRotate,
|
|
177
|
+
autoRotateSpeed: autoRotateSpeed,
|
|
178
|
+
enablePan: !enableSwipeNavigation
|
|
179
|
+
})
|
|
180
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
181
|
+
style: styles.controls,
|
|
182
|
+
children: [/*#__PURE__*/_jsxs(View, {
|
|
183
|
+
style: styles.buttonsRow,
|
|
184
|
+
children: [shouldRenderPrevButton ? renderPrevButton ? renderPrevButton({
|
|
185
|
+
...controlsProps,
|
|
186
|
+
onPress: prev
|
|
187
|
+
}) : /*#__PURE__*/_jsx(Pressable, {
|
|
188
|
+
onPress: prev,
|
|
189
|
+
disabled: controlsDisabled,
|
|
190
|
+
style: ({
|
|
191
|
+
pressed
|
|
192
|
+
}) => [styles.navButton, pressed && styles.navButtonPressed, controlsDisabled && styles.navButtonDisabled],
|
|
193
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
194
|
+
style: styles.arrow,
|
|
195
|
+
children: '<'
|
|
196
|
+
})
|
|
197
|
+
}) : /*#__PURE__*/_jsx(View, {}), shouldRenderNextButton ? renderNextButton ? renderNextButton({
|
|
198
|
+
...controlsProps,
|
|
199
|
+
onPress: next
|
|
200
|
+
}) : /*#__PURE__*/_jsx(Pressable, {
|
|
201
|
+
onPress: next,
|
|
202
|
+
disabled: controlsDisabled,
|
|
203
|
+
style: ({
|
|
204
|
+
pressed
|
|
205
|
+
}) => [styles.navButton, pressed && styles.navButtonPressed, controlsDisabled && styles.navButtonDisabled],
|
|
206
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
207
|
+
style: styles.arrow,
|
|
208
|
+
children: '>'
|
|
209
|
+
})
|
|
210
|
+
}) : /*#__PURE__*/_jsx(View, {})]
|
|
211
|
+
}), showPaginationDots && models.length > 0 ? /*#__PURE__*/_jsx(View, {
|
|
212
|
+
style: styles.dotsContainer,
|
|
213
|
+
children: models.map((_, modelIndex) => /*#__PURE__*/_jsx(View, {
|
|
214
|
+
style: [styles.dot, modelIndex === index && styles.dotActive]
|
|
215
|
+
}, `dot-${modelIndex}`))
|
|
216
|
+
}) : null]
|
|
217
|
+
})]
|
|
218
|
+
});
|
|
219
|
+
};
|
|
220
|
+
const styles = StyleSheet.create({
|
|
221
|
+
viewer: {
|
|
222
|
+
flex: 1
|
|
223
|
+
},
|
|
224
|
+
controls: {
|
|
225
|
+
position: 'absolute',
|
|
226
|
+
bottom: 24,
|
|
227
|
+
width: '100%',
|
|
228
|
+
gap: 12
|
|
229
|
+
},
|
|
230
|
+
buttonsRow: {
|
|
231
|
+
flexDirection: 'row',
|
|
232
|
+
justifyContent: 'space-between',
|
|
233
|
+
paddingHorizontal: 20
|
|
234
|
+
},
|
|
235
|
+
dotsContainer: {
|
|
236
|
+
flexDirection: 'row',
|
|
237
|
+
alignSelf: 'center',
|
|
238
|
+
alignItems: 'center',
|
|
239
|
+
justifyContent: 'center',
|
|
240
|
+
gap: 8
|
|
241
|
+
},
|
|
242
|
+
dot: {
|
|
243
|
+
width: 8,
|
|
244
|
+
height: 8,
|
|
245
|
+
borderRadius: 4,
|
|
246
|
+
backgroundColor: 'rgba(196, 37, 37, 0.45)'
|
|
247
|
+
},
|
|
248
|
+
dotActive: {
|
|
249
|
+
width: 18,
|
|
250
|
+
borderRadius: 6,
|
|
251
|
+
backgroundColor: 'rgba(255, 255, 255, 0.95)'
|
|
252
|
+
},
|
|
253
|
+
arrow: {
|
|
254
|
+
fontSize: 28,
|
|
255
|
+
color: '#fff',
|
|
256
|
+
fontWeight: '700',
|
|
257
|
+
textAlign: 'center',
|
|
258
|
+
lineHeight: 30
|
|
259
|
+
},
|
|
260
|
+
navButton: {
|
|
261
|
+
width: 52,
|
|
262
|
+
height: 52,
|
|
263
|
+
borderRadius: 26,
|
|
264
|
+
backgroundColor: 'rgba(21, 29, 44, 0.75)',
|
|
265
|
+
alignItems: 'center',
|
|
266
|
+
justifyContent: 'center',
|
|
267
|
+
borderWidth: 1,
|
|
268
|
+
borderColor: 'rgba(255, 255, 255, 0.2)'
|
|
269
|
+
},
|
|
270
|
+
navButtonPressed: {
|
|
271
|
+
opacity: 0.75,
|
|
272
|
+
transform: [{
|
|
273
|
+
scale: 0.96
|
|
274
|
+
}]
|
|
275
|
+
},
|
|
276
|
+
navButtonDisabled: {
|
|
277
|
+
opacity: 0.5
|
|
278
|
+
}
|
|
279
|
+
});
|
|
280
|
+
export default ModelCarousel;
|
|
281
|
+
//# sourceMappingURL=ModelCarousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","Animated","Pressable","StyleSheet","Text","View","useGLTF","ModelViewer","jsx","_jsx","jsxs","_jsxs","isConfiguredModel","item","getModelPath","path","getResolvedValue","itemValue","fallbackValue","ModelCarousel","models","width","height","containerStyle","scale","position","cameraPosition","fov","autoRotate","autoRotateSpeed","autoPlay","autoPlayInterval","enableSwipeNavigation","swipeThreshold","showPaginationDots","showDefaultButtons","transitionDuration","transitionScale","renderPrevButton","renderNextButton","index","setIndex","fade","Value","current","zoom","isAnimating","touchStartX","touchStartY","length","forEach","modelItem","preload","runTransition","nextIndex","parallel","timing","toValue","duration","Math","round","useNativeDriver","start","setValue","timeout","setTimeout","clearTimeout","next","prev","onViewerTouchStart","event","nativeEvent","pageX","pageY","onViewerTouchEnd","deltaX","deltaY","abs","wrapperStyle","controlsDisabled","controlsProps","onPress","undefined","disabled","total","style","activeItem","activeModelPath","activeScale","activePosition","activeCameraPosition","shouldRenderPrevButton","shouldRenderNextButton","children","onTouchStart","onTouchEnd","styles","viewer","opacity","transform","modelPath","enablePan","controls","buttonsRow","pressed","navButton","navButtonPressed","navButtonDisabled","arrow","dotsContainer","map","_","modelIndex","dot","dotActive","create","flex","bottom","gap","flexDirection","justifyContent","paddingHorizontal","alignSelf","alignItems","borderRadius","backgroundColor","fontSize","color","fontWeight","textAlign","lineHeight","borderWidth","borderColor"],"sourceRoot":"..\\..\\..\\src","sources":["components/ModelCarousel.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { createElement, Suspense } from 'react';
|
|
4
|
+
import { Canvas } from '@react-three/fiber/native';
|
|
5
|
+
import { OrbitControls } from '@react-three/drei/native';
|
|
6
|
+
import { useModelLoader } from "../hooks/useModelLoader.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const ModelViewer = ({
|
|
9
|
+
modelPath,
|
|
10
|
+
scale = 0.8,
|
|
11
|
+
position = [0, -2.7, 0],
|
|
12
|
+
cameraPosition = [0, 9, 5],
|
|
13
|
+
fov = 35,
|
|
14
|
+
autoRotate = true,
|
|
15
|
+
autoRotateSpeed = 10,
|
|
16
|
+
enableZoom = true,
|
|
17
|
+
enablePan = true,
|
|
18
|
+
enableRotate = true
|
|
19
|
+
}) => {
|
|
20
|
+
const scene = useModelLoader(modelPath);
|
|
21
|
+
return /*#__PURE__*/_jsxs(Canvas, {
|
|
22
|
+
camera: {
|
|
23
|
+
position: cameraPosition,
|
|
24
|
+
fov
|
|
25
|
+
},
|
|
26
|
+
children: [/*#__PURE__*/createElement('ambientLight', {
|
|
27
|
+
intensity: 2.5
|
|
28
|
+
}), /*#__PURE__*/_jsx(OrbitControls, {
|
|
29
|
+
enableRotate: enableRotate,
|
|
30
|
+
enableZoom: enableZoom,
|
|
31
|
+
enablePan: enablePan,
|
|
32
|
+
maxPolarAngle: Math.PI / 2,
|
|
33
|
+
minPolarAngle: Math.PI / 2,
|
|
34
|
+
autoRotate: autoRotate,
|
|
35
|
+
autoRotateSpeed: autoRotateSpeed
|
|
36
|
+
}), /*#__PURE__*/_jsx(Suspense, {
|
|
37
|
+
fallback: null,
|
|
38
|
+
children: /*#__PURE__*/createElement('primitive', {
|
|
39
|
+
object: scene,
|
|
40
|
+
scale,
|
|
41
|
+
position
|
|
42
|
+
})
|
|
43
|
+
})]
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
export default ModelViewer;
|
|
47
|
+
//# sourceMappingURL=ModelViewer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createElement","Suspense","Canvas","OrbitControls","useModelLoader","jsx","_jsx","jsxs","_jsxs","ModelViewer","modelPath","scale","position","cameraPosition","fov","autoRotate","autoRotateSpeed","enableZoom","enablePan","enableRotate","scene","camera","children","intensity","maxPolarAngle","Math","PI","minPolarAngle","fallback","object"],"sourceRoot":"..\\..\\..\\src","sources":["components/ModelViewer.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,QAAQ,QAAQ,OAAO;AAC/C,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,cAAc,QAAQ,4BAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAkBzD,MAAMC,WAAW,GAAGA,CAAC;EACnBC,SAAS;EACTC,KAAK,GAAG,GAAG;EACXC,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;EAEvBC,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;EAC1BC,GAAG,GAAG,EAAE;EAERC,UAAU,GAAG,IAAI;EACjBC,eAAe,GAAG,EAAE;EAEpBC,UAAU,GAAG,IAAI;EACjBC,SAAS,GAAG,IAAI;EAChBC,YAAY,GAAG;AACV,CAAC,KAAK;EACX,MAAMC,KAAK,GAAGhB,cAAc,CAACM,SAAS,CAAC;EAEvC,oBACEF,KAAA,CAACN,MAAM;IAACmB,MAAM,EAAE;MAAET,QAAQ,EAAEC,cAAc;MAAEC;IAAI,CAAE;IAAAQ,QAAA,gBAC/CtB,aAAa,CAAC,cAAc,EAAS;MAAEuB,SAAS,EAAE;IAAI,CAAC,CAAC,eAEzDjB,IAAA,CAACH,aAAa;MACZgB,YAAY,EAAEA,YAAa;MAC3BF,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBM,aAAa,EAAEC,IAAI,CAACC,EAAE,GAAG,CAAE;MAC3BC,aAAa,EAAEF,IAAI,CAACC,EAAE,GAAG,CAAE;MAC3BX,UAAU,EAAEA,UAAW;MACvBC,eAAe,EAAEA;IAAgB,CAClC,CAAC,eAEFV,IAAA,CAACL,QAAQ;MAAC2B,QAAQ,EAAE,IAAK;MAAAN,QAAA,eACtBtB,aAAa,CAAC,WAAW,EAAS;QAAE6B,MAAM,EAAET,KAAK;QAAET,KAAK;QAAEC;MAAS,CAAC;IAAC,CAC9D,CAAC;EAAA,CACL,CAAC;AAEb,CAAC;AAED,eAAeH,WAAW","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useGLTF","useModelLoader","modelPath","scene"],"sourceRoot":"..\\..\\..\\src","sources":["hooks/useModelLoader.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,0BAA0B;AAElD,OAAO,MAAMC,cAAc,GAAIC,SAAkB,IAAK;EACpD,MAAM;IAAEC;EAAM,CAAC,GAAGH,OAAO,CAACE,SAAmB,CAAC;EAE9C,OAAOC,KAAK;AACd,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["default","ModelCarousel"],"sourceRoot":"..\\..\\src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,+BAA4B","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["multiply","a","b"],"sourceRoot":"..\\..\\src","sources":["multiply.tsx"],"mappings":";;AAAA,OAAO,SAASA,QAAQA,CAACC,CAAS,EAAEC,CAAS,EAAU;EACrD,OAAOD,CAAC,GAAGC,CAAC;AACd","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["types/glb.d.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["types/react-three-native.d.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
export type ModelCarouselConfiguredItem = {
|
|
4
|
+
path: unknown;
|
|
5
|
+
scale?: number;
|
|
6
|
+
position?: number[];
|
|
7
|
+
cameraPosition?: number[];
|
|
8
|
+
};
|
|
9
|
+
export type ModelCarouselItem = unknown | ModelCarouselConfiguredItem;
|
|
10
|
+
export type NavigationButtonRenderProps = {
|
|
11
|
+
onPress: () => void;
|
|
12
|
+
disabled: boolean;
|
|
13
|
+
index: number;
|
|
14
|
+
total: number;
|
|
15
|
+
isAnimating: boolean;
|
|
16
|
+
};
|
|
17
|
+
type Props = {
|
|
18
|
+
models: ModelCarouselItem[];
|
|
19
|
+
width?: DimensionValue;
|
|
20
|
+
height?: DimensionValue;
|
|
21
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
22
|
+
scale?: number;
|
|
23
|
+
position?: number[];
|
|
24
|
+
cameraPosition?: number[];
|
|
25
|
+
fov?: number;
|
|
26
|
+
autoRotate?: boolean;
|
|
27
|
+
autoRotateSpeed?: number;
|
|
28
|
+
autoPlay?: boolean;
|
|
29
|
+
autoPlayInterval?: number;
|
|
30
|
+
enableSwipeNavigation?: boolean;
|
|
31
|
+
swipeThreshold?: number;
|
|
32
|
+
showPaginationDots?: boolean;
|
|
33
|
+
showDefaultButtons?: boolean;
|
|
34
|
+
transitionDuration?: number;
|
|
35
|
+
transitionScale?: number;
|
|
36
|
+
renderPrevButton?: (props: NavigationButtonRenderProps) => ReactNode;
|
|
37
|
+
renderNextButton?: (props: NavigationButtonRenderProps) => ReactNode;
|
|
38
|
+
};
|
|
39
|
+
declare const ModelCarousel: ({ models, width, height, containerStyle, scale, position, cameraPosition, fov, autoRotate, autoRotateSpeed, autoPlay, autoPlayInterval, enableSwipeNavigation, swipeThreshold, showPaginationDots, showDefaultButtons, transitionDuration, transitionScale, renderPrevButton, renderNextButton, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export default ModelCarousel;
|
|
41
|
+
//# sourceMappingURL=ModelCarousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModelCarousel.d.ts","sourceRoot":"","sources":["../../../../src/components/ModelCarousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,2BAA2B,CAAC;AAEtE,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAG5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAGtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAGpB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;IACrE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;CACtE,CAAC;AAgBF,QAAA,MAAM,aAAa,GAAI,mSA0BpB,KAAK,4CAyQP,CAAC;AA6DF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
type Props = {
|
|
2
|
+
modelPath: unknown;
|
|
3
|
+
scale?: number;
|
|
4
|
+
position?: number[];
|
|
5
|
+
cameraPosition?: number[];
|
|
6
|
+
fov?: number;
|
|
7
|
+
autoRotate?: boolean;
|
|
8
|
+
autoRotateSpeed?: number;
|
|
9
|
+
enableZoom?: boolean;
|
|
10
|
+
enablePan?: boolean;
|
|
11
|
+
enableRotate?: boolean;
|
|
12
|
+
};
|
|
13
|
+
declare const ModelViewer: ({ modelPath, scale, position, cameraPosition, fov, autoRotate, autoRotateSpeed, enableZoom, enablePan, enableRotate, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export default ModelViewer;
|
|
15
|
+
//# sourceMappingURL=ModelViewer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModelViewer.d.ts","sourceRoot":"","sources":["../../../../src/components/ModelViewer.tsx"],"names":[],"mappings":"AAKA,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAEpB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,wHAclB,KAAK,4CAsBP,CAAC;AAEF,eAAe,WAAW,CAAC"}
|