Three.js 关于照相机，视角的理解

Three.js 关于照相机，视角的理解

另附说明：本系列文章只是作者用于学习理解threejs以及WebGL的学习心得，学习途径也是从WebGL中文网上学习所得，如果上述网站认定侵权或不正当触犯其利益，请联系作者（PS:千万别告我），其它转载者造成的影响请自己负责，与本人无关

好了，该声明的也声明了，本人也是初入thre.js的丑新，写写也是为了记录理解，说的不对的地方，也欢迎批评指正

通过对WebGL中文网初级教程的前三章的学习。
知道3D应用中有4个最重要的组建 场景（scene）、相机（camera）和渲染器（renderer）还有几何体
场景渲染器几何体的理解不难，这里详细说一下相机

这是照相机的构造函数

//fov 代表视角
//aspect 宽高比
//near 最近看到
//far 最远看到
var camera = PerspectiveCamera( fov, aspect, near, far )
//而这里其实确认的是照相机里近平面的距离
camera.position.z = 5;

同时需要当心的是这里使用的是右手坐标系（听视频老师讲的，本人也亲测了）

另附学习代码

<script>

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(75,
    window.innerWidth/(window.innerHeight),
    0.1,
    1000);

    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var cube = new THREE.Mesh(geometry, material); 
    scene.add(cube);
    var z = 5;
    var z1 = true;
     camera.position.z = z;
    camera.position.y = 1.5;
    camera.position.x = -1.5;
    function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;

        if(z1 == null){
            z1 = z;
        }
        if(z > 50){
            z1 = false;
        }else if(z < 5){
            z1 = true;
        }
        if(z1){
            z = z + 0.1;
        }else{
            z = z - 0.1;
        }

        camera.position.z =z;

        renderer.render(scene, camera);
    }
    render();
</script>

转载于:https://www.cnblogs.com/liyunq/p/9724604.html