正投影相机

我们绘制一个梯形圆柱体，使用正投影相机来观看。
之前的代码只需要改动initCamera和initObject两部分的代码，其他不需要动

var cube;
function initObject() {
    // 圆柱体 上面圆半径，下面圆半径，圆柱体的高
    var geometry = new THREE.CylinderGeometry(70, 100, 200);
    // 一种非光泽表面的材质，可以当作表面粗糙的材质，反射效率会比较平均
    var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position = new THREE.Vector3(0, 0, 0);
    scene.add(mesh);
}

THREE.CylinderGeometry用来定义圆柱几何体
- radiusTop — 圆柱的顶部半径，默认值是1。
- radiusBottom — 圆柱的底部半径，默认值是1。
- height — 圆柱的高度，默认值是1。
THREE.MeshLambertMaterial用来定义表面粗糙的材质，反射效率比较平均
- color: 材质颜色
THREE.Mesh定义网格模型

function initCamera() {
    // 定义正投影相机，我们以屏幕的一半设置相机中心点
    camera = new THREE.OrthographicCamera(
        window.innerWidth / -2, // 距离中心点位置一半为负数
        window.innerWidth / 2,
        window.innerHeight / 2,
        window.innerHeight / -2, // 距离中心点位置一半为负数
        10,
        1000
    );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 600;
    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;
    camera.lookAt({ x: 0, y: 0, z: 0 });
}

我们设定正投影相机观看的范围，是屏幕的一半
左平面距离相机中心点距离为负数
右平面距离相机中心点距离为正数
上平面距离相机中心点距离为正数
下平面距离相机中心点距离为负数
设置相机在距离中心点600的位置

实现效果如下 codepen示例代码

透视投影相机

我们只需要把代码中创建的相机实例改为THREE.PerspectiveCamera，就可以创建透视投影相机了

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

简易GUI库操作相机视角

通过dat.gui.js库，就可以快速使用一些简单的操作界面按钮
仓库地址: github.com/dataarts/da…

初始化GUI操作界面

使用方式

var param;
function createUI() {
    var ParamObj = function () {
        this.fov = 45
    }
    param = new ParamObj()
    var gui = new dat.GUI()
    // 添加一个按钮，参数对象，修改的参数，修改参数范围，label的名字
    gui.add(param, "fov", 0, 180).name('视角的大小')
}

gui.add(param, "fov", 0, 180) -- 添加一个按钮，参数对象param，修改的参数fov以及修改参数范围0-180
.name -- label的名字
界面效果：

当我们拉动蓝条，数值改变是，我们定义的参数也会跟着改变

动态改变相机视角

定义changeFov方法，用来改变视角
定义 setCameraFov方法，用来设置相机视角

// 设置相机视角
function setCameraFov(fov) {
    camera.fov = fov; // 设置相机的视角
    camera.updateProjectionMatrix(); // 更新相机的投影矩阵
}
// 改变视角的方法
function changeFov() {
    setCameraFov(param.fov);
}

在 animation方法中，调用 changeFov方法，每次渲染时设置相机的视角，此时获取的视角参数时我们通过GUI最新设置的视角参数

function animation() {
    changeFov();
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
}

效果如下：

设置视角.gif codepen示例代码

总结

这一节我们主要讲了以下内容：

正投影相机 THREE.OrthographicCamera
透视投影相机 THREE.PerspectiveCamera
使用dat.gui库动态改变相机视角

ThreeJs入门09-正投影和透视投影相机的实践

正投影相机

透视投影相机

简易GUI库操作相机视角

初始化GUI操作界面

动态改变相机视角

总结