Three.js 教程: 相机camera

作者: 谢大见 | 来源:发表于2018-02-07 17:08 被阅读0次

[读]three.js 相机camera位置属性设置详解
Three.js 教程: 相机camera
three.js笔记
three.js
1.three.js世界中的四大要素
初识three.js--2
THREE 开始与注意事项
使用three.js的基本组件
three.js 实现物体贴图
three.js 相机camera属性解析

什么是照相机？

我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。
而针对投影方式的不同，照相机又分为THREE.PerspectiveCamera(透视投影照相机) 和 THREE.OrthographicCamera(正交投影照相机)。

常用两种相机

1.OrthographicCamera 正交投影相机（平视相机）
2.PerspectiveCamera 透视相机（更像人眼）

举个简单的例子来说明正交投影（平视）与透视投影照相机的区别。
使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果；
而使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果，对于在三维空间内平行的线，投影到二维空间中也一定是平行的

那么，你的程序需要正交投影还是透视投影的照相机呢?
一般说来，对于制图、建模软件通常使用正交投影，这样不会因为投影而改变物体比例；
而对于其他大多数应用，通常使用透视投影，因为这更接近人眼的观察效果。当然，照相机的选择并没有对错之分，你可以更具应用的特性，选择一个效果更佳的照相机。
详细案例差别参考：https://threejs.org/examples/#webgl_camera

两种相机的新建方式有所不同，透视相机用的而更多一些

/* 四个参数分别表示：多少度视角，相机的宽高比，最近距离，最远可视距离*/
new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);

常用的好用的相机控制器
OrbitControls.js，效果就是可以通过鼠标来控制相机视野

完整案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="vendor/three.min.js"></script>
    <script type="text/javascript" src="vendor/jquery.min.js"></script>
    <!-- 常用相机控制器，依赖文件目录 three.js\examples\js\controls -->
    <script type="text/javascript" src="vendor/OrbitControls.js"></script>
</head>
<body >
<script>
    /**
     * 常用两种相机
     * 1.OrthographicCamera  正交投影相机（平视相机）
     * 2.PerspectiveCamera  透视相机（人眼）
     */

    $(function () {
        var scene=new THREE.Scene();

        var geomtry= new THREE.BoxGeometry(100,100,100);    //新建盒子模型
        var material=new THREE.MeshLambertMaterial({color:0xff0000});   //材质mtl
        var mesh=new THREE.Mesh(geomtry,material);
        scene.add(mesh);    //场景中添加模型

        var light= new THREE.PointLight(0xffffff);
        light.position.set(300,400,200);
        scene.add(light);   //场景中添加点光源

        //加入环境光使环境亮一点
        scene.add(new THREE.AmbientLight(0x333333));

        var camera=new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,1000);
        camera.position.set(200,200,200);   //设置相机位置
        // camera.lookAt(scene.position);
        camera.lookAt(0,0,0);

        var renderer=new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        render();
        function render() {
            // requestAnimationFrame(render);
            // camera.position.x+=0.1;
            // camera.position.y+=0.1;
            // camera.position.z+=0.1;
            renderer.render(scene,camera);
        }

        //相机控制器
        var controls=new THREE.OrbitControls(camera);
        controls.addEventListener('change',render);
    });
</script>
</body>
</html>

完整代码：github地址欢迎star