使用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) 点移动,到目前为止我无法弄清楚哪种方法是正确的使用上述函数中的起点/终点重新计算位置。
如果有人能引导我找到正确的解决方案,我将不胜感激:)