Css 查看图像，如倒卡鲁塞尔或VR/球形

我正试图建立这样的东西：

但不同的是，我有一个4096x1024的背景图像，我想让它看起来像是某种虚拟现实的外观，中心离屏幕有点远，边缘有点拉长和靠近

我设法使用并将我的图像设置为

我不想在场景/屏幕上移动（使用AWD），只想水平移动屏幕，因为我会有用户需要移动屏幕才能看到的元素，就像在gif和common carrossel上一样
 定义“打火机”
A-Frame
是在
WebVR
和
three.js
上构建的，因此如果您不想要
A-Frame
依赖关系，也许您可以使用
three.js
自己构建全景。实际上，它已经有了一个如何做到这一点的例子：




three.js webgl-等矩形全景
身体{
背景色：#000000；
边际：0px；
溢出：隐藏；
}
#信息{
位置：绝对位置；
顶部：0px；宽度：100%；
颜色：#ffffff；
填充物：5px；
字体系列：Monospace；
字体大小：13px；
字体大小：粗体；
文本对齐：居中；
}
a{
颜色：#ffffff；
}
-等矩形全景演示。照片作者。

将等矩形纹理拖动到页面中。
摄像机、场景、渲染器；
var isUserInteracting=false，
onMouseDownMouseX=0，onMouseDownMouseY=0，
lon=0，onMouseDownLon=0，
lat=0，onMouseDownLat=0，
φ=0，θ=0；
init（）；
制作动画（）；
函数init（）{
var容器，网状；
container=document.getElementById（'container'）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，11100）；
camera.target=新的三个矢量3（0,0,0）；
场景=新的三个。场景（）；
var geometry=新的三个SphereBufferGeometry（500,60,40）；
//反转x轴上的几何图形，以便所有面都指向内部
几何。比例（-1,1,1）；
var材料=新的三种。网状基本材料（{
映射：新的3.TextureLoader（）.load（'https://farm4.staticflickr.com/3289/2294472375_24a3b8ef46_o.jpg' )
} );
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.doElement）；
文件。添加的文件列表（'mousedown'，onDocumentMouseDown，false）；
document.addEventListener（'mousemove'，onDocumentMouseMove，false）；
文件。添加的列表器（'mouseup'，onDocumentMouseUp，false）；
文件。添加的文件列表（'wheel'，onDocumentMouseWheel，false）；
//
文档.添加的事件列表器（'dragover'，函数（事件）{
event.preventDefault（）；
event.dataTransfer.dropEffect='copy'；
}，假）；
文档.添加事件列表器（'dragenter'，函数（事件）{
document.body.style.opacity=0.5；
}，假）；
document.addEventListener（'dragleave'，函数（事件）{
document.body.style.opacity=1；
}，假）；
document.addEventListener（'drop'，函数（事件）{
event.preventDefault（）；
var reader=new FileReader（）；
reader.addEventListener（'load'，函数（事件）{
material.map.image.src=event.target.result；
material.map.needsUpdate=true；
}，假）；
reader.readAsDataURL（event.dataTransfer.files[0]）；
document.body.style.opacity=1；
}，假）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数onDocumentMouseDown（事件）{
event.preventDefault（）；
isUserInteracting=true；
onMouseDownMouseX=event.clientX；
onMouseDownMouseY=event.clientY；
onMouseDownLon=lon；
onMouseDownLat=lat；
}
onDocumentMouseMove函数（事件）{
if（isUserInteracting==true）{
lon=（onMouseDownMouseX-event.clientX）*0.1+onMouseDownLon；
lat=（event.clientY-onMouseDownMouseY）*0.1+onMouseDownLat；
}
}
onDocumentMouseUp函数（事件）{
isUserInteracting=false；
}
DocumentMouseWheel函数（事件）{
var fov=camera.fov+event.deltaY*0.05；
camera.fov=3.Math.clamp（fov，10，75）；
camera.updateProjectMatrix（）；
}
函数animate（）{
请求动画帧（动画）；
更新（）；
}
函数更新（）{
if（isUserInteracting==false）{
lon+=0.1；
}
lat=数学最大值（-85，数学最小值（85，lat））；
φ=三个数学degToRad（90-lat）；
θ=三。数学。德格托拉（lon）；
camera.target.x=500*Math.sin（φ）*Math.cos（θ）；
//camera.target.y=500*Math.cos（phi）；//对此进行注释以禁用y轴
camera.target.z=500*Math.sin（φ）*Math.sin（θ）；
摄像机。注视（摄像机。目标）；
/*
//变形
camera.position.copy（camera.target）.negate（）；
*/
渲染器。渲染（场景、摄影机）；
}
非常感谢，伙计，我快速搜索了如何使用AWSD和摄像头上下移动，只允许右/左移动，但没有找到任何简洁的内容，你知道我在哪里可以找到/了解这方面的信息吗？我不确定我是否理解。该示例没有随WASD移动。你想把你的相机限制在一个水平轴上吗？基本上，我想让相机只在水平轴上移动，没有上/下，只是右/左。我已经找到了如何消除使用WASD的可能性，但没有发现如何消除摄像井的上/下运动，这将是另一个问题。但它非常简单，只需不设置
摄像机即可。