Camera Three.js-鱼眼效应

所以，我一直在胡闹，结果很好。我唯一搞不懂的是，如何制作一个具有真正鱼眼效果的相机

---

这怎么可能

camera.setLens（）

？

可以在高视野下获得鱼眼效果

            var fishCamera = new THREE.PerspectiveCamera( 110, window.innerWidth / window.innerHeight, 1, 1100 );
            var normalCamera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1100 );

或设置

camera.fov = 110 
camera.updateProjectionMatrix();

现场示例如下：

---

一种方法是在相机上设置大视场：

new THREE.PerspectiveCamera(140, ... )

从技术上讲，这不是鱼眼效应，但它可能是您正在寻找的效果

在真正的相机镜头中，获得大视场而不失真可能会使镜头非常昂贵，但在计算机图形学中，这是一种简单的方法

实数扭曲图像，使直线变为曲线，如下图所示：

---

如果要创建具有这种失真的实际鱼眼效果，则必须修改几何体，如中所示。在该示例中，几何体实际上是事先修改的，但对于更高级的场景，您可能希望使用顶点着色器来动态更新顶点。

将摄影机放置在反射球体内。确保球体是双面的。如果要在场景中移动摄影机和球体，请将其设置为父对象。工作起来很有魅力：

借用自：

---

广角镜头通常具有非常低的焦距

为了获得极宽的角度，我们需要减少焦距

请注意，鱼眼镜头是一种极广角镜头

为了减少焦距（或获得极宽的角度），可以增加FOV（视野），因为FOV与焦距成反比

示例：

var camera_1 = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

var camera_2 = new THREE.PerspectiveCamera( 80, width / height, 1, 1000 );

这里的摄像头2是一个更宽的角度设置

注意

---

为了达到预期效果，可能需要调整相机位置。

使用Giliam de Carpentier的镜头变形着色器可以实现鱼眼效果

着色器代码：

函数get扭曲ShaderDefinition（）
{
返回{
制服：{
“tDiffuse”：{type:“t”，value:null}，
“强度”：{类型：“f”，值：0}，
“高度”：{类型：“f”，值：1}，
“aspectRatio”：{type:“f”，值：1}，
“圆柱状比率”：{类型：“f”，值：1}
},
顶点着色器：[
“均匀浮动强度；”，//s:0=透视图，1=赤平图
“均匀浮动高度；”，//h:tan（垂直福文弧度/2）
“均匀浮动aspectRatio；”，//a:screenWidth/screenHeight
“均匀浮动圆柱状比率；”，//c：圆柱畸变率。1=球形
“VARINGING vec3 vUV；”，//要在屏幕上插值的输出
“variabling vec2 vUVDot；”，//要在屏幕上插值的输出
“void main（）{”，
“gl_位置=投影矩阵*（modelViewMatrix*vec4（位置，1.0））；”，
“浮动缩放高度=强度*高度；”，
“浮动圆柱aspectRatio=aspectRatio*圆柱状比率；”，
“float aspectDiagSq=aspectRatio*aspectRatio+1.0；”，
“float diagSq=缩放高度*缩放高度*aspectDiagSq；”，
“vec2 signedUV=（2.0*uv+vec2（-1.0，-1.0））；”，
“浮动z=0.5*sqrt（diagSq+1.0）+0.5；”，
“浮动ny=（z-1.0）/（cylAspectRatio*cylAspectRatio+1.0）；”，
“vUVDot=sqrt（纽约）*vec2（cylAspectRatio，1.0）*已签名的版本；”，
“vUV=vec3（0.5,0.5,1.0）*z+vec3（-0.5，-0.5,0.0）；”，
“vUV.xy+=uv；”，
"}"
].join（“\n”），
碎片着色器：[
“uniform sampler 2D tDiffuse；”，//渲染场景的渲染目标的采样器
“可变vec3 vUV；”，//插值顶点输出数据
“可变vec2 vUVDot；”，//插值顶点输出数据
“void main（）{”，
“vec3紫外=点（vUVDot，vUVDot）*vec3（-0.5，-0.5，-1.0）+vUV；”，
“gl_FragColor=纹理2dproj（tDiffuse，uv）；”，
"}"
].join（“\n”）
};
}

使用effect composer设置效果的一种方法（假设已创建

场景

和

渲染器

）：

//创建摄影机
摄像头=新的三个透视摄像头（100，window.innerWidth/window.innerHeight，110000）；
摄像机位置z=800；
//创建效果生成器
composer=新的3.EffectComposer（渲染器）；
addPass（新的3.RenderPass（场景、摄影机））；
//将失真效果添加到效果生成器
var effect=new THREE.ShaderPass（get扭曲ShaderDefinition（））；
作曲家：阿德帕斯（特效）；
effect.renderToScreen=true；
//设置失真效应
var水平FOV=140；
var强度=0.5；
var cylindricalRatio=2；
var height=Math.tan（3.Math.degToRad（horizontalFOV）/2）/camera.aspect；
camera.fov=数学坐标（高度）*2*180/3.1415926535；
camera.updateProjectMatrix（）；
效果。制服[“强度”]。值=强度；
效果。制服[“高度”]。值=高度；
效果。制服[“aspectRatio”]。值=camera.aspect；
效果。制服[“圆柱状比率”]。值=圆柱状比率；

需要以下脚本，例如可以从以下位置找到：

链接到Giliam的示例：

链接到Giliam关于镜头畸变的文章：

使用镜头畸变效应的测试图像：

---

我试过使用设置镜头和/或更改透视图，但效果并不理想。为了得到一个好的答案，我将尝试对这个问题进行更具体的描述：因此，我的物理设置如下：一个投影到球体内的投影仪，投影仪上连接着一个真正的鱼眼镜头。所需的软件：真正的问题是，我想要投影的图像/3d场景需要显示为鱼眼

var camera_1 = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

var camera_2 = new THREE.PerspectiveCamera( 80, width / height, 1, 1000 );