簡介
我們在做直播的時候，可能場景中某左下角突然出現了一個非常驚人的意外，那麼我們怎麼能快速的切換到場景的左下角呢？
案例實現過程圖解
《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>