简介
我们在做直播的时候，可能场景中某左下角突然出现了一个非常惊人的意外，那么我们怎么能快速的切换到场景的左下角呢？
案例实现过程图解
《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;
}
</style>
</head>
<script src="../js/three.js"></script>
<!--<script src="../js/OrbitControls.js"></script>-->
<script>
function init() {
createScene();
buildAuxSystem();
addBox(0xff0000,new THREE.Vector3(-100,5,-100));
addBox(0xff00ff,new THREE.Vector3(100,5,-100));
addBox(0xff00ff,new THREE.Vector3(100,15,-100));
addBox(0xffffff,new THREE.Vector3(-100,5,100));
addBox(0xffffff,new THREE.Vector3(-100,15,100));
addBox(0xffffff,new THREE.Vector3(-100,25,100));
addBox(0xffff00,new THREE.Vector3(100,5,100));
addBox(0xffff00,new THREE.Vector3(100,15,100));
addBox(0xffff00,new THREE.Vector3(100,25,100));
addBox(0xffff00,new THREE.Vector3(100,35,100));
loop();
}
var scene,camera,renderer,width = window.innerWidth,height = window.innerHeight,controls;
var cameraX = 0, cameraY = 200, cameraZ = 200;
function createScene() {
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
camera.position.set(cameraX,cameraY,cameraZ);
camera.lookAt(scene.position);
var pointLight = new THREE.PointLight(0xffffff);
camera.add(pointLight);
scene.add(camera);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x333333),1);
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);
document.addEventListener('keyup',handleKeyUp,false);
window.addEventListener("resize",handleWindowResize,false)
}
function loop() {
renderer.render(scene,camera);
camera.position.set(cameraX,cameraY,cameraZ);
requestAnimationFrame(loop);
}
function handleWindowResize() {
width = window.innerWidth;
height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
}
// 建立辅助设备系统
function buildAuxSystem(){
var gridHelper = new THREE.GridHelper(400,40);
scene.add(gridHelper);
var axesHelper = new THREE.AxesHelper(400);
scene.add(axesHelper);
// controls = new THREE.OrbitControls(camera,renderer.domElement);
// controls.enableDamping = true;
// controls.dampingFactor = 0.3;
// controls.rotateSpeed = 0.35;
// controls.enableKeys = false;
// controls.update();
}
// 添加块
function addBox(color,vec) {
var geo = new THREE.BoxGeometry(10,10,10);
var mat = new THREE.MeshPhongMaterial({color : color});
var mesh = new THREE.Mesh(geo,mat);
mesh.position.x = vec.x;
mesh.position.y = vec.y;
mesh.position.z = vec.z;
scene.add(mesh);
}
// 键盘相应事件
function handleKeyUp(e){
var w = width/2;
var h = height/2;
var fullWidth = w * 2;
var fullHeight = h * 2;
if(String.fromCharCode(e.keyCode) === "W"){
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
// cameraZ -= 10;
}else if(String.fromCharCode(e.keyCode) === "S"){
// cameraZ += 10;
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
}else if(String.fromCharCode(e.keyCode) === "A"){
// cameraX -= 10;
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
}else if(String.fromCharCode(e.keyCode) === "D"){
// cameraX += 10;
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
}else{
return ;
}
// A
// camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
// B
// camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
// C
// camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
// D
// camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
// E
// camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
// F
// camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
console.log(camera.getFocalLength());
}
</script>
<body onload ="init()">
</body>
</html>
