3ノードr86(最新マスターバージョン)を使用して巨大なグラフの視覚化を試みていますが、600,000ノードを表示しています。THREE.pointsでメッシュを使用するよりも速く描画する方法を見つけましたが、それらのドラッグ可能な、多くの検索の後、マウスポイントに最も近いオブジェクトを発見するためにレイキャストを見つけましたが、すべてのタートポイントは単なるオブジェクトであり、別々に変更することができないので問題があります。 3jsポイントをドラッグする方法
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とすべての点を変更することができましたが、私は私たちがイベントを処理するのに役立つEventsControls.jsファイルを発見したが、私はここで