Threejs之Camera相机

最新推荐文章于 2024-09-23 17:57:04 发布

你华还是你华

最新推荐文章于 2024-09-23 17:57:04 发布

阅读量419

点赞数 5

分类专栏： ThreeJS 文章标签：数码相机 threejs 3d

本文链接：https://blog.csdn.net/weixin_44103733/article/details/141606778

版权

ThreeJS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文目录

前言
一、透视相机
- 1.1 创建透视相机
- 1.2 代码示例

前言

相机在 Threejs 中扮演着至关重要的角色，它决定了我们从哪个视角来观察场景。在Threejs中，创建相机轻松设定视角、宽高比等参数，掌控视觉体验。相机虽无形，却决定所见，需搭配物体、灯光等可见元素，共同构建生动场景。它是连接现实与虚拟的桥梁，让想象触手可及。在Threejs中有正交相机、透视相机、立方相机、立体相机，接下来我们将重点记录透视相机，因为透视相机是比较还原我们人眼的效果。
本文只介绍常用参数，更多参数请点这里。

一、透视相机

透视相机（PerspectiveCamera）。这一摄像机使用perspective projection（透视投影）来进行投影。
这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。

1.1 创建透视相机

import * as THREE from "three";

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );

构造器
PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

在我们正式开发项目中一般会采用dom元素的宽高进行设置相机的宽高，并且渲染器的宽高也最好设置成相机的宽高，这样不会造成失真的感觉，例如：

// 定义dom元素
let ThreeContainerElement: HTMLElement; 
// 使用非空断言操作符获取dom元素
ThreeContainerElement = document.getElementById('threeContainer')!; 
// 场景，相机
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
    45, // 视角
    // window.innerWidth / window.innerHeight,
    ThreeContainerElement?.clientWidth / ThreeContainerElement?.clientHeight,
    0.1, // 近平面
    1000 // 远平面
  )

  // 渲染器
  renderer = new THREE.WebGLRenderer({
    alpha: true,//渲染器透明，支持背景透明
    antialias: true,//抗锯齿
    precision: 'highp',//着色器开启高精度
  })
renderer.setSize(ThreeContainerElement?.clientWidth, ThreeContainerElement?.clientHeight);

在threejs中有x，y，z轴：
在这里插入图片描述
我们通过相机的camera.postion.x，camera.postion.y，camera.postion.z可以分别设置相机的位置。也可以使用camera.position.set(x, y, z)设置。
我们通过使用相机的camera.lookAt(x,y,z)来决定相机看向坐标轴的位置。
所以我们通过以上的方法，可以写一个相机围绕物体旋转的视角，接下来让我们用代码还原。

1.2 代码示例

我们假设半径为3。那么相机绕着y轴旋转的话，我们就要知道x轴坐标以及z轴坐标
在这里插入图片描述

如图所示此事我们的y轴其实是园中心点，我们俯视下去y轴就是一个点。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 4, 10);
        camera.lookAt(0, 0, 0);


        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)
        // 设置Mesh（网格），网格包含一个几何体以及作用在此几何体上的材质
        const cube = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1), 
            new THREE.MeshBasicMaterial({ color: 0x00ff00 })
        );
        const cube2 = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1), 
            new THREE.MeshBasicMaterial({ color: 0x004200 })
        );
        cube2.position.x = 2;
        // 将网格对象放入到我们的场景中
        scene.add(cube, cube2);
        
        let angle = 0; // 设置角度一开始是0
        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            // 设置半径为3
            const radius = 3;
            angle += 0.01;
            // 相机坐标
            camera.position.x = radius * Math.cos(angle);
            camera.position.z = radius * Math.sin(angle);
            // 让相机视野一直看向原点
            camera.lookAt(0, 0, 0);
            renderer.render(scene, camera);
        };
        // 执行动画
        animate();
    </script>
</body>
</html>