Three.js - 鱼眼效果

Question

所以，我和three.js搞混了，效果很好。我唯一想不通的是如何制作具有真实鱼眼效果的相机。

怎么可能？ camera.setLens()？

Answer 1

将相机放入反光球体内。确保球体是双面的。如果要在场景中移动相机和球体，请将它们放在一起。像魅力一样：

http://tileableart.com/code/NOCosmos/test.html

借来自：

http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap_dynamic2.html

cubeCamera = new THREE.CubeCamera( 1, 3000, 1024);
            cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add( cubeCamera );
camParent.add(cubeCamera);
var material = new THREE.MeshBasicMaterial( { envMap: cubeCamera.renderTarget } );
material.side = THREE.DoubleSide;
sphere = new THREE.Mesh( new THREE.SphereGeometry( 2, 60, 30 ), material );

Answer 2

可以通过高视野获得鱼眼效果。

            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();

这里的实例： http://mrdoob.github.com/three.js/examples/canvas_geometry_panorama_fisheye.html

Answer 3

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

new THREE.PerspectiveCamera(140, ... )

这在技术上不会是鱼眼效果，但它可能是你正在寻找的效果。

在真实的相机镜头中，在没有扭曲的情况下获得大视野可能会使镜头相当昂贵，但在计算机图形学中，这是一种简单的方法。

真实的fisheye lens扭曲图像，使直线变得弯曲，如下图所示：

如果您想通过这种扭曲来创建实际的鱼眼效果，则必须修改几何体，如Three.js's fisheye example中所示。在该示例中，几何实际上是事先修改过的，但是对于更高级的场景，您需要使用顶点着色器来动态更新顶点。

Answer 4

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

为了达到极宽的角度，我们需要减少焦距。

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

为了减少焦距（或实现极端广角），可以增加FOV（视场），因为FOV与焦距成反比。

示例：

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

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

这里camera_2是一个更广角的设置。

注意

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