0

使用three.js,给定两点,我正在生成一个3D形状。

 function shapeMesh(pointX, pointY) {

    var extrudeSettings = {steps:2};

    //create base shape
    var pts = []

    //I beam shape
    var f = 100;
    var w = 100 / f;
    var h = 150 / f;
    var tf = 10 / f;
    var tw = 10 / f;

    pts.push(new THREE.Vector2(tw, 0));
    pts.push(new THREE.Vector2(tw, h - tf));
    pts.push(new THREE.Vector2(w, h - tf));
    pts.push(new THREE.Vector2(w, h));
    pts.push(new THREE.Vector2(0, h));
    pts.push(new THREE.Vector2(-w, h));
    pts.push(new THREE.Vector2(-w, h - tf));
    pts.push(new THREE.Vector2(-tw, h - tf));
    pts.push(new THREE.Vector2(-tw, 0));

    pts.push(new THREE.Vector2(tw, -h + tf));
    pts.push(new THREE.Vector2(w, -h + tf));
    pts.push(new THREE.Vector2(w, -h));
    pts.push(new THREE.Vector2(0, -h));
    pts.push(new THREE.Vector2(-w, -h));
    pts.push(new THREE.Vector2(-w, -h + tf));
    pts.push(new THREE.Vector2(-tw, -h + tf));

    var starShape = new THREE.Shape(pts);

    //create target point/spline
    var randomPoints = [];
    randomPoints.push(pointX);
    randomPoints.push(pointY);

    var randomSpline = new THREE.SplineCurve3(randomPoints);
    extrudeSettings.extrudePath = randomSpline;

    var circle3d = starShape.extrude(extrudeSettings);
    return addGeometry(circle3d, 0xff1111, 0, 0, 0, 0, 0, 0, 1);
}

addGeometry 函数如下:

    function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
    // 3d shape
    var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [ new THREE.MeshLambertMaterial({ color:color, opacity:0.2, transparent:true }), new THREE.MeshBasicMaterial({ color:0x000000, wireframe:true, opacity:0.3 }) ]);

    mesh.position.set(x, y, z);
    mesh.scale.set(s, s, s);

    return mesh;
}

一切正常,看起来很可爱,但是当我尝试更新它的位置时,使用.setPosition(x,y,z)整个对象相对于 (x,y,z) 点移动,到目前为止我无法弄清楚哪种方法是正确的使用上述函数中的起点/终点重新计算位置。

如果有人能引导我找到正确的解决方案,我将不胜感激:)

4

0 回答 0