可拖拽配置3d地下停车场大屏

jstopo.top

const createCarPark = (scene,obj)=>{//创建汽车模型car
    const arcFun = (point)=>{
        const R = 0.8; //圆弧半径
        const N = 80; //分段数量
        const sp = 2 * Math.PI / N;//两个相邻点间隔弧度
        // 批量生成圆弧上的顶点数据
        const arr = [];
        for (let i = 0; i < N; i++) {
            const angle =  sp * i;//当前点弧度
            // 以坐标原点为中心，在XOY平面上生成圆弧上的顶点数据
            const x = point.x + R * Math.cos(angle);
            const y = point.y + R * Math.sin(angle);
            arr.push([x, y]);
        }
        return arr;
    };
    const points = [
        [-11, 1.1],
        [-11, 2.8],
        [-9.6, 3.6],
        [-5, 3.6],
        [-3, 2.8],
        [-3, 1.1],
        ...arcFun({x: -4,y: 1.1}),
        [-6, 1.1],
        ...arcFun({x: -10,y: 1.1}),
    ];
    const vector2 = [];
    points.forEach(point=>{
        vector2.push(new THREE.Vector2(...point))
    })
    // Shape表示一个平面多边形轮廓
    const shape = new THREE.Shape([
        // 按照特定顺序，依次书写多边形顶点坐标
        ...vector2
    ]);
    const geometry = new THREE.ExtrudeBufferGeometry(
        shape,{
            depth: 4.2,
            bevelEnabled: true, //禁止倒角,默认true
            bevelThickness: 1, //倒角尺寸:拉伸方向
            bevelSize: 1, //倒角尺寸:垂直拉伸方向
            bevelSegments: 10, //倒圆角：倒角细分精度，默认3
        }
    );
    // 线材质
    const material = new THREE.MeshLambertMaterial({
        color: obj.color||0x55dae2, //模型颜色
        transparent: true,
        opacity: obj.opacity
    });
    const car = new THREE.Mesh(geometry,material);
    car.rotateY(Math.PI/2);
    car.position.set(...obj.position);
    scene.add(car);
}