three.js 3d中获取鼠标经过地点的新建元素

My_Oh_My 发布于2019-08-23 17:13 / 947人阅读

摘要：获取鼠标经过地点的元素获取鼠标经过地点的元素鼠标滑过小球市时触发的事件隐藏不可选

获取鼠标经过地点的元素
// 获取鼠标经过地点的元素

intersectObjects(pointer,camera,obj) {
    var domElement = viewer.impl.canvas;
    var pointerVector = new THREE.Vector3();
    var pointerDir = new THREE.Vector3();
    var ray = new THREE.Raycaster();
    var rect = domElement.getBoundingClientRect();
    var x = ( ( pointer.clientX - rect.left ) / rect.width ) * 2 - 1;
    var y = - ( ( pointer.clientY - rect.top ) / rect.height ) * 2 + 1;
    if (camera.isPerspective) {
        pointerVector.set(x, y, 0.5);
        pointerVector.unproject(camera);
        ray.set(camera.position, pointerVector.sub(camera.position).normalize());
    } else {
        pointerVector.set(x, y, -1);
        pointerVector.unproject(camera);
        pointerDir.set(0, 0, -1);
        ray.set(pointerVector, pointerDir.transformDirection(camera.matrixWorld));
    }

    var intersections = ray.intersectObjects( obj, true );
    return intersections[0] ? intersections[0] : false;
}


// 鼠标滑过小球市时触发的事件
hoverIntersectObjects(event){
    var flag =true;
    var pointer = event.pointers ? event.pointers[ 0 ] : event;
    var camera = viewer.getCamera();
    var objects = viewer.impl.overlayScenes.lable.scene.children;
    var obj = viewer.vmethods.intersectObjects(pointer,camera,objects).object;
    if(obj){
        //隐藏不可选
        if(!obj.visible)return;
        if(this.oldObj) this.oldObj.material.color.setHex( this.oldObj.currentHex );
        this.oldObj=obj;
        this.oldObj.currentHex = obj.material.color.getHex();
        this.oldObj.material.color.setHex( 0x660000);
        viewer.impl.invalidate(false, false, true);
        var pos=viewer.worldToClient(this.oldObj.position);
        var posX=pos.x-$(".k-tooltip").width()/2;
        var posY=pos.y-$(".k-tooltip").height()-20;
        $(".k-tooltip").css({"left":posX,"top":posY});
        $(".k-tooltip").show();
        $(".k-tooltip .name").text(this.oldObj.name);
    }else{
        if(this.oldObj) {
            this.oldObj.material.color.setHex( this.oldObj.currentHex );
            viewer.impl.invalidate(false, false, true)
            $(".k-tooltip").hide();

        }

    }
}

GPU云服务器云服务器鼠标经过特效 html鼠标经过变手 html鼠标经过换图 js中获取元素位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103992.html

3D全景漫游

摘要：可选，默认值为，设置为则禁止用户和全景图交互导航条不可用。可选，默认值为，全景图在毫秒后会自动进行动画。当全景图准备就绪并且第一张图片显示时的回调函数。 3D全景漫游 showImg(http://mmbiz.qpic.cn/mmbiz/cibketMByvrbpDqUQ9LiaBvutnwMehicnO2RZurdl96FLtwqlf6LjWS0Bv8ApQY0YjHdtyFWuzz...

DesGemini 2019-08-19 18:26 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
看完这篇，你也可以实现一个360度全景插件

摘要：两种相机的区别目前提供了几种不同的相机，最常用的，也是下面插件中使用的两种相机是透视相机正交投影相机。上面的图很清楚的解释了两种相机的区别右侧是正交投影相机他不具有透视效果，即物体的大小不受远近距离的影响，对应的是投影中的正交投影。导读本文从绘图基础开始讲起，详细介绍了如何使用Three.js开发一个功能齐全的全景插件。我们先来看一下插件的效果： showImg(https://user...

Michael_Lin 2019-05-23 16:25 评论0 收藏0