3d添加印花 等

This commit is contained in:
X1627315083
2025-04-16 10:43:54 +08:00
parent fd2e47e783
commit c2288a30b2
51 changed files with 5588 additions and 359 deletions

View File

@@ -0,0 +1,41 @@
<template>
<div class="createCloud">
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
props:{
},
emits:[],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
})
const dataDom = reactive({
})
return{
...toRefs(dataDom),
...toRefs(data),
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.createCloud{
width: 100%;
height: 100%;
position: relative;
}
</style>

View File

@@ -0,0 +1,171 @@
<template>
<div class="uploading">
<div class="title">
<div class="list">
<div
class="titleItem active"
>
<span class="detailText">All</span>
</div>
</div>
<div class="createCloud">
<div class="gallery_btn" @click="createClound">Create cloudUploading</div>
</div>
</div>
<div class="contentList">
<div class="title">
<div class="titleItem" v-for="item in cloudTiltleList" :key="item.value">
{{ item.name }}
</div>
</div>
<div class="content"></div>
</div>
<!-- <createCloud ref="createCloud"></createCloud> -->
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import createCloud from "./createCloud.vue";
export default defineComponent({
components:{
createCloud,
},
props:{
workflowType:{
type:String,
default:'' as any,
required:true
}
},
emits:[],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
pageType:'list',
generateList:{
seriesDesign:[
{
name:'1',
value:100,
}
],
singleProductDesign:[
{
name:'1',
value:100,
}
],
printDesign:[
{
name:'1',
value:100,
}
],
productDrawingDesign:[
{
name:'1',
value:100,
}
],
printingDesign3D:[
{
name:'1',
value:100,
}
],
sketchDesign:[]
},
cloudTiltleList:[
{
name:'File name',
value:'name',
},{
name:'File size',
value:'size',
},{
name:'UPloaded by',
value:'upLoadedBy',
},{
name:'Task time',
value:'taskTime',
},
],
})
const dataDom = reactive({
createCloud,
})
const createClound = ()=>{
}
return{
...toRefs(dataDom),
...toRefs(data),
createClound,
}
},
provide() {
return {
}
},
})
</script>
<style lang="less" scoped>
.uploading{
width: 100%;
height: 100%;
position: relative;
padding-top: 3rem;
display: flex;
flex-direction: column;
> .title{
width: 100%;
display: flex;
> .list{
display: flex;
margin-bottom: 2.5rem;
> .titleItem:last-child{
margin-right: 0;
}
> .titleItem{
position: relative;
cursor: pointer;
margin-right: 6.5rem;
}
> .titleItem::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .active {
color: #000;
font-weight: 600;
}
> .active::before {
width: 100%;
}
}
> .createCloud{
margin-left: auto;
}
}
> .contentList{
flex: 1;
overflow: hidden;
padding-top: 2.5rem;
> .title{
}
}
}
</style>

View File

@@ -665,7 +665,6 @@ export default defineComponent({
}
return data
})
console.log(123)
this.store.commit('setColorboardList',newColorList)
},

View File

