楔子

在很多应用中，特别是一些园区类的应用。 都需要对园区的地面 环境进行展示，路面就是地面的一部分。

通常的做法是，都是建模的时候把相关的元素都建好，然后导入到展示系统中进行展示。

不过有些情况下，可能建模并不太方便，所以三维编辑器可以直接进行简单的路面编辑显得挺有必要。

路面对象扩展

简单的路面希望能够通过一个路径来生成。 我们知道在threejs中有通过路径生成管路的对象，参考文章 WebGL管网展示(及TubeGeometry优化) 管路的横截面是一个圆形。 道路的横截面期望是一个矩形，因此，我们可以仿照管路的思路制作一个类似的对象PathRectGeometry，只是计算顶点的时候，横截面不再使用圆形，而是使用一个矩形，代码如下：

let points = [new Vec3(-width/2,-height/2,0),new Vec3(-width/2,height/2,0),
new Vec3(width/2,height/2,0),new Vec3(width/2,-height/2,0)]
if(!scope.clockwise) {
points = [new Vec3(-width/2,-height/2,0),new Vec3(width/2,-height/2,0),
new Vec3(width/2,height/2,0),new Vec3(-width/2,height/2,0)];
}
for( let j = 0;j <= points.length;j ++) {
let jj = j == points.length ? 0 : j;
let point = points[jj];
let radius = Math.hypot(point.x,point.y);
const sin = point.y / radius;
const cos = point.x / radius;
normal.x = ( cos * N.x + sin * B.x );
normal.y = ( cos * N.y + sin * B.y );
normal.z = ( cos * N.z + sin * B.z );
normal.normalize();
normals.push( 0,1,0 );
// vertex
vertex.x = P.x + radius * normal.x;
vertex.y = P.y + radius * normal.y;
vertex.z = P.z + radius * normal.z;
vertices.push( vertex.x, vertex.y, vertex.z );
}


通过PathRectGeometry创建对象的效果如下图所示：

wrapT: dt.RepeatWrapping,
wrapS: dt.RepeatWrapping,
});
texture.repeat.set(1 / 100, 1 / 100);
texture.anisotropy = 16;
let m1 = new dt.BasicMaterial({
// flatShading:true,
map: texture,
// envMap:envMap,
// reflectivity:0.4,
color: 0xffffff,
toneMapped: false,
});
var geometry = new dt.ExtrudeGeometry(simpleShapes, {
depth: 1,
bevelEnabled: false,
vertical: true,
});
var mesh = new dt.Mesh(geometry, m1);
window.graph.getDataManager().add(mesh);
road1.add(mesh);
}

如下图所示：

结语

本文所示只是一个demo级别得尝试，如果要做一个强度得路面编辑器系统，可能要考虑得还有很多，比如多车道效果，更重得衔接形状等等。这在后续得产品中会持续强化相关功能。

如果你有好的思路，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。