3d添加印花 等
This commit is contained in:
@@ -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>
|
||||
171
src/component/HomePage/index/model/cloudUploading/index.vue
Normal file
171
src/component/HomePage/index/model/cloudUploading/index.vue
Normal 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>
|
||||
@@ -665,7 +665,6 @@ export default defineComponent({
|
||||
}
|
||||
return data
|
||||
})
|
||||
console.log(123)
|
||||
this.store.commit('setColorboardList',newColorList)
|
||||
},
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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{
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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> -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user