This commit is contained in:
X1627315083
2025-04-30 14:01:52 +08:00
parent ac06be639c
commit a4e040d0ff
42 changed files with 3673 additions and 715 deletions

View File

@@ -661,12 +661,11 @@ export default defineComponent({
});
},
setGenerate(dataList:any){
let data = dataList
let dataNum = dataList.length
let state = true
this.generateTime = setInterval(()=>{
if(!this.isGenerate || !this.remGenerate)return
if(!this.isGenerate)return
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.generateResult, data).then(

View File

@@ -46,6 +46,9 @@
<div class="modelBox">
<div class="img">
<img :src="selectModel.threeDPatternLayoutUrl" alt="">
<div class="btn">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="openScaleImage()"></i>
</div>
</div>
</div>
<div class="gallery_btn" @click="openDown()">Download</div>
@@ -53,6 +56,7 @@
<div class="download">
<download ref="download"></download>
</div>
<scaleImage ref="scaleImage"></scaleImage>
</div>
</template>
<script lang="ts">
@@ -63,9 +67,10 @@ import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import threeBox from "./three.vue"
import download from "./download.vue"
import scaleImage from "@/component/HomePage/scaleImage.vue";
export default defineComponent({
components:{
threeBox,download
threeBox,download,scaleImage
},
props:{
},
@@ -101,7 +106,7 @@ export default defineComponent({
const setSelectModel = (item:any)=>{
data.isShowMark = true
const value = {
threeDSimpleId:item.id,
threeDSimpleId:item.threeDSimpleId,
}
Https.axiosPost(Https.httpUrls.getLayoutDetail,{},{params:value}).then((res:any)=>{
data.selectModel = res
@@ -122,11 +127,12 @@ export default defineComponent({
const dataDom = reactive({
threeBox:null as any,
download:null as any,
scaleImage:null as any,
})
const openSetData = ()=>{
nextTick(()=>{
let id = store.state.HomeStoreModule.patternMaking3D.threeDsimpleId
if(id && data.selectModel.id == -1)setSelectModel({id})
if(id && data.selectModel.id == -1)setSelectModel({threeDSimpleId:id})
})
setTimeout(()=>{
data.maskShow = true
@@ -177,6 +183,11 @@ export default defineComponent({
const setMaterial = (item:any)=>{
dataDom.threeBox.addMaterial(item)
}
const openScaleImage = ()=>{
let scaleImage:any = dataDom.scaleImage
scaleImage.isLike = false
scaleImage.init([{imgUrl:data.selectModel.threeDPatternLayoutUrl}],0)
}
return{
...toRefs(dataDom),
...toRefs(data),
@@ -187,6 +198,7 @@ export default defineComponent({
openDown,
setLibraryOrModel,
setMaterial,
openScaleImage
}
},
directives:{
@@ -322,6 +334,15 @@ export default defineComponent({
>.img{
width: 100%;
height: 100%;
position: relative;
> .btn{
position: absolute;
right: 2rem;
top: 2rem;
> i{
cursor: pointer;
}
}
img{
width: 100%;
height: 100%;

View File

@@ -2,28 +2,30 @@
<div class="three">
<div class="parameter">
<label>
<span>X:</span>
<span>scaleX:</span>
<a-slider class="system_silder"
v-model:value="repeat.x"
:tooltipVisible="false"
@change="changeRepeat"
:max="2"
:max="6"
:step="0.001"
:min="0.002"
>
</a-slider>
</label>
<label>
<span>Y:</span>
<span>scaleY:</span>
<a-slider class="system_silder"
v-model:value="repeat.y"
:tooltipVisible="false"
@change="changeRepeat"
:max="2"
:step="0.01"
:max="6"
:min="0.002"
:step="0.001"
>
</a-slider>
</label>
<i class="fi fi-br-link" :class="{'fi-br-link':isLock,'fi-bs-link-slash':!isLock}" @click="setLock"></i>
</div>
<div class="model" ref="threeDom">
@@ -81,6 +83,7 @@ export default defineComponent({
y:1,
},
animationId:null as any,
isLock:false,
})
const dataDom = reactive({
threeDom:null as any,
@@ -255,11 +258,14 @@ export default defineComponent({
// 3. 配置纹理参数
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// texture.wrapS = THREE.ClampToEdgeWrapping; // 水平方向不重复
// texture.wrapT = THREE.ClampToEdgeWrapping; // 垂直方向不重复
// texture.repeat.set(1, 1); // 纹理重复次数
texture.anisotropy = 32; // 提高纹理清晰度
data.group?.traverse((child:any) => {
if (child.isMesh) {
console.log(child.name)
// 5. 创建新材质(根据需求选择材质类型)
const textureWidth = texture.image.width;
const textureHeight = texture.image.height;
@@ -281,13 +287,40 @@ export default defineComponent({
metalness: .2, // 金属质感 (0-1)
side: THREE.DoubleSide // 双面渲染
});
// 6. 替换原有材质
child.material = newMaterial;
// 7. 如果需要单独控制某些子模型的UV
if (child.geometry.attributes.uv) {
// 可以在这里修改UV坐标
const uvs = child.geometry.attributes.uv.array;
// ...UV操作逻辑...
// 计算UV边界
let minU = Infinity, maxU = -Infinity;
let minV = Infinity, maxV = -Infinity;
for (let i = 0; i < uvs.length; i += 2) {
minU = Math.min(minU, uvs[i]);
maxU = Math.max(maxU, uvs[i]);
minV = Math.min(minV, uvs[i+1]);
maxV = Math.max(maxV, uvs[i+1]);
}
const uvWidth = maxU - minU;
const uvHeight = maxV - minV;
// 仅对非小UV区域设置材质
if (!(uvWidth < 1.2 || uvHeight < 1.2)) {
const newMaterial = new THREE.MeshStandardMaterial({
map: texture,
roughness: 0.7,
metalness: 0.2,
side: THREE.DoubleSide
});
child.material = newMaterial;
}else{
// child.material = new THREE.MeshStandardMaterial({
// transparent: true,
// opacity: 0, // 完全透明
// side: THREE.DoubleSide
// });
}
child.geometry.attributes.uv.needsUpdate = true;
}
}
data.load.state = false
@@ -391,9 +424,14 @@ export default defineComponent({
data.load.state = false
}
const changeRepeat = (e:any)=>{
if(data.isLock)data.repeat.x = e
if(data.isLock)data.repeat.y = e
clearTimeout(dataTime.updataRepeat)
dataTime.updataRepeat = setTimeout(()=>{
data.textureLoader.repeat.set(2 - data.repeat.x,2 - data.repeat.y); // 纹理重复次数
data.repeat.x = data.repeat.x == 6 ? 5.999 : data.repeat.x
data.repeat.y = data.repeat.y == 6 ? 5.999 : data.repeat.y
data.textureLoader.repeat.set(6 - data.repeat.x,6 - data.repeat.y); // 纹理重复次数
let value = {
x:data.repeat.x,
y:data.repeat.y,
@@ -401,6 +439,9 @@ export default defineComponent({
store.commit('setPatternMaking3D',value)
},1000)
}
const setLock = ()=>{
data.isLock = !data.isLock
}
onMounted(()=>{
})
onBeforeUnmount(()=>{
@@ -432,6 +473,7 @@ export default defineComponent({
openSetData,
addMaterial,
changeRepeat,
setLock,
}
},
provide() {
@@ -449,6 +491,7 @@ export default defineComponent({
overflow: hidden;
> .parameter{
display: flex;
align-items: center;
> label{
display: flex;
align-items: center;
@@ -462,6 +505,17 @@ export default defineComponent({
margin-right: 1rem;
}
}
> i{
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&.active{
opacity: .7;
}
}
}
> .model{
width: 100%;

View File

@@ -13,7 +13,7 @@
</div>
</div>
<div class="gender marginBottom" v-if="show.age">
<div class="text">Age</div>
<div class="text">Role</div>
<div class="radio">
<label>
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">