我想用threejs r86(最新的主版本)巨大的图形可视化,用于显示600,000个节点,我发现一种方法来绘制它们比使用THREE.points网格更快,但知道我需要他们可拖动,经过多次搜索后,我发现光线投射找到最接近鼠标点的对象,但我有一个问题,因为所有的点都只是一个对象,不能单独更改。如何拖动Threejs点
function Graph3(Nodes, Edges) {
this.renderer = new THREE.WebGLRenderer({ alpha: true});
var width = window.innerWidth , height = window.innerHeight;
this.renderer.setSize(width, height, false);
document.body.appendChild(this.renderer.domElement);
this.scene = new THREE.Scene(),
this.camera = new THREE.PerspectiveCamera(100, width/height, 0.1, 3000),
this.controls = new THREE.OrbitControls(this.camera);
this.controls.enableKeys = true;
this.controls.enableRotate = false;
var material, geometry;
self = this;
material = new THREE.LineBasicMaterial({color: '#ccc'});
geometry = new THREE.Geometry();
geometry.vertices = Nodes.map(function(item){return new THREE.Vector3(item.pos.x,item.pos.y,item.pos.z);});
// this.vertices = geometry.vertices;
this.line = new THREE.LineSegments(geometry, material);
this.scene.add(this.line);
var Node = new THREE.Group();
material = new THREE.PointsMaterial({ color:0x000060 ,size:1 });
this.particles = new THREE.Mesh(geometry,material)
this.particles = new THREE.Points(geometry, material);
this.scene.add(this.particles);
dragControls = new THREE.DragControls([this.particles], this.camera/*,this.scene*/, this.renderer.domElement);
this.camera.position.z = 200;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
document.addEventListener('click', function (event) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = (event.clientX/window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY/window.innerHeight) * 2 + 1;
console.log(mouse);
}, false);
stats = new Stats();
document.body.appendChild(stats.dom);
this.animate = function()
{
raycaster.setFromCamera(mouse, self.camera);
var intersections = raycaster.intersectObject(self.particles);
intersection = (intersections.length) > 0 ? intersections[ 0 ] : null;
if (intersection !== null) {
console.log(intersection);
}
requestAnimationFrame(self.animate);
stats.update();
self.renderer.render(self.scene, self.camera);
}
this.animate();}
我能够改变所有的点与dragControls但不能seperatly移动它们 我已经找到EventsControls.js文件,它帮助我们处理事件,但我不能用它