Question

我正在尝试制作3D折线图... Here

点和线工作正常，但我想听鼠标悬停在点（球体）上，而不是在线条或网格或其他网格对象上...

为此，我有单独的3d对象，并将它们全部包装在不同的3d对象中。即 grid-object拥有所有网格 points-object拥有所有积分 lines-object包含所有行..

 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();
        }

我在here的THREEjs上使用了相同的代码和相同的版本但只是听上层的点而不是z轴后面的点......

我怎样才能管理......

Answer 1

我添加了新场景并在渲染器中渲染了两个场景......并将鼠标绑定在顶部场景上..以及另一个场景中的所有其他元素..

鼠标悬停不使用不同的3dObjects

1 个答案: