Javascript 如何在threejs中移动形状并随后编辑顶点

提前感谢您的帮助！！我已经堕落了，因为我在睡觉时遇到了一个问题，就是用鼠标用三个形状创建的形状。形状，如果形状在画布的中心，我在绘制形状和编辑形状方面没有问题（似乎是局部坐标问题） 这就是它的工作原理。这一点是从三个人身上得到的。雷卡斯特

//Point is the vector3 returned by the Raycaster
ld.ui = 1;
const shapeVisible = new THREE.Shape();
shapeVisible.moveTo( point.x, point.y, ld.ui );
shapeVisible.lineTo( point.x, point.y, ld.ui );
const area = new THREE.ShapeGeometry(handle.shapeVisible);


//This is to move a the vertex
area.geometry.attributes.position.setXYZ( 0, point.x, point.y, ld.ui );
area.geometry.verticesNeedUpdate = true;

到目前为止，只要形状位于中心，一切都会正常工作，形状离中心越远，顶点位置的偏移就越大，我尝试这样移动它时也是如此：

//again pos is returned by the Raycaster, so it's should be moving it to the mouse position.
area.position.y = pos.y;
area.position.x = pos.x;

现在的问题是，一旦我移动了形状，它就会跳跃，就像它的原点在另一个地方一样，当再次尝试编辑顶点时，它会发生极大的位移

这里有一个简单的小提琴来演示这个问题： 您可以在这里看到，无论何时尝试移动绿色框，它都会跳到鼠标位置，但鼠标左下角不是对象的中心。

const canvas=document.querySelector（'test'）；
const cons=document.querySelector（“#console”）
const mouse=new THREE.Vector2（）；
const raycaster=new THREE.raycaster（）；
const renderer=new THREE.WebGLRenderer({
画布：画布，
阿尔法：是的，
反别名：对
});
const-camera=新的三视角摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
renderer.setSize（window.innerWidth、window.innerHeight）；
摄像机位置z=5；
const scene=new THREE.scene（）；
常数几何=新的三个平面几何（20,20）；
常量材质=新的三网格基本材质({
颜色：0x333333
});
const背板=新的三个网格（几何形状、材料）；
常数amblight=新的三个环境光（0xffffff）；
场景。添加（amblight）；
场景.添加（背板）；
//绘制形状，通常通过鼠标位置完成
const shape=new THREE.shape（）；
形状。移动到（1，1，1）；
形状.lineTo（1,0,1）；
shape.lineTo（0,0,1）；
形状.lineTo（0,1,1）；
形状.lineTo（1,1,1）；
const shapeGeo=新的三个。形状测量（形状）；
const shapeMat=新的三网格基本材质({
颜色：0x33ff33
});
const shapeMesh=新的三点网格（shapeGeo，shapeMat）
场景。添加（shapeMesh）；
渲染器。渲染（场景、摄影机）；
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
制作动画（）
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数mouseController（事件，类型）{
event.preventDefault（）；
mouse.x=（event.layerX/canvas.width）*2-1；
mouse.y=-（event.layerY/canvas.height）*2+1；
raycaster.setFromCamera（mouse.clone（），camera）；
设pos=raycaster.intersectObject（shapeMesh，true）；
//控制台日志（pos）
如果（位置[0]）{
开关（类型）{
案例“mousedown”：
cons.innerHTML+=“点击！”；
shapeMesh.position.x=位置[0]。点.x；
shapeMesh.position.y=位置[0]。点.y；
打破
}
}
}
addEventListener（'resize'，onWindowResize，false）；
canvas.addEventListener（'mousedown'，（e）=>{
鼠标控制器（e，‘鼠标向下’）
}，假）
正文{
保证金：0；
身高：100%；
宽度：100%；
溢出：隐藏；
}
帆布{
位置：相对位置；
宽度：100%；
身高：100%；
}
#控制台{
位置：绝对位置；
排名：0；
左：0；
背景:#666；
高度：15px；
宽度：200px；
z指数：99；
字体系列：无衬线；
颜色：白色；
字体大小：9px；
填充物：5px；
}
您看到的小故障是由于您在左下角制作的形状的原点中心

当您用鼠标单击时，形状的左下角（它的原点中心）位于光标单击的位置

如果将形状的原点中心移动到其“实际”中心，当您用鼠标单击时，形状的中心将定位在鼠标指针处

有很多方法可以做到这一点，在本例中，我使用了以下代码：

var center = new THREE.Vector3();
mesh.geometry.computeBoundingBox();
mesh.geometry.boundingBox.getCenter(center);
mesh.geometry.center();
mesh.position.copy(center);

从这篇帖子中-（再次感谢@prisoner849！）

这是一段形状原点偏移的代码-
你能放下小提琴让我们看看出了什么问题吗？嗨！我在帖子的底部添加了一个提琴我添加了提琴只是为了进一步说明这一点，但问题中的代码是代码的相关部分。无论如何，我会添加到问题中，没问题，如果我这样做，你能帮我吗@gman？我认为你需要把正方形的原点移到中心，这样当你的鼠标点击该区域时，它就会从中心定位。我添加了Axes，以便您可以看到原始问题-这是否更接近您期望的结果-Ohhhh它很简单，但我还没有找到解决方案，谢谢@danlong，如果您可以将其作为答案，我会将其标记为已解决！再次感谢！！！非常感谢@danlong！