3d添加印花 等
This commit is contained in:
X1627315083
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user