六朝何事、只为门户私计！

自定义画布地板效果

HTML

<temlplate>
    <el-input-number v-model="setSizeX" :step="5" :max="1000" size="small" />
    <el-input-number v-model="setSizeY" :step="5" size="small" />
    <el-input-number v-model="setRepeat.repeatX" size="small" />
    <el-input-number v-model="setRepeat.repeatY" size="small" />
    <el-select v-model="value" placeholder="Select" size="small" style="width: 140px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</temlplate>

JS

<script setup lang="ts>
    
let setSizeX = ref(300)
let setSizeY = ref(300)
let setRepeat = reactive({
    repeatX: 1,
    repeatY: 1
})

let value: any = ref('/public/mo-image/科技地板3.png')
const options = [
    {
        value: '/public/mo-image/科技地板2.png',
        label: '科技地板2',
    },
    {
        value: '/public/mo-image/科技地板3.png',
        label: '科技地板3',
    },
]


let planeGroup = new THREE.Group();
const texturFn = (setSizeX: any, setSizeY: any, setRepeat: any, url: any)=> {
    const texture = new THREE.TextureLoader().load(url.value);
    //设置贴图平铺方式
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.colorSpace = THREE.SRGBColorSpace;
    texture.repeat.set(setRepeat.repeatX, setRepeat.repeatY);
    const geometry = new THREE.PlaneGeometry(setSizeX.value, setSizeY.value);
    const material = new THREE.MeshBasicMaterial({
        side: THREE.DoubleSide,
        map: texture,
        transparent: true,
    });
    const plane = new THREE.Mesh(geometry, material);
    plane.position.setY(3)
    plane.rotateX(-Math.PI / 2);
    plane.renderOrder = 1;
    planeGroup.add(plane);
    if (planeGroup.children.length > 1) {
        planeGroup.remove(planeGroup.children[0]);
        scene.remove(planeGroup);
    }
    scene.add(planeGroup);
}


const texturDibanFn = () => {
    texturFn(setSizeX, setSizeY, setRepeat, value)
}
texturDibanFn()

watch([() => setSizeX.value, () => setSizeY.value, () => setRepeat.repeatX, () => setRepeat.repeatY, () => value.value], (newval, oldval) => {
    setTimeout(() => {
        texturFn(setSizeX, setSizeY, setRepeat, value)
    }, 200)
})
<script/>