场景快速切换放大到某一部分

简介

我们在做直播的时候，可能场景中某左下角突然出现了一个非常惊人的意外，那么我们怎么能快速的切换到场景的左下角呢？

案例实现过程图解

《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>
    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>

场景快速切换放大到某一部分

简介

案例实现过程图解

相关推荐