Javascript 三个拖曳点

我必须生成大量可以单独拖动的对象。此外，这些对象仅限于平面形式，例如矩形或圆形。 起初，我使用简单的圆几何，它们被放置在另一个几何平面内。拖动它们也很容易，但正如预期的那样，对于其中约200000个来说，性能非常差。 然后我决定使用points/particleSystem。平面内的定位效果很好，但我无法使粒子系统的各个点都可以拖动。我在threejs文档中找到了交互式粒子示例，但仍然没有clou，即如何将它们与DragControl组合。 这是我创建粒子系统并用以下点填充平面的代码：

//Create a plane geometrie, that is later filled with points
var geometry2 = new THREE.CircleGeometry(30,32);
var material2 = new THREE.MeshBasicMaterial( {color: 0x666666, side: THREE.DoubleSide, wireframe:true} );
var mat1 = new THREE.MeshBasicMaterial( {color: 0x00ff00, wireframe:false} );
var plane1 = new THREE.Mesh(geometry2, material2);
geometries.push(plane1);    //push to object for draggable elements
scene.add(plane1);        

var positionsX;

       positionsX = inGeometry.inGeometry(plane1.geometry,  200000); // get positions for points inside plane1

      var geometry = new THREE.Geometry();
      for (var i = 0; i < positionsX.length; i++) {
                geometry.vertices.push(positionsX[i]);  //add positions to vertices

      }
      console.log(geometry);

      //Create Particle system
      var material = new THREE.PointsMaterial({ size:0.02, color: 0xffffff });
      particleSystem = new THREE.Points(geometry, material);
      scene.add(particleSystem);
      console.log(particleSystem);


  var dragGeo = new DragControls(geometries, camera, container); //dragging

有人能帮忙吗？ 谢谢

这只是一个如何拖动点的粗略示例：

var场景=新的三个场景； var摄像机=新的三视角摄像机60，window.innerWidth/window.innerHeight，11000； camera.position.set1.25,7,7； camera.lookAtscene.position； var renderer=new THREE.WebGLRenderer{ 反别名：对 }; renderer.setSizewindow.innerWidth，window.innerHeight； document.body.appendChildrender.doElement； var geometry=新的3.5倍几何量10,10,10,10； geometry.rotateX-Math.PI*0.5； var平面=新的三点网格几何体，新的三点网格基本材质{ 线框：对， 颜色：红色 }; scene.addplane； var点=新三点几何，新三点材料{ 尺寸：0.25， 颜色：黄色 }; scene.addpoints； var raycaster=新的三个raycaster； raycaster.params.Points.threshold=0.25； var mouse=new THREE.Vector2； var相交=null； var平面=新的三个平面； var planeNormal=新的3.Vector3； var currentIndex=null； var planePoint=新的3.Vector3； var=false； window.addEventListenermousedown、mouseDown、false； window.addEventListenermousemove，mouseMove，false； window.addEventListenermouseup，mouseUp，false； 函数mouseDownevent{ Setraycaster事件； 获取索引； 拖动=真； } mousemovevent函数{ 如果拖动&¤tIndex！==null{ Setraycaster事件； raycaster.ray.intersectPlaneplane，planePoint； geometry.attributes.position.setXYZcurrentIndex，planePoint.x，planePoint.y，planePoint.z； geometry.attributes.position.needsUpdate=true； } } 函数mouseUpevent{ 拖动=假； currentIndex=null； } 函数getIndex{ 相交=光线投射器。相交对象点； 如果相交，则长度===0{ currentIndex=null； 回来 } currentIndex=相交[0]。索引； SetPlane与[0]相交。点； } 函数设定点{ 平面法线。次向量a。位置，点。规格化； plane.SetFromNormal和共面PointPlaneNormal，点； } 函数setRaycasterevent{ GetMouseeEvent； raycaster.setFromCameramouse，摄像机； } 函数getMouseevent{ mouse.x=event.clientX/window.innerWidth*2-1； mouse.y=-event.clientY/window.innerHeight*2+1； } 提供 函数渲染{ requestAnimationFramerender； renderer.renderscene，摄影机； } 身体{ 溢出：隐藏； 保证金：0； } 这只是一个如何拖动点的粗略示例：

