Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/363.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用threejs渲染360 x 235度FOV图像?_Javascript_Three.js_Texture Mapping - Fatal编程技术网

Javascript 如何使用threejs渲染360 x 235度FOV图像?

Javascript 如何使用threejs渲染360 x 235度FOV图像?,javascript,three.js,texture-mapping,Javascript,Three.js,Texture Mapping,我有一个摄像头,它可以拍摄圆形图像,声称可以代表235度的视野,比如: 我有一些使用threejs的经验,并使用它正确地渲染了360x360图像,这些图像存储为等矩形投影——web上有很多这样做的示例 但是我想使用threejs来渲染我的圆形图像,可能是球体内部的纹理。我已经看了一些例子,例如,这些例子似乎为我指明了正确的方向,但我认为我对threejs如何将各个部分组合在一起还不够了解 第二个是眼球似乎让我靠近了,但遵循眼球代码恰恰意味着我的图像显示了两次,我想这是有意义的,因为我的图像是方形

我有一个摄像头,它可以拍摄圆形图像,声称可以代表235度的视野,比如:

我有一些使用threejs的经验,并使用它正确地渲染了360x360图像,这些图像存储为等矩形投影——web上有很多这样做的示例

但是我想使用threejs来渲染我的圆形图像,可能是球体内部的纹理。我已经看了一些例子,例如,这些例子似乎为我指明了正确的方向,但我认为我对threejs如何将各个部分组合在一起还不够了解

第二个是眼球似乎让我靠近了,但遵循眼球代码恰恰意味着我的图像显示了两次,我想这是有意义的,因为我的图像是方形的,纹理必须覆盖整个球体

所以我试着用长版本的SpheregeMetry的构造器来制作一个360*235的部分球体,但是改变phi给了我一个看起来像橙色的东西。改变θ给了我正确的形状,但是纹理没有正确地放置在它上面

因此,我的总体问题是如何使这项工作发挥作用,但我认为困扰我的主要问题是:

什么控制纹理如何绘制到网格上?因此,我只能在一次上绘制纹理,并且只能绘制到我需要的球体部分

我看到设置UV是必要的几何体?我读了,所以我有点理解这意味着什么,但我不知道从哪里开始,为我的图像找出正确的UV,就像数字1一样,如何阻止它显示在球体的背面


好吧,我去读了更多关于紫外线的书,做了很多实验。以下是相关的工作代码,我基本上理解:

var geometry = new THREE.SphereGeometry( 30, 256, 128, 0, Math.PI * 2, 0, Math.PI );
geometry.scale( - 1, 1, 1 );//inside out

var imgWidth = 0.8;//I thought this should be 235/360, but used trial and error for less fisheye distortion

var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
for ( i = 0; i < faceVertexUvs.length; i ++ ) {

    var uvs = faceVertexUvs[ i ];
    var face = geometry.faces[ i ];
    //y is top to bottom
    //z is in-out?
    //x is side-side? positive x is front, negative is back

    for ( var j = 0; j < 3; j ++ ) {
        var fvNj = face.vertexNormals[j];
        var yaw = Math.atan2(fvNj.z, fvNj.x)/(Math.PI); //around, -1 to 1
        var pitch = Math.asin(fvNj.y)/Math.PI; //height, -0.5 to 0.5
        pitch = pitch * -1 + 0.5;//flip and make zero to one
        pitch *= imgWidth;

        if(pitch < 0.5){
            //how to do fisheye correction??
            //var correction = (fvNj.x == 0 && fvNj.z == 0) ? 1 : (Math.acos(fvNj.y) / Math.sqrt(fvNj.x * fvNj.x + fvNj.z * fvNj.z)) * (2 / Math.PI);
            var x = Math.cos(yaw * Math.PI);// -1 to 1
            var y = Math.sin(yaw * Math.PI);// -1 to 1
            var u = 0.5 + x*pitch;
            var v = 0.5 + y*pitch;  

            uvs[ j ].x = u;
            uvs[ j ].y = v;
        }else{
            uvs[j].x = 0;
            uvs[j].y = 0;
        }
    }
}

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );