0

three.js を使用して、2 つのポイントを指定して、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