上节我们把 2D 视图画出来了:

但它有些偏差。
为啥会有偏差呢?
用的同一份数据,3D 视图对了那应该 2D 视图也一样才对。
先用那个简单的户型,注释掉地板,看一下:


现在是有偏差的,但你把每面墙旋转 180 度:


你会发现它们虽然位置不对,但是之前的缺口能对上了。
也就是说之前的问题在于画出的 Shape 正好是反着的,只要把它翻转下就好了。
形状反了,那位置也得反过来才行。

wall.position.set(-item.position.x, -item.position.y, -item.position.z);
设置相反的位置。
看下效果:

现在就对上了。
也就是说,当画出的 Shape 反着的时候,可以让它旋转 180 度,位置设置相反数,这样就正过来了。
当然,另一种方式就是改一下绘制逻辑,比如本来是第一种顺序,改成第二种自然就反过来了:

这里我们绘制逻辑就不改了,翻转一下就行。
然后把地板放出来:


地板位置不对,这个也是旋转下就好了。


现在位置就对了。
最后剩下那个地板和墙重合的问题,纯粹是数值问题。
其实 3D 视图也有这个问题:


关掉墙隐藏,把地板改成双面可见。
看下效果:

可以看到,在 3D 视图的墙和地板就是重合的,只不过我们之前只从上往下看,没注意到。
我们改一下数值:

points: [
{ x: 0, z: 0},
{ x: 0, z: 6800},
{ x: 4800, z: 6800},
{ x: 4800, z: 0},
{ x: 0, z: 0 }
]
就是把墙面的 200 厚度留出来。
然后绘制的时候也要设置下位置:

floor.position.y = 200;
floor.position.z = 200;

现在大小就正好了。
但现在 2D 视图的位置也不大对,也调一下:


floor.position.z = -200;

现在 2D、3D 视图就都对了。
然后切换到另一个户型看下:


同样先把地板注释掉。

墙是对的。
地板也按照去掉墙面的 200 厚度来调整下数据:
floors: [
{
points: [
{ x: -2000, z: 5000},
{ x: -5000, z: 5000},
{ x: -5000, z: 6680},
{ x: -2000, z: 6680},
{ x: -2000, z: 5000},
],
},
{
points: [
{ x: 0, z: 0},
{ x: 2680, z: 0},
{ x: 2680, z: 6900},
{ x: 680, z: 6900},
{ x: 680, z: 8100},
{ x: -2000, z: 8100},
{ x: -2000, z: 6680},
{ x: -2000, z: 5000},
{ x: -2000, z: 5000},
{ x: 0, z: 5000},
{ x: 0, z: 0},
],
textureUrl: './floor-texture2.png'
}
],
看下效果:

这样,2D、3D 视图就都对了。
把地板改回单面:

开启墙隐藏:


最后我们再调节一些细节:
2D 视图也设置一样的环境光强度:


还有之前没有注释掉这个:

注释掉之后旋转角度就不对了:

改成 90:

看下调整好的效果:

没啥问题。
案例代码上传了小册仓库
总结
这节我们修复了 2D 视图绘制时的误差。
有两个原因:
一个是 2D 视图绘制的形状是反着的,所以我们要旋转 180 度,然后把位置设置相反数,这样就反过来了。
另一个之前绘制地板没有把墙的厚度考虑进度,我们调整了下地板的点,还有绘制的起始位置就好了。
2D 视图的问题修复了,下节继续加上门窗、尺寸的绘制。