@@ -1,7 +1,25 @@
<template>
<div class="deReconstruction">
<div class="selectSektch itemBox">
<selectList @selectImgItem="selectImgItem" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
<div class="type">
<a-select
v-model:value="segmentationType"
show-search
:allowClear="false"
style="width: 100%"
placeholder="Please select"
:options="[{value:'product',label:'product'},{value:'sketch',label:'sketch'}]"
></a-select>
<!-- <label>
<div class="text">product</div>
<input type="radio" value="product" v-model="segmentationType">
</label>
<label>
<div class="text">sketch</div>
<input type="radio" value="sketch" v-model="segmentationType">
</label> -->
</div>
<selectList @selectImgItem="selectImgItem" :segmentationType="segmentationType" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
</div>
<div class="canvas itemBox">
<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
@@ -44,6 +62,7 @@ export default defineComponent({
sketchCatecoryList:computed(()=>{
return store.state.Workspace.probjects.positionList
}),
segmentationType:'product',
generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
})
const setIsShowMark:any = inject('setIsShowMark')
@@ -51,8 +70,33 @@ export default defineComponent({
canvasBox:null as any,
})
const selectImgItem = (data:any)=>{
data.minioUrl = data.url
dataDom.canvasBox.addImage(data)
if(!data.designType){
canvasAddImg(data)
}else{
// data.minioUrl = data.url
// dataDom.canvasBox.addImage(data)
getSegmentation(data)
}
}
const canvasAddImg = (list:any)=>{
list.segmentedImages.forEach((url:any) => {
list.imgUrl = url
dataDom.canvasBox.addImage(list)
});
}
const getSegmentation = (value:any)=>{
let param = new FormData();
param.append('id',value.id)
param.append('file','')
param.append('type',data.segmentationType)
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.imageSegmentation,param,config)
.then((rv:any) => {
// console.log(rv);
canvasAddImg(rv[0])
}
).catch(rv=>{
})
}
const openSetData = ()=>{
dataDom.canvasBox.openSetData()
@@ -154,6 +198,24 @@ export default defineComponent({
&.selectSektch{
width: 37rem;
flex-shrink: 0;
> .type{
display: flex;
justify-content: space-between;
> :deep(.ant-select){
margin: 1rem 0;
.ant-select-selector{
border-radius: 2rem;
}
}
>label{
display: flex;
align-items: center;
>div{
font-size: 2rem;
margin-left: 1rem;
}
}
}
}
&.canvas{
flex: 1;

View File

@@ -1,9 +1,7 @@
<template>
<div class="designPage">
<div class="page_content">
<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
You can use these features only after becoming a regular user~
</div>
<div class="page_content_body">
<div class="designPage_body">
<div class="designPage_left" ref="hidden">
@@ -1456,19 +1454,7 @@ export default defineComponent({
.page_content {
position: relative;
.userSystem{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index:2;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: 600;
font-size: 4rem;
}
.designPage_left_bottom{
position: absolute;
width: 4rem;

View File

@@ -1,8 +1,11 @@
<template>
<div class="patternMaking3D">
<div class="selectModel">
<div class="heard">Clothing</div>
<div class="list" v-if="maskShow">
<div class="heard selectList">
<div :class="{active:libraryOrModel == 'model'}" @click="setLibraryOrModel('model')">Clothing</div>
<div :class="{active:libraryOrModel == 'print'}" @click="setLibraryOrModel('print')">Print</div>
</div>
<div class="list" v-show="libraryOrModel == 'model'" v-if="maskShow">
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
<img :src="item.url" alt="">
</div>
@@ -13,6 +16,11 @@
</span>
</div>
</div>
<div class="list printList" v-show="libraryOrModel == 'print'">
<div v-for="item in printList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setMaterial(item)">
<img :src="item.url || item.imgUrl" alt="">
</div>
</div>
</div>
<div class="model" v-show="selectModel.id != -1">
<div class="heard">
@@ -48,7 +56,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, watch} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
@@ -68,7 +76,12 @@ export default defineComponent({
selectModel:{
id:-1,
} as any,
// printCatecoryList:computed(()=>{
// return store.state.UserHabit.printType
// }),
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
modelList:[] as any,
printList:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
isShowMark:false,
isNoData:false,
isShowLoading:false,
@@ -77,6 +90,13 @@ export default defineComponent({
imgOrThree:false,
isFront:false,
maskShow:false,
libraryOrModel:'model'
})
watch(()=>data.selectObject.sex,(newVal)=>{
data.modelList = []
data.currentPage = 0,
data.isNoData = false
data.isShowMark = false
})
const setSelectModel = (item:any)=>{
data.isShowMark = true
@@ -114,14 +134,14 @@ export default defineComponent({
let value = {
page: data.currentPage,
size:data.pageSize,
sex:data.selectObject.sex,
}
data.isShowLoading = true
Https.axiosPost(Https.httpUrls.threeDPage,value).then(
(rv: any) => {
if(rv.content.length == 0)data.isNoData = true
data.isShowLoading = false
data.modelList.push(...rv.content)
data.isShowLoading = false
}
).catch((res)=>{
data.isNoData = true
@@ -147,6 +167,14 @@ export default defineComponent({
const openDown = ()=>{
dataDom.download.openDown(data.selectModel.id)
}
const setLibraryOrModel = (str:any)=>{
if(str == 'print' && data.selectModel.id == -1)return
data.libraryOrModel = str
}
const setMaterial = (item:any)=>{
let url = item.url || item.url || item.imgUrl
dataDom.threeBox.addMaterial(url)
}
return{
...toRefs(dataDom),
...toRefs(data),
@@ -155,6 +183,8 @@ export default defineComponent({
getModelList,
setImgOrThree,
openDown,
setLibraryOrModel,
setMaterial,
}
},
directives:{
@@ -202,6 +232,33 @@ export default defineComponent({
display: flex;
justify-content: space-between;
width: 100%;
&.selectList{
justify-content: flex-start;
> div{
position: relative;
margin-right: 2rem;
margin-bottom: 2rem;
}
> div::before{
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
transition: 0.3s all;
}
> .active {
color: #000;
font-weight: 600;
}
> .active::before {
width: 100%;
}
}
> .switch{
font-weight: 400;
}
@@ -219,6 +276,14 @@ export default defineComponent({
flex-wrap: wrap;
overflow-y: auto;
align-content: flex-start;
&.printList{
> .modelItem{
aspect-ratio: 1 / 1;
>img{
padding: 0;
}
}
}
> .modelItem{
width: calc(100% / 4 - 1rem);
margin: .5rem;
@@ -230,7 +295,9 @@ export default defineComponent({
> img{
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
padding: 1rem;
}
&.active{
border: 2px solid #000;
@@ -247,6 +314,7 @@ export default defineComponent({
// height: 20rem;
// height: 75rem;
flex: 1;
padding: 1rem 0;
overflow: hidden;
margin: auto;
>.img{

View File

@@ -209,20 +209,31 @@ export default defineComponent({
await addModel(url)
// addMaterial()
}
const addMaterial = ()=>{
const addMaterial = (url:any)=>{
//添加图片材质
data.load.state = true
let textureLoader = new THREE.TextureLoader()
textureLoader.load('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BD%E8%89%B2%E5%9B%BE%E7%89%87&hs=0&pn=8&spn=0&di=7466852183703552001&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1061489690%2C1376605706&os=2709213815%2C2487532130&simid=3551480199%2C346831275&adpicid=0&lpn=0&ln=0&fm=&sme=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fwx2.sinaimg.cn%2Fmw690%2F941fd00fgy1hrx01tvys1j20zk1bet8s.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fojtk5_z%26e3Bv54AzdH3Fd9bc88db90AzdH3FO5LdNyykj&gsm=&islist=&querylist=', // 图片放在public/textures目录下
textureLoader.load(url, // 图片放在public/textures目录下
(texture:any) => {
// 3. 配置纹理参数
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1); // 纹理重复次数
// texture.repeat.set(1, 1); // 纹理重复次数
texture.anisotropy = 32; // 提高纹理清晰度
data.group?.traverse((child:any) => {
if (child.isMesh) {
// 5. 创建新材质(根据需求选择材质类型)
const textureWidth = texture.image.width;
const textureHeight = texture.image.height;
const box = new THREE.Box3().setFromObject(child);
const modelWidth = box.getSize(new THREE.Vector3()).x;
const modelHeight = box.getSize(new THREE.Vector3()).y;
const repeatX = modelWidth / textureWidth;
const repeatY = modelHeight / textureHeight;
// texture.repeat.set(1, 1); // 纹理重复次数
texture.repeat.set(repeatX, repeatY); // 纹理重复次数
const newMaterial = new THREE.MeshStandardMaterial({
map: texture, // 基础颜色贴图
roughness: 0.7, // 表面粗糙度 (0-1)
@@ -231,7 +242,6 @@ export default defineComponent({
});
// 6. 替换原有材质
child.material = newMaterial;
// 7. 如果需要单独控制某些子模型的UV
if (child.geometry.attributes.uv) {
// 可以在这里修改UV坐标
@@ -336,6 +346,7 @@ export default defineComponent({
...toRefs(dataDom),
...toRefs(data),
openSetData,
addMaterial,
}
},
provide() {

View File

@@ -79,7 +79,7 @@
<div class="element">
<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
<div class="content">
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isLike="true" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
</div>
<!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
<span class="icon iconfont icon-xiala"></span>

View File

@@ -169,7 +169,7 @@
</div>
</div> -->
<div class="content">
<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :list="likeList[productimgMenu.value]"></generalDrag>
<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :isLike="true" :list="likeList[productimgMenu.value]"></generalDrag>
</div>
<!-- </div> -->