Three.js拖拽操作，制作生长线效果

Three.js拖拽操作，制作生长线效果

效果：

思路：
1，创建场景相机渲染器灯光等等搭建基础场景。
2，做两个模型/加载两个模型，渲染到画面上。
3，做拖拽。引入DragControls控制器，按照API传值。注意这里有个坑：

• DragControls默认会选择点击的那个mesh拖拽，就是说，如果你是导入的外部模型，这个模型有多 个mesh，那你只能拖拽其中一个mesh，没办法直接拖拽整个模型。
  解决：
  • 方案1，
    拖拽时递归到最外层mesh，
  • 方案2，
    模型加载完，遍历它所有mesh，然后给每个mesh添加一个属性或者userdata，指向你想拖拽的那层mesh
    把DragControls拿出来，修改它的方法。找到它PointerDown方法，会发现里边拖拽的intersections[ 0 ]。将它改为拖拽intersections[ 0 ].object.你自定义的属性（指向想拖拽的那层mesh）.

4，模型间画连接线。已知两个模型的坐标，两点间画一条线有很多种方法。这里我们用BufferGeometry来做。

• geometry = new THREE.BufferGeometry();
• curve = new THREE.CatmullRomCurve3([mesh.position,mesh2.position ]);
• points = curve.getSpacedPoints(100);
• geometry.setFromPoints(points);
• LineBasicMaterial
• new THREE.Line(geometry, material);

5,最后，拖拽的时候修改连线，setFromPoints。

• const curve = new THREE.CatmullRomCurve3([mesh.position,mesh2.position]);
• const points = curve.getSpacedPoints(100);
• lineMod.geometry.setFromPoints(points);