关于Z轴位置和物体大小的问题。
本来刚开始进入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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论