可拖拽配置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);
}
相关推荐
mapbar_front7 分钟前
今天聊聊面试
前端·面试
华仔啊25 分钟前
Vue3+CSS实现一个非常丝滑的 input 标签上浮动画,设计师看了都点赞
前端·css·vue.js
北海道浪子29 分钟前
[免费送$1000]ClaudeCode、Codex等AI模型在开发中的使用
前端·人工智能·后端
明月与玄武35 分钟前
2025 前端框架决战:Vue 与 React 分析优缺点及使用场景!
前端·vue.js·react.js
无盐海1 小时前
XSS漏洞攻击 (跨站脚本攻击)
前端·xss
不一样的少年_1 小时前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
阿奇__1 小时前
el-table默认排序设置
前端·javascript·vue.js
hongc931 小时前
element-ui el-table 设置固定列fixed 高度不对
前端·vue.js·elementui
Forfun_tt1 小时前
xss-labs pass-12
前端·xss
云枫晖2 小时前
Webpack系列-编译过程
前端·webpack