可拖拽配置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);
}
相关推荐
心.c3 分钟前
react当中的this指向
前端·javascript·react.js
Java水解10 分钟前
Web API基础
前端
闲鱼不闲11 分钟前
实现iframe重定向通知父级页面跳转
前端
咸鱼青菜好好味12 分钟前
node的项目实战相关-2-前台接口
前端
春秋半夏13 分钟前
音乐播放、歌词滚动
前端·css
Sioncovy16 分钟前
Zustand 源码阅读计划(3)- JS 篇 - Middlewares 中间件逻辑
前端·javascript
bo5210018 分钟前
垃圾回收机制详解
前端
多啦C梦a20 分钟前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js
患得患失94931 分钟前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
三年三月34 分钟前
021-顶点法线与反射原理
javascript·three.js