Threejs drag points

Question

I have to generate a huge number of objects that I can drag individually. Also these objects are limited to a plane form (e.g. rect or circle). At first I worked with simple CircleGeometries, that are placed inside another geometrie (plane). Also dragging them is very easy but as expected the performance is very very poor for about 200000 of them. I then decided to use points /particleSystem. The positioning inside a plane works very well but I can't get it managed to make the individual points of the particle system draggable. I found the interactive particles example in the threejs documentation but still have no clou, how to combine them with dragcontrols. This is my code for creating the particle system and fill a plane with these points:

//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

Can anybody please help? Thanks

`THREE.DragControls()` intended to work with objects, not with the vertices of a geometry. You have to provide your own logics to manage the vertices, using information from examples. — prisoner849, Mar 16 '18 at 10:36

score 11 · Accepted Answer · answered Mar 17 '18 at 19:03

Just a rough example of how you can drag points:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1.25, 7, 7);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.PlaneBufferGeometry(10, 10, 10, 10);
geometry.rotateX(-Math.PI * 0.5);

var plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
  wireframe: true,
  color: "red"
}));
scene.add(plane);

var points = new THREE.Points(geometry, new THREE.PointsMaterial({
  size: 0.25,
  color: "yellow"
}));
scene.add(points);

var raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 0.25;
var mouse = new THREE.Vector2();
var intersects = null;
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var currentIndex = null;
var planePoint = new THREE.Vector3();
var dragging = false;

window.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mousemove", mouseMove, false);
window.addEventListener("mouseup", mouseUp, false);

function mouseDown(event) {
  setRaycaster(event);
  getIndex();
  dragging = true;
}

function mouseMove(event) {
  if (dragging && currentIndex !== null) {
    setRaycaster(event);
    raycaster.ray.intersectPlane(plane, planePoint);
    geometry.attributes.position.setXYZ(currentIndex, planePoint.x, planePoint.y, planePoint.z);
    geometry.attributes.position.needsUpdate = true;
  }
}

function mouseUp(event) {
  dragging = false;
  currentIndex = null;
}

function getIndex() {
  intersects = raycaster.intersectObject(points);
  if (intersects.length === 0) {
    currentIndex = null;
    return;
  }
  currentIndex = intersects[0].index;
  setPlane(intersects[0].point);
}

function setPlane(point) {
  planeNormal.subVectors(camera.position, point).normalize();
  plane.setFromNormalAndCoplanarPoint(planeNormal, point);
}

function setRaycaster(event) {
  getMouse(event);
  raycaster.setFromCamera(mouse, camera);
}

function getMouse(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>

Hi, thank you for your answer and example. I just had to adapt the threshold to my point size and change the getMouse function to this, in order to get the right coordinates within my container(otherwise the cursor has an offset to my point. However, this is only the case on my page, because of other elements: `function getMouse(event) { 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; }` — HS_hendrix, Mar 19 '18 at 10:52

Threejs drag points

1 Answers1

Linked