样条线与Three.js中的“挤出几何体”不匹配

spline not match ExtrudeGeometry in Three.js

本文关键字：几何体 挤出几何体 不匹配 Three js 中的 样条      更新时间：2023-09-26

我创建了一个闭合的样条曲线，并用矩形挤出几何体，为我的游戏创建一个轨迹。我使用样条曲线来计算我的船的位置，但当我检查时，样条曲线与几何图形不完全匹配。有什么问题吗？

用于挤出示例的形状

挤出几何体和样条曲线与不匹配

这是我的代码：

var genTrack = function (lanes, controlPoints, material, isClose) {
//extrude setting
var extrudeSettings = {
    bevelEnabled: true,
    bevelSegments: 2,
    steps: 200,
    material: 1,
    extrudeMaterial: 1
};
//track shape
var trackShape = new THREE.Shape([
    new THREE.Vector2(-config.laneHeight/2, config.laneWidth/2),
    new THREE.Vector2(-config.laneHeight/2, - config.laneWidth/2),
    new THREE.Vector2(config.laneHeight/2, - config.laneWidth/2),
    new THREE.Vector2(config.laneHeight/2, config.laneWidth/2),
]);
//spline
if (isClose)
    var spline = new THREE.ClosedSplineCurve3(controlPoints);
else
    var spline = new THREE.SplineCurve3(controlPoints);
utils.public('spline', spline);
//set path
extrudeSettings.extrudePath = spline;
//frenet
var frenet = new THREE.TubeGeometry.FrenetFrames(spline, 200, false)
extrudeSettings.frames = frenet;
utils.public('extrudeSettings', extrudeSettings);
//create geometry
var geometry = new THREE.ExtrudeGeometry(trackShape, extrudeSettings);
var splineGeo = new THREE.TubeGeometry(spline, 200, 1, 4, true, false);
utils.public('frenet', frenet);
var angle = 0;
var track = new THREE.Object3D();
track.matrixAutoUpdate = false;
track.receiveShadow = true;
for (var i=0; i< lanes; i++){
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(i * (config.laneSpan + config.laneWidth), -30, 0);
    //mesh.rotation.set(0, 0,angle);
    //angle += Math.PI/180 * 20;
    track.add(mesh);
}
track.scale.set(1.5, 1.5, 1.5);
var splineMesh = new THREE.Mesh(splineGeo, new THREE.MeshBasicMaterial({color: 0xffffff}));
return {
    'geometry': geometry,
    'mesh': track,
    'spline': spline,
    'frenet': frenet,
    'splineMesh': splineMesh,
    'controlPoints' : controlPoints
};
}

我相信你的问题出在这行：

mesh.position.set(i * (config.laneSpan + config.laneWidth), -30, 0);

我想你想要的更像是：

mesh.position.set(i * config.laneWidth / lanes, config.laneHeight / 2, 0);

我还没有测试过，但我想你需要这样的东西。

相关文章：