Threejs拖点

Question

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

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

有人可以帮忙吗？谢谢

Answer 1

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

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>

Threejs拖点

Threejs drag points

javascript

particle-system

three.js