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

jstopo.top

js 复制代码
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);
}
相关推荐
风无雨2 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Rainbow_Pearl6 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心43 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js