threejs - 2 - 相机

2018-04-07 本文已影响729人大批

:)

简介

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

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

透视相机

透视相机在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);