2015-06-22 102 views
-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轴后方的点....

我怎么能可以管理。 ..

+0

相关的代码添加到这个问题。链接可能会打破 – Soana

+0

它是第一个链接中的大代码,您可以获取代码,但尝试显示代码 –

+0

您要在哪里添加悬停行为? – Soana

回答

0

我添加新的场景和渲染...和顶部的场景结合小鼠呈现两个场景..和所有其他元素在另一个场景..