关于Z轴位置和物体大小的问题。

发布于 2022-09-06 08:50:15 字数 2349 浏览 11 评论 0

本来刚开始进入webgl,是这样的。要做一个360全景和VR效果,并且上面可以打标签。
在全景模式下我把三维坐标转化成二维坐标一直刷新一直变化加入了标记点,标记点在body里面。

 refreshMarker:function(markes){// 刷新标记位置,并把三维左边转回二维坐标
                if(markes.length===0) return;
                markes.forEach((obj,i)=>{
                    var div = document.getElementById(obj.hotspostId+'_'+i);
                   
                    
                    if( div==null ){return;}
                    var vector = new THREE.Vector3(obj.position.x,obj.position.y,obj.position.z).project( this.camera );
                    var halfWidth = window.innerWidth / 2;
                    var halfHeight = window.innerHeight / 2;
                    var result = {
                        x: Math.round(vector.x * halfWidth + halfWidth),
                        y: Math.round(-vector.y * halfHeight + halfHeight)
                    };
                    // console.log(result)
                    div.style.left = (result.x-19) + 'px';
                    div.style.top = (result.y-19) + 'px';
                    // 超出屏幕隐藏 
                    if( Math.abs(vector.x)<=1 && Math.abs(vector.y)<=1 && Math.abs(vector.z)<=1 ){
                        div.style.visibility = 'visible';
                    }else{
                        div.style.visibility = 'hidden';
                    }
                });
            },

图片描述

但是在进入VR 模式后我必须把标记点加入场景中,当我按照坐标加进去时,Z轴太远文字和图片会看不见,我不知道该怎么去解决,或者我思路不对,一下是我用aframe的代码。

            addTextByaframe:function(data){

               var el = document.createElement('a-entity');
                
                    
                el.setAttribute('text-geometry', {value:data.name,font:'#optimerBoldFont',size:Math.abs( data.position.z)/40
                       })
                el.setAttribute('material', {color:'#fff'})
                el.setAttribute('position', {
                    x:data.position.x,
                    y:data.position.y,
                    z:data.position.y,
                })
                document.querySelector('a-scene').appendChild(el);
                                      
            },

我是想通过一个倍数关系去调试Z轴和物体大小关系,可是好像没什么效果。请高手指导指导,不甚感谢!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文