three.js从入门到精通系列教程003 - three.js透视相机（PerspectiveCamera）-Toy模板网

这篇具有很好参考价值的文章主要介绍了three.js从入门到精通系列教程003 - three.js透视相机（PerspectiveCamera）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程002 - three.js透视相机（PerspectiveCamera）</title>
    <script src="js/three.js"></script>
    <script src="js/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor('white', 1.0);
        $("#myContainer").append(myRenderer.domElement);
        var myScene = new THREE.Scene();

        /*
            透视相机（PerspectiveCamera） 它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。
            呈现的效果，类似眼睛看东西，近大远小
            根据视锥的范围给渲染器提供需要渲染的场景范围。
            实例化new THREE.PerspectiveCamera() 接受4个参数来确认视锥的范围。只要在视锥范围内的场景才会渲染。
            fov 摄像机视锥体垂直视野角度。
            aspect 摄像机视锥体长宽比。
            near 摄像机视锥体近端面。
            far 摄像机视锥体远端面。
        */
        var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        myCamera.position.set(40.06, 20.92, 42.68);
        myCamera.lookAt(new THREE.Vector3(0, 0, 0));

        //创建第一个立方体
        var myGeometry1 = new THREE.BoxGeometry(16, 16, 16);
        var myMaterial1 = new THREE.MeshNormalMaterial();
        var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);
        myMesh1.translateX(-40);
        myScene.add(myMesh1);

        //更多代码 请点击下方链接下载
    </script>
</body>

</html>

three.js从入门到精通系列教程003 - three.js透视相机（PerspectiveCamera）,three.js从入门到精通系列教程,javascript,3D地图,数字孪生,three.js