-2
我試圖讓3D線圖的工作... Here鼠標懸停時不與不同3dObjects
的點和線的工作不錯,但我想監聽點(球)鼠標懸停時不僅沒有上線或網格或其他網格對象...
對我有單獨的3D對象和包裝器他們都在不同的3D對象.. 即 網格物體都格 點對象都點 線 - 對象有所有行..
lineContainer = new THREE.Object3D();
d3.select(lineContainer)
.selectAll()
.data(currentVal)
.enter().append(
function (d, i) {
var LineMaterial = new THREE.LineBasicMaterial({color: d.color});
var PI2 = Math.PI * 2;
var geometry = new THREE.Geometry();
var k = -10;
d.points.forEach(function(p){
var _x = x1(p.id);
var _y = y1(p.y);
var _z = (i+1)*10;
geometry.vertices.push(new THREE.Vector3(_x,_y,_z));
});
// for (var j = 0; j < 30; j++) {
// var _point = new THREE.SphereGeometry(0.8);
// var _pointmaterial = new THREE.MeshBasicMaterial({color: _color(i)});
// var sphere = new THREE.Mesh(_point, _pointmaterial);
// sphere.position.set(_x,_y,_z);
// parentTransform.add(sphere);
// };
var line = new THREE.Line(geometry, LineMaterial);
line.userdata = d.id;
line.material.linewidth = 2;
return line;
}
);
mainContainer.add(lineContainer);
pointsContainer = new THREE.Object3D();
d3.select(pointsContainer)
.selectAll()
.data(_allPoints)
.enter().append(
function (d, i) {
var _x = x1(d.id);
var _y = y1(d.y);
var _z = d.z*10;
var _point = new THREE.SphereGeometry(1.8);
var _pointmaterial = new THREE.MeshBasicMaterial({color: d.color});
var sphere = new THREE.Mesh(_point, _pointmaterial);
// sphere.classes = "points";
sphere.position.set(_x,_y,_z);
sphere.userdata = d;
var _toolTipValue = ""+d.id+"("+d.line+")";
var spritey = makeTextSprite(_toolTipValue, { fontsize: 14});
spritey.position.set(_x-5,_y+8,_z);
spritey.visible = false;
d.bindedTip = spritey;
tooltipContainer.add(spritey);
return sphere;
});
mainContainer.add(pointsContainer);
scene.add(mainContainer);
function render() {
if(!tooltipShow){
// find intersections
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
// vector.unproject(camera)
projector.unprojectVector(vector, camera);
raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
// raycaster.setFromCamera(mouse, camera);
//lineintersect
// var intersects = raycaster.intersectObjects(lineContainer.children, true);
var pointIntersects = raycaster.intersectObjects(pointsContainer.children, true);
// console.log(pointIntersects);
if (pointIntersects.length > 0) {
console.log(pointIntersects)
if (currentPointIntersected !== undefined) {
}
if(currentPointIntersected != pointIntersects[ 0 ].object){
currentPointIntersected = pointIntersects[ 0 ].object;
console.log(currentIntersected);
_allPoints.forEach(function(e,i){
if(e.id && e.bindedTip){
if(e.id == currentPointIntersected.userdata.id){
e.bindedTip.visible = true;
e.bindedTip.getTexture().needsUpdate = true;
e.isHover = true;
}else{
e.bindedTip.visible = false;
e.bindedTip.getTexture().needsUpdate = true;
e.isHover = false;
}
}
});
}
} else {
if (currentPointIntersected !== undefined) {
currentPointIntersected.material.linewidth = 1;
}
currentPointIntersected = undefined;
}
}
renderer.render(scene, camera);
stats.update();
}
我有使用上THREEjs相同的代碼和相同的版本從here
但只能聽上級點不是在Z軸後方的點....
我怎麼能可以管理。 ..
相關的代碼添加到這個問題。鏈接可能會打破 – Soana
它是第一個鏈接中的大代碼,您可以獲取代碼,但嘗試顯示代碼 –
您要在哪裏添加懸停行爲? – Soana