threejs - 2 - 相机

:)

---

简介

常见的相机有两类：透视相机 和 正交相机

• 透视相机：成像有近大远小的感觉
• 正交相机：没有近大远小的感觉，类似工程制图

---

透视相机

透视相机在ThreeJs里面对应的类是THREE.PerspectiveCamera，这个类需要4个参数：视角、近平面距离、远平面距离、宽高比。如果在加上相机的位置和相机照相的方向（lookAt）就可以在三维空间中唯一确定一个空间，出现在这个空间的物体最后就会被渲染出来（近大远小）。

图片来自网络

---

正交相机

正交相机在ThreeJs里面对应的类是THREE.OrthographicCamera，这个类需要6个参数：左边偏移（偏移是相对于相机中心位置，不是坐标），右偏移，上偏移，下偏移，近平面距离、远平面距离。当然这个相机也是需要一个位置和lookAt方向的

---

相机demo

在原点添加一个立方体，使用不同的相机观察

    var scene = new THREE.Scene();
    /**
     * 视角 ： 45度
     * 宽高比 ： window.innerWidth / window.innerHeight
     * 近平面距离 ： 1
     * 远平面距离 ： 1000
     */
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000);
    camera.position.set(10,10,10); // 相机的位置
    camera.lookAt(0,0,0); // 相机看着的方向

    /**
     * OrthographicCamera( left, right, top, bottom, near, far )
     * 这里的 20 不是坐标  是偏移量哈
     * 这里添加了一个比例，如果相机的宽度个高度的比例和渲染的比例对不上，最后渲染出来就会变形
     */
    var acspet = window.innerWidth / window.innerHeight;
    var camera1 = new THREE.OrthographicCamera(-5 * acspet,5 * acspet ,5,-5,1,100);
    camera1.position.set(10,10,10);
    camera1.lookAt(0,0,0);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);

    var box = new THREE.Mesh(
        new THREE.BoxGeometry(2,2,2),
        new THREE.MeshBasicMaterial({
            color: 0xffff00,wireframe:true
        })
    );
    box.position.set(0,0,0);
    scene.add(box);

    document.getElementById("content").appendChild(renderer.domElement);
    // 这里切换不同的相机
    renderer.render(scene,camera1);

透视相机

正交相机

主要的相机就这两种：正交相机 和 透视相机

---

相机辅助线

有时候我们想看看相机的可视范围，这时候就需要添加一些辅助线帮助我们创建设置相机参数。使用的是THREE.CameraHelper这个类需要注意的是需要事先将相机对象添加到场景中

场景中可以有多个相机，不同的相机有不同的视角，最后使用不同的视角渲染出来的效果就不同。还有一个意识需要建立起来，就是 camera 和 renderer是独立的，不同的不同的renderer渲染到的dom不同，不同的camera角度不同可以结合起来使用

---

threejs - 1 - 介绍&入门
threejs - 2 - 相机
threejs - 3 - 场景刷新
threejs - 4 - 物体
[threejs - 5 - 材质]
[threejs - 6 - 灯光]
[threejs - 7 - 相机进阶]
[threejs - 8 - 物体进阶]
[threejs - 9 - 粒子系统]
[threejs - 10 - 模型加载]
[threejs - 11 - GLSL]
[threejs - 12 - 着色器]

End