共计 3655 个字符,预计需要花费 10 分钟才能阅读完成。
楔子
在很多利用中,特地是一些园区类的利用。都须要对园区的高空 环境进行展现,路面就是高空的一部分。
通常的做法是,都是建模的时候把相干的元素都建好,而后导入到展现零碎中进行展现。
不过有些状况下,可能建模并不太不便,所以三维编辑器能够间接进行简略的路面编辑显得挺有必要。
路面对象扩大
简略的路面心愿可能通过一个门路来生成。咱们晓得在 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 创建对象的成果如下图所示:
路面编辑
通过在立体下面打点来构建直线和贝塞尔曲线,而后通过构建得线条了生成门路,通过门路就能够生成路面成果,
graph.getView().addEventListener("click", (event) => {let now = new Date().getTime();
if (t != 0 && now - t < 500) {return;}
t = now;
if (path) {let pos = graph.getPositionOnPlaneByEvent(event, plane);
constraintsHorizontalOrVertical(path, pos);
path.lineTo(pos.x, pos.y, pos.z);
tempPath = path.clone(tempPath);
tempRoad.geometry.path = tempPath;
}
})
大略得过程如下所示:
在生成得门路上,会有很多控制点,拖动控制点能够二次批改门路:
生成连接处
两条路得连接处会有斑马线之类得,点击生成斑马线,能够通过算法主动计算斑马线,
// 找到 road1 到 road2 的 joint
function createJointShape(road1, road2) {
let path = road1.geometry.path;
let path2 = road2.geometry.path;
let lastPoint = path.points.at(-1);
let lastCurve = path.curves.at(-1);
let curves = path2.curves;
console.log(curves);
let minCurve, minDist = Infinity,
minPoint
for (let i = 0; i < curves.length; i++) {let curve = curves[i];
if (curve.type == "LineCurve3") {
let {
dist,
point
} = findClosestPoint(lastPoint, curve.v1, curve.v2);
if (dist < minDist) {
minDist = dist;
minPoint = point;
minCurve = curve;
}
}
}
console.log(minCurve, minDist, minPoint);
let v1 = lastCurve.v1,
v2 = lastCurve.v2;
let tagent = new dt.Vec3().subVectors(v2, v1);
let up = new dt.Vec3(0, 1, 0);
let cross = new dt.Vec3().cross(up, tagent);
cross.normalize();
let halfRoadWidth = 50;
cross.multiplyScalar(halfRoadWidth);
let cross2 = cross.clone().multiplyScalar(3.0);
let p1 = lastPoint.clone().add(cross),
p2 = lastPoint.clone().sub(cross);
let sub = new dt.Vec3().subVectors(minPoint, lastPoint);
console.log(sub.length(), minDist, halfRoadWidth)
sub.setLength(minDist - halfRoadWidth);
let joinPoint = new dt.Vec3().addVectors(lastPoint, sub);
let halfSub = sub.clone().multiplyScalar(0.75);
let p3Center = p1.clone().add(halfSub);
let p4Center = p2.clone().add(halfSub);
let p3 = joinPoint.clone().add(cross2);
let p4 = joinPoint.clone().sub(cross2)
let newPath = new dt.ShapePath();
newPath.moveTo(p2.x, p2.z);
newPath.quadraticCurveTo(p4Center.x, p4Center.z, p4.x, p4.z);
newPath.lineTo(p3.x, p3.z);
newPath.quadraticCurveTo(p3Center.x, p3Center.z, p1.x, p1.z);
// newPath.closePath();
// let geo = new dt.PathTubeGeometry(newPath, 64, 2);
// let tube = new dt.Mesh(geo);
let shapePath = newPath;
const simpleShapes = shapePath.toShapes(true);
var texture = graph.loadTexture("./road/001.jpg", {
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 彪叔”能够增加作者微信进行交换,及时收到更多有价值的文章。
正文完