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) ポイントに対して相対的に移動されます。これまでのところ、どちらが正しい方法なのかわかりません。上記の関数のように、始点/終点を使用して位置を再計算します。
誰かが私を正しい解決策に導くことができれば、私はそれを高く評価します:)