样条曲线与Three.js中的ExtrudeGeometry不匹配

时间:2013-07-19 16:07:35

标签: javascript three.js

我创建一个封闭的样条曲线并挤出具有矩形形状的几何体来为我的游戏创建一个轨道。我使用样条曲线来计算我的船的位置,但是当我检查时,样条曲线与几何图形完全不匹配。有什么不对吗?

shape used to extrude example

extrude geometry and spline not match

这是我的代码:

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
};
}

1 个答案:

答案 0 :(得分:0)

我相信你的问题在于这一行:

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

我认为你想要的更像是:

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

我没有测试过,但我认为你需要这样的东西。