cxc/mofumofu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

decal

Browse Source
This commit is contained in:
ailanyin
2023-12-20 17:29:59 +08:00
parent 1bf86099d8
commit ec316824b7
8 changed files with 139 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/icon/model1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/icon/model2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

10
src/components/LogoPanel.tsx
View File

@ -1,12 +1,13 @@
import { useState } from "react";
import { AddIcon } from "@chakra-ui/icons";
import { AddIcon, DeleteIcon } from "@chakra-ui/icons";
import {
Button,
Modal,
ModalBody,
ModalContent,
ModalOverlay,
Image
Image,
IconButton
} from "@chakra-ui/react";
import { pickFile } from "@/lib/upload";
import useModelStore, { StickerType } from "@/store/useModelStore";
@ -30,10 +31,13 @@ const LogoPanel = () => {
setActiveDecal(decal.id)
}}
key={decal.id}
className={`mb-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${decal.id === activeDecal ? "border-2 border-green-100" : ""
className={`mb-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${decal.id === activeDecal ? "border-2 border-green-100 bg-blue-200" : ""
}`}
>
<Image className={"w-12 h-12 object-contain"} src={decal.url} />
<IconButton icon={<DeleteIcon />} aria-label={""} colorScheme="red" size={"xs"} onClick={() => {
setDecals(decals.filter(el => el.id !== decal.id))
}} />
</li>
))}
</ul>

7
src/components/RightPanel.tsx
View File

@ -26,13 +26,12 @@ const RightPanel = () => {
onClick={() => {
setActiveModel(index);
}}
className={`${
activeModel === index ? "border-2 border-green-300" : ""
} flex aspect-square items-center justify-center overflow-hidden rounded-xl bg-blue-100`}
className={`${activeModel === index ? "border-2 border-green-300" : ""
} flex aspect-square items-center justify-center overflow-hidden rounded-xl bg-blue-100`}
>
<img
className="h-full w-full object-cover"
src={models[activeModel].icon}
src={models[index].icon}
/>
</div>
))}

245
src/components/TextLabelPanel.tsx
View File

@ -1,11 +1,11 @@
import useModelStore, { StickerType } from "@/store/useModelStore";
import { AddIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
import {
Button,
FormControl,
FormLabel,
IconButton,
Input,
Button,
FormControl,
FormLabel,
IconButton,
Input,
} from "@chakra-ui/react";
import { useState } from "react";
import { fabric } from "fabric";
@ -13,125 +13,126 @@ import { Vector3 } from "three";
import { v4 } from "uuid";
const TextLabelPanel = () => {
const decals = useModelStore((state) => state.decals);
const setDecals = useModelStore((state) => state.setDecals);
const setActiveDecal = useModelStore((state) => state.setActiveDecal);
const activeDecal = useModelStore((state) => state.activeDecal);
const [editing, setEditing] = useState(false);
const [text, setText] = useState("");
const [color, setColor] = useState("#ffffff");
return (
<>
{editing ? (
<div className={"rounded bg-white p-4"}>
<h2 className="font-bold">添加文字</h2>
<FormControl>
<FormLabel>文字</FormLabel>
<Input
value={text}
onInput={(ev) => {
setText(() => (ev.target as HTMLInputElement).value);
}}
/>
</FormControl>
<FormControl>
<FormLabel>文字颜色</FormLabel>
<Input
type="color"
value={color}
onInput={(ev) => {
setColor(() => (ev.target as HTMLInputElement).value);
}}
/>
</FormControl>
<div className={"mt-2 flex justify-center"}>
<Button
colorScheme="messenger"
size={"sm"}
onClick={() => {
const canvas = document.createElement("canvas");
const fabricText = new fabric.Text(text, {
fill: color,
});
const fabricCanvas = new fabric.Canvas(canvas, {
width: fabricText.width,
height: fabricText.height,
});
const decals = useModelStore((state) => state.decals);
const setDecals = useModelStore((state) => state.setDecals);
const setActiveDecal = useModelStore((state) => state.setActiveDecal);
const activeDecal = useModelStore((state) => state.activeDecal);
const [editing, setEditing] = useState(false);
const [text, setText] = useState("");
const [color, setColor] = useState("#ffffff");
return (
<>
{editing ? (
<div className={"rounded bg-white p-4"}>
<h2 className="font-bold">添加文字</h2>
<FormControl>
<FormLabel>文字</FormLabel>
<Input
value={text}
onInput={(ev) => {
setText(() => (ev.target as HTMLInputElement).value);
}}
/>
</FormControl>
<FormControl>
<FormLabel>文字颜色</FormLabel>
<Input
type="color"
value={color}
onInput={(ev) => {
setColor(() => (ev.target as HTMLInputElement).value);
}}
/>
</FormControl>
<div className={"mt-2 flex justify-center"}>
<Button
colorScheme="messenger"
size={"sm"}
onClick={() => {
const canvas = document.createElement("canvas");
const fabricText = new fabric.Text(text, {
fill: color,
// fontFamily: 'sans-serif'
});
const fabricCanvas = new fabric.Canvas(canvas, {
width: fabricText.width,
height: fabricText.height,
});
fabricCanvas.add(fabricText);
const id = v4();
setActiveDecal(id);
setDecals([
...decals,
{
id,
postion: new Vector3(0, 0, 0),
text,
url: fabricCanvas.toDataURL(),
type: StickerType.text,
},
]);
setText(() => "");
setColor(() => "#ffffff");
setEditing(() => false);
}}
>
确定
</Button>
</div>
</div>
) : (
<ul>
{decals
.filter((el) => el.type === StickerType.text)
.map((text) => (
<li
onClick={() => {
setActiveDecal(text.id);
}}
key={text.id}
className={`mt-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${
activeDecal === text.id ? "border-2 border-green-100" : ""
}`}
>
<span>{text.text}</span>
<div className={"right"}>
<IconButton
onClick={(ev) => {
ev.stopPropagation();
}}
size={"xs"}
icon={<EditIcon />}
aria-label={""}
/>
<IconButton
className={"ml-1"}
onClick={(ev) => {
ev.stopPropagation();
}}
size={"xs"}
icon={<DeleteIcon />}
aria-label={""}
/>
fabricCanvas.add(fabricText);
const id = v4();
setActiveDecal(id);
setDecals([
...decals,
{
id,
postion: new Vector3(0, 0, 0),
text,
url: fabricCanvas.toDataURL(),
type: StickerType.text,
},
]);
setText(() => "");
setColor(() => "#ffffff");
setEditing(() => false);
}}
>
确定
</Button>
</div>
</div>
</li>
))}
</ul>
)}
<div className="mt-4 flex justify-center">
<Button
colorScheme="messenger"
onClick={() => {
// setOpen(() => true)
setEditing(() => true);
}}
leftIcon={<AddIcon />}
>
添加文字
</Button>
</div>
</>
);
) : (
<ul>
{decals
.filter((el) => el.type === StickerType.text)
.map((text) => (
<li
onClick={() => {
setActiveDecal(text.id);
}}
key={text.id}
className={`mb-2 flex h-12 w-full cursor-pointer items-center justify-between rounded bg-white px-2 shadow ${activeDecal === text.id ? "border-2 border-green-100 bg-blue-200" : ""
}`}
>
<span>{text.text}</span>
<div className={"right"}>
<IconButton
onClick={(ev) => {
ev.stopPropagation();
}}
size={"xs"}
icon={<EditIcon />}
aria-label={""}
/>
<IconButton
className={"ml-1"}
onClick={(ev) => {
ev.stopPropagation();
setDecals(decals.filter(el => el.id !== text.id))
}}
size={"xs"}
icon={<DeleteIcon />}
aria-label={""}
colorScheme="red"
/>
</div>
</li>
))}
</ul>
)}
<div className="mt-4 flex justify-center">
<Button
colorScheme="messenger"
onClick={() => {
setEditing(() => true);
}}
leftIcon={<AddIcon />}
>
添加文字
</Button>
</div>
</>
);
};
export default TextLabelPanel;

2
src/components/ThreeScene.tsx
View File

@ -53,7 +53,6 @@ const CapModel = () => {
y / models[activeModel].scale,
z / models[activeModel].scale,
);
console.log(pos);
setDecalPositon(activeDecal, pos);
}
}}
@ -76,7 +75,6 @@ const CapModel = () => {
) : (
<meshStandardMaterial color="gray" />
)}
</mesh>
);
}

4
src/constant/models.ts
View File

@ -2,7 +2,7 @@ export const models = [
{
name: "版型1",
path: "/models/baseball_cap_3d.glb",
icon: "/icon/baseball_cap_3d.png",
icon: "/icon/model1.jpg",
scale: 18,
mesh: [
{
@ -49,7 +49,7 @@ export const models = [
},
{
name: "版型2",
icon: "/icon/baseball_cap_3d_logo.png",
icon: "/icon/model2.jpg",
path: "/models/baseball_cap.glb",
scale: 0.02,
mesh: [

5
vite.config.ts
View File

@ -1,10 +1,13 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import {fileURLToPath, URL} from 'node:url'
import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
host: true
},
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url))