如何投影(或粘贴)全景图进行建模?

时间:2018-07-31 03:34:38

标签: three.js webgl uv-mapping

在提问之前,我在很多地方都找到了类似的想法,但没有解决方案。我的问题还可以描述为如何重新计算模型的uv值,以修复为六个人脸天空盒设计的全景图。

最近,我想到了一种独特的方法,可以在物质港的官方网络https://matterport.com/gallery/

上获得流畅的3D漫游体验。

我只想知道他们是怎么做到的?当将全景照片切成薄片时,他们的产品非常流畅。

我多次漫游后,发现了秘密。我意识到他们使用的全景载体不是盒子或球体,而是它们首先显示的对象!证据是,当切换点时,椅子和桌子等对象会有自己的阴影(一个椅子有两个图像)站起来,另一个躺在地板上

enter image description here

将全景图中的对象粘贴到自己的对应对象上,并使用深度信息使漫游开关变得更流畅(至于为什么他们不直接使用该对象,我认为由于硬件有限,许多不规则的面孔来自扫描设备不能直接使用

enter image description here

我想在我的项目中使用这个想法,我有一组六个全景图,可以完美地粘贴到boxGeometry上,我只想将它们粘贴到模型上。但是我卡在了360度的项目中。找到如何投射一个方向,但我无法投射其余五个方向。

var _p=BufferGeometry.attributes;
for (var i = 0; i < _p.position.count; i++){
    var uvtempbeforeconvert= ( new THREE.Vector3(_p.position.array[3*i],_p.position.array[3*i+1],_p.position.array[3*i+2]) ).clone().applyMatrix4(houseObject.matrixWorld).project(camera1)
//use the worldvertices to get its screen coordinate            
    if(uvtempbeforeconvert.x<1&&uvtempbeforeconvert.x>-1 && uvtempbeforeconvert.y<1 &&uvtempbeforeconvert.y>-1)      {
VerticesArray1.push(_p.position.array[3*i],_p.position.array[3*i+1],_p.position.array[3*i+2]);uvArray1.push(uvtempbeforeconvert.x*0.5+0.5,uvtempbeforeconvert.y*0.5+0.5);

是的,我成功地计算了一个方向。但是我不能处理又占据了两个视图的视锥面的三角形面,就像盒子边缘的面一样。

我应该如何处理此问题?或者我先沿 FALSE 方向运行 ?我应朝哪个方向运行?

1 个答案:

答案 0 :(得分:0)

问了很多人之后,我发现我需要在threejs中使用shadermaterial,并使用一个名为cubetexture,samplercube的函数。这样我就可以得到所需的像素颜色!