转 threejs中3D视野的缩放实现

通过Threejs基础学习——修改版知道创建一个相机的相关知识点

var camera = new THREE.PerspectiveCamera( fov, aspect , near,far );
视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大
纵横比：aspect   (3d物体的宽/高比例)
相机离视体积最近的距离：near
相机离视体积最远的距离：far

其中fov视野角(拍摄距离)越大，场景中的物体越小。fov视野角(拍摄距离)越小，场景中的物体越大。

透视相机(近大远小)  PerspectiveCamera  

//透视照相机参数设置
var fov = 45,//拍摄距离  视野角值越大，场景中的物体越小
    near = 1,//相机离视体积最近的距离
    far = 1000,//相机离视体积最远的距离
    aspect =  window.innerWidth / window.innerHeight; //纵横比
var camera = new THREE.PerspectiveCamera(fov,aspect, near, far);

改变fov的值，并更新这个照相机

//改变fov值，并更新场景的渲染
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
 //updateinfo();

鼠标上下滑轮实现放大缩小效果  代码如下

//监听鼠标滚动事件
canvas.addEventListener('mousewheel', mousewheel, false);

//鼠标滑轮-鼠标上下滑轮实现放大缩小效果
function mousewheel(e) {
            e.preventDefault();
            //e.stopPropagation();
            if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) { //当滑轮向上滚动时
                    fov -= (near < fov ? 1 : 0);
                }
                if (e.wheelDelta < 0) { //当滑轮向下滚动时
                    fov += (fov < far ? 1 : 0);
                }
            } else if (e.detail) {  //Firefox滑轮事件
                if (e.detail > 0) { //当滑轮向上滚动时
                    fov -= 1;
                }
                if (e.detail < 0) { //当滑轮向下滚动时
                    fov += 1;
                }
            }
            //改变fov值，并更新场景的渲染
            camera.fov = fov;
            camera.updateProjectionMatrix();
            renderer.render(scene, camera);
            //updateinfo();
}

实现效果完整代码  标注具体案例为个人原创

文章缩放来源  http://blog.csdn.net/u_9_5/article/details/50542847

转载于:https://www.cnblogs.com/zjf-1992/p/6146486.html