记一次three.js 布局3D室内简易地图

完整DEMO有需要可以下载，three.js json配置地图DEMO

随着html5 canvas的流行，酷炫的web端效果层出不穷，搭载基于webgl 的three.js的图形库可以做出基于web的3D效果。最近应对客户需求，2D平面地图已经不太满足客户的口味，3D的效果更让人接受，先看一下成果图。

对应室内地图CAD图纸 进行3D立体效果拉伸，再加上一些实景模型的搭配，使得整体效果更好。

地图地板墙体的依据cad 尺寸制定的json数据协议：

 {
        title: '',
        x: 480,
        y: 80,
        z: 0,
        width: 2,
        height: 866,
        color: "#30B2BB",
        textcolor: "black",
        bordercolor: "rgba(76, 181, 216, 0.85)",
        bspMesh: [

            // 小房子的墙
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 82,
                width: 38,
                height: 2,
                positionY: 0,
            }]
}

3D坐标轴对应2D多了一个高度 ，这里高度设置为Y轴，2D.Y=>3D.Z  2D.X=>3D.X 。3D场景新增的几何体都是模型的中心在原点，而2D的原点是从屏幕左上角开始（0,0），所以这里需要一个转换，首先确认地图的最大长宽尺寸，然后通过计算得到2D坐标转换3D时基于地图的位置设置其position，

   data.x = data.width / 2 - MapXLength / 2 + data.x;

    data.z = data.height / 2 - MapZLength / 2 + data.z;

常规的地面墙面，以及柱子，墙面门通过，ThreeBSP库进行模型的组合，打孔，完成。

地图区域的说明通过DIV+css来完成，实时计算3D坐标系固定位置对于2D屏幕的位置来实现引导性的连接：

function worldPointToScreen(point) {
    let vec2 = point.project(camera);
    let halfWidth = window.innerWidth / 2;
    let halfHeight = window.innerHeight / 2;
    return {
        x: vec2.x * halfWidth + halfWidth,
        y: -vec2.y * halfHeight + halfHeight
    };
}

转换公式如上。

地图操作控制器是OrbitControls。