KRBL/WhiteNightsAdminPanel
8
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update 3d models

Browse Source
This commit is contained in:
Илья Куприец
2026-02-02 11:06:33 +03:00
parent d557664b25
commit 144e7cb00c
3 changed files with 55 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/widgets/MediaArea/index.tsx
View File

@@ -123,7 +123,7 @@ export const MediaArea = observer(
<div className="w-full flex flex-start flex-wrap gap-2 mt-4 py-10"> <div className="w-full flex flex-start flex-wrap gap-2 mt-4 py-10">
{mediaIds.map((m) => ( {mediaIds.map((m) => (
<button <button
className="relative w-20 h-20" className="relative w-[100px] h-[80px]"
key={m.id} key={m.id}
onClick={() => handleMediaModal(m.id)} onClick={() => handleMediaModal(m.id)}
type="button" type="button"
@@ -134,7 +134,7 @@ export const MediaArea = observer(
media_type: m.media_type, media_type: m.media_type,
filename: m.filename, filename: m.filename,
}} }}
height="40px" compact
/> />
<button <button
className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md hover:shadow-lg transition-shadow" className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md hover:shadow-lg transition-shadow"

2
src/widgets/MediaViewer/ThreeView.tsx
View File

@@ -129,7 +129,7 @@ export const ThreeView = ({
> >
<ambientLight /> <ambientLight />
<directionalLight /> <directionalLight />
<Stage environment="city" intensity={0.6} adjustCamera={false}> <Stage environment={null} intensity={0.6} adjustCamera={false}>
<Model fileUrl={fileUrl} /> <Model fileUrl={fileUrl} />
</Stage> </Stage>
<OrbitControls /> <OrbitControls />

77
src/widgets/MediaViewer/index.tsx
View File

@@ -1,5 +1,6 @@
import { Box } from "@mui/material"; import { Box, Typography } from "@mui/material";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Cuboid } from "lucide-react";
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer"; import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
import { ThreeView } from "./ThreeView"; import { ThreeView } from "./ThreeView";
@@ -19,6 +20,7 @@ export function MediaViewer({
width, width,
fullWidth, fullWidth,
fullHeight, fullHeight,
compact,
}: Readonly<{ }: Readonly<{
media?: MediaData; media?: MediaData;
className?: string; className?: string;
@@ -26,6 +28,8 @@ export function MediaViewer({
width?: string; width?: string;
fullWidth?: boolean; fullWidth?: boolean;
fullHeight?: boolean; fullHeight?: boolean;
/** В компактном режиме (миниатюры) 3D модели не рендерятся — показывается placeholder */
compact?: boolean;
}>) { }>) {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const [resetKey, setResetKey] = useState(0); const [resetKey, setResetKey] = useState(0);
@@ -76,8 +80,9 @@ export function MediaViewer({
}/download?token=${token}`} }/download?token=${token}`}
alt={media?.filename} alt={media?.filename}
style={{ style={{
height: fullHeight ? "100%" : height ? height : "auto", height: compact ? "80px" : fullHeight ? "100%" : height ? height : "auto",
width: fullWidth ? "100%" : width ? width : "auto", width: compact ? "100px" : fullWidth ? "100%" : width ? width : "auto",
objectFit: "cover",
}} }}
/> />
)} )}
@@ -88,8 +93,8 @@ export function MediaViewer({
media?.id media?.id
}/download?token=${token}`} }/download?token=${token}`}
style={{ style={{
width: width ? width : "100%", width: compact ? "100px" : width ? width : "100%",
height: height ? height : "100%", height: compact ? "80px" : height ? height : "100%",
objectFit: "cover", objectFit: "cover",
borderRadius: 8, borderRadius: 8,
}} }}
@@ -105,8 +110,9 @@ export function MediaViewer({
}/download?token=${token}`} }/download?token=${token}`}
alt={media?.filename} alt={media?.filename}
style={{ style={{
height: fullHeight ? "100%" : height ? height : "auto", height: compact ? "80px" : fullHeight ? "100%" : height ? height : "auto",
width: fullWidth ? "100%" : width ? width : "auto", width: compact ? "100px" : fullWidth ? "100%" : width ? width : "auto",
objectFit: "cover",
}} }}
/> />
)} )}
@@ -117,7 +123,8 @@ export function MediaViewer({
}/download?token=${token}`} }/download?token=${token}`}
alt={media?.filename} alt={media?.filename}
style={{ style={{
width: "100%", width: compact ? "100px" : "100%",
height: compact ? "80px" : undefined,
objectFit: "cover", objectFit: "cover",
}} }}
/> />
@@ -128,26 +135,46 @@ export function MediaViewer({
src={`${import.meta.env.VITE_KRBL_MEDIA}${ src={`${import.meta.env.VITE_KRBL_MEDIA}${
media?.id media?.id
}/download?token=${token}`} }/download?token=${token}`}
width={fullWidth ? "100%" : width ? width : "500px"} width={compact ? "100px" : fullWidth ? "100%" : width ? width : "500px"}
height={fullHeight ? "100%" : height ? height : "300px"} height={compact ? "80px" : fullHeight ? "100%" : height ? height : "300px"}
/> />
)} )}
{media?.media_type === 6 && ( {media?.media_type === 6 &&
<ThreeViewErrorBoundary (compact ? (
onReset={handleReset} <Box
resetKey={`${media?.id}-${resetKey}`} sx={{
> width: "100px",
<ThreeView height: "80px",
key={`3d-model-${media?.id}-${resetKey}`} display: "flex",
fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${ flexDirection: "column",
media?.id alignItems: "center",
}/download?token=${token}`} justifyContent: "center",
height={height ? height : "500px"} backgroundColor: "action.hover",
width={width ? width : "500px"} borderRadius: 5,
/> color: "text.secondary",
</ThreeViewErrorBoundary> }}
)} >
<Cuboid size={24} />
<Typography variant="caption" sx={{ mt: 0.5 }}>
3D
</Typography>
</Box>
) : (
<ThreeViewErrorBoundary
onReset={handleReset}
resetKey={`${media?.id}-${resetKey}`}
>
<ThreeView
key={`3d-model-${media?.id}-${resetKey}`}
fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${
media?.id
}/download?token=${token}`}
height={height ? height : "500px"}
width={width ? width : "500px"}
/>
</ThreeViewErrorBoundary>
))}
</Box> </Box>
); );
} }