three.js PerspectiveCamera（透视投影相机附带demo） - 02

最新推荐文章于 2024-09-18 10:00:00 发布

与诸君共勉

最新推荐文章于 2024-09-18 10:00:00 发布

阅读量1.8k

点赞数

分类专栏： ThreeJs 笔记文章标签： 3d 前端 javascript three.js webgl

本文链接：https://blog.csdn.net/qq_42936527/article/details/121489870

版权

笔记同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

ThreeJs

5 篇文章 4 订阅

订阅专栏

文章目录

一、什么是PerspectiveCamera 透视投影相机？
- 1.属性介绍
- 2.代码示例
二、demo
三、demo效果
上一篇： [three.js 入门场景搭建 - 01 及 threejs下载](https://blog.csdn.net/qq_42936527/article/details/121489175)
下一篇：[three.js OrthographicCamera（正交相机附带demo） - 03](https://blog.csdn.net/qq_42936527/article/details/121537987?spm=1001.2014.3001.5502)

一、什么是PerspectiveCamera 透视投影相机？

这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。

1.属性介绍

属性	描述
fov	摄像机视锥体垂直视野角度，默认值是50
aspect	摄像机视锥体长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）
near	摄像机视锥体近端面，默认值是0.1
far	摄像机视锥体远端面 2000

2.代码示例

var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1 ,500);

二、demo

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>透视投影相机PerspectiveCamera</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;/* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="../../../../lib/three.js"></script>
    <script src="../../../../lib/OrbitControls.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();
        var geometry = new THREE.BoxGeometry(50,50,50);
        var materail = new THREE.MeshLambertMaterial({color:0x0000ff})
        var mesh = new THREE.Mesh(geometry,materail);
        mesh.position.set(0,0,-10);
        scene.add(mesh)

        //设置点光源
        var pointlight = new THREE.PointLight(0xffffff);
        pointlight.position.set(100,200,300);
        scene.add(pointlight);

        //设置环境光
        var ambientlight= new THREE.AmbientLight(0xffffff);
        scene.add(ambientlight);

        //设置相机
        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1 ,500);
        camera.position.set(20,100,100);
        camera.lookAt(scene.position);

        //设置渲染器
        var renderer = new THREE.WebGLRenderer({
        })
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor(0x0000ff,0.5);

        var controlStore = new THREE.OrbitControls(camera,renderer.domElement)
        controlStore.dampingFactor = 0.5;
        document.body.appendChild(renderer.domElement)
        function animate (){
            renderer.render(scene,camera)
            requestAnimationFrame(animate)
        }

        animate();

    </script>
</body>
</html>