資訊專欄INFORMATION COLUMN
摘要：獲取鼠標經過地點的元素獲取鼠標經過地點的元素鼠標滑過小球市時觸發的事件隱藏不可選
獲取鼠標經過地點的元素
// 獲取鼠標經過地點的元素
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();
}
}
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103992.html
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...
摘要：兩種相機的區別目前提供了幾種不同的相機，最常用的，也是下面插件中使用的兩種相機是透視相機正交投影相機。上面的圖很清楚的解釋了兩種相機的區別右側是正交投影相機他不具有透視效果，即物體的大小不受遠近距離的影響，對應的是投影中的正交投影。導讀 本文從繪圖基礎開始講起，詳細介紹了如何使用Three.js開發一個功能齊全的全景插件。 我們先來看一下插件的效果： showImg(https://user...
閱讀 854·2021-11-19 11:29
閱讀 3349·2021-09-26 10:15
閱讀 2855·2021-09-22 10:02
閱讀 2433·2021-09-02 15:15
閱讀 1970·2019-08-30 15:56
閱讀 2408·2019-08-30 15:54
閱讀 2903·2019-08-29 16:59
閱讀 635·2019-08-29 16:20