var场景=新的三个场景； var摄像机=新的三视角摄像机60，window.innerWidth/window.innerHeight，11000； camera.position.set1.25,7,7； camera.lookAtscene.position； var renderer=new THREE.WebGLRenderer{ 反别名：对 }; renderer.setSizewindow.innerWidth，window.innerHeight； document.body.appendChildrender.doElement； var geometry=新的3.5倍几何量10,10,10,10； geometry.rotateX-Math.PI*0.5； var平面=新的三点网格几何体，新的三点网格基本材质{ 线框：对， 颜色：红色 }; scene.addplane； var点=新三点几何，新三点材料{ 尺寸：0.25， 颜色：黄色 }; scene.addpoints； var raycaster=新的三个raycaster； raycaster.params.Points.threshold=0.25； var mouse=new THREE.Vector2； var相交=null； var平面=新的三个平面； var planeNormal=新的3.Vector3； var currentIndex=null； var planePoint=新的3.Vector3； var=false； window.addEventListenermousedown、mouseDown、false； window.addEventListenermousemove，mouseMove，false； window.addEventListenermouseup，mouseUp，false； 函数mouseDownevent{ Setraycaster事件； 获取索引； 拖动=真； } mousemovevent函数{ 如果拖动&¤tIndex！==null{ Setraycaster事件； raycaster.ray.intersectPlaneplane，planePoint； geometry.attributes.position.setXYZcurrentIndex，planePoint.x，planePoint.y，planePoint.z； geometry.attributes.position.needsUpdate=true； } } 函数mouseUpevent{ 拖动=假； currentIndex=null； } 函数getIndex{ 相交=光线投射器。相交对象点； 如果相交，则长度===0{ currentIndex=null； 回来 } currentIndex=相交[0]。索引； SetPlane与[0]相交。点； } 函数设定点{ 平面法向量 amera.position，point.normalize； plane.SetFromNormal和共面PointPlaneNormal，点； } 函数setRaycasterevent{ GetMouseeEvent； raycaster.setFromCameramouse，摄像机； } 函数getMouseevent{ mouse.x=event.clientX/window.innerWidth*2-1； mouse.y=-event.clientY/window.innerHeight*2+1； } 提供 函数渲染{ requestAnimationFramerender； renderer.renderscene，摄影机； } 身体{ 溢出：隐藏； 保证金：0； }

---

3.DragControl用于处理对象，而不是几何体的顶点。您必须使用示例中的信息提供自己的逻辑来管理顶点。THREE.DragControl用于处理对象，而不是几何体的顶点。您必须使用示例中的信息提供自己的逻辑来管理顶点。您好，感谢您的回答和示例。我只需根据我的点大小调整阈值，并将getMouse函数更改为该值，以便在容器内获得正确的坐标，否则光标将偏移到我的点。但是，这只是我的页面上的情况，因为还有其他元素：函数getMouseevent{event.preventDefault；var rect=container.getBoundingClientRect；mouse.x=event.clientX-rect.left/rect.width*2-1；mouse.y=-event.clientY-rect.top/rect.height*2+1；}Hi，谢谢你的回答和例子。我只需根据我的点大小调整阈值，并将getMouse函数更改为该值，以便在容器内获得正确的坐标，否则光标将偏移到我的点。但是，这只是我的页面上的情况，因为还有其他元素：函数getMouseevent{event.preventDefault；var rect=container.getBoundingClientRect；mouse.x=event.clientX-rect.left/rect.width*2-1；mouse.y=-event.clientY-rect.top/rect.height*2+1；}