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).
- 方案1,
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);