本文通过一个直播场景的例子，介绍了如何利用Three.js的PerspectiveCamera的setViewOffset方法，实现快速切换并放大场景的四个象限。通过键盘控制（WASD）可以实现从全景到各象限的平滑过渡，适用于需要实时关注场景特定区域的场景。
简介
我们在做直播的时候，可能场景中某左下角突然出现了一个非常惊人的意外，那么我们怎么能快速的切换到场景的左下角呢？
案例实现过程图解
《1》。首先添加全景图，如上所示，场景x轴，z轴分为四个象限，分别在各个象限中添加不同颜色的方块
《2》。点击 w键，页面切换到第四象限，也就是红色区域效果如下：
《3》点击s键切换到第二象限的位置：
《4》同理点击a切换到白色方块，点击d键切换到黄色方块区域：
白色方块
黄色方块区域
原理简介
主要应用了PerspectiveCamera的 setViewOffset方法：
setViewOffset（fullWidth:float, fullHeight:float, x:float, y:float ,width:float,height:float）；
参数介绍和理解：
fullWidth ---- 场景的总宽度
fullHeight ---- 场景的总高度
x ----- 相对总场景宽度的X轴偏移量
y ----- 相对总场景宽度的Y轴偏移量
width ----- 显示局部场景的宽度
height ----- 显示局部场景的高度：
可能这些参数不好理解，我们可以这样设置：
var width = window.innerWidth; height = window.innerHeight;
我们现在要将场景分为四个区域：
我们可以设置 fullWidth = width ;fullHeight = height ;
那么第一块区域就是 左上角开始 x = 0 ; y = 0;，width = 0.5 * fullWidth ; height = 0;
那么第二块区域就是 x = 0.5 * fullWidth ; y = 0;，width = 0.5 * fullWidth ; height = 0;
那么第三块区域就是 x = 0 ; y = 0.5 * fullHeight;，width = 0.5 * fullWidth ; height = 0;
那么第二块区域就是 x = 0.5 * fullWidth ; y = 0.5 * fullHeight;，width = 0.5 * fullWidth ; height = 0;
案例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>shape对象的研究</title>
<style>
body{
margin
最低0.47元/天 解锁文章
扫一扫
18万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
