three Layers 介绍

Layers 是什么能做什么

• 这是一个3D分层工具
• 能够对要添加的场景中的物体设置层级
• 通过在相机中设置层级并渲染

<template>
    <div id="parkingLot" ref="parkingLot">
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from 'three';
const parkingLot = ref();


onMounted(() => {
    const DOMEl = parkingLot.value;
    // 获取 DOMEl 的宽度和高度，以设置渲染器的大小。
    const width = DOMEl.clientWidth;
    const height = DOMEl.clientHeight;


    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    DOMEl.appendChild( renderer.domElement );
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 2000 );
    camera.position.set( 0, 300, 800 );
    camera.lookAt( 0, 0, 0 );

    

    // 创建两个立方体对象
    const geometry = new THREE.BoxGeometry(200,200,200);
    const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色
    const material2 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色

    const cube1 = new THREE.Mesh(geometry, material1);
    const cube2 = new THREE.Mesh(geometry, material2);

        
    // 设置对象的层次
    cube1.layers.set(0); // cube1 在第 0 层
    cube2.layers.set(1); // cube2 在第 1 层

    // 将对象添加到场景中
    scene.add(cube1);
    scene.add(cube2);

    // 渲染函数
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    // 渲染第 0 层
    camera.layers.set(0); // 只渲染第 0 层
    animate();

    // 切换到渲染第 1 层（可以通过点击事件或其他交互触发）
    setTimeout(() => {
        camera.layers.set(1); // 只渲染第 1 层
        animate();
    }, 2000); // 2秒后切换到第 1 层
});
</script>
<style lang="scss" scoped="scoped">

    #parkingLot {
        width: 940px;
        height: 940px;
        border: 1px solid #ccc;
        margin: 30px auto;
    }

</style>