54. Three.js案例-创建正交照相机辅助工具_threejs orthographiccamera camerahelper-CSDN博客

本文链接：https://blog.csdn.net/m0_51180924/article/details/144955947

54. Three.js案例-创建正交照相机辅助工具

实现效果

在该案例中，我们创建了一个带有辅助正交照相机的场景，并在其中绘制一个绿色线框球体。球体在场景中按照一定的轨迹运动，同时辅助正交照相机始终对准球体。这有助于理解正交照相机的工作原理及其与透视照相机的区别。

知识点

WebGLRenderer（WebGL渲染器）

WebGLRenderer是Three.js中最常用的渲染器之一，用于将3D场景渲染到网页上。

构造器

WebGLRenderer( parameters : Object )

参数	类型	描述
antialias	Boolean	是否开启抗锯齿，默认值为false。
alpha	Boolean	是否允许透明背景，默认值为false。

方法

setSize(width, height)：设置渲染器输出的宽度和高度。
setClearColor(color, alpha)：设置渲染器的背景颜色和透明度。

Scene（场景）

Scene是所有可见对象的容器。

属性

background：设置场景的背景颜色或纹理。

PerspectiveCamera（透视照相机）

PerspectiveCamera模拟了人眼观察世界的方式，具有近大远小的效果。

构造器

PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	视野角度。
aspect	Number	宽高比。
near	Number	近裁剪面距离。
far	Number	远裁剪面距离。

OrthographicCamera（正交照相机）

OrthographicCamera不考虑透视效果，物体大小不会随距离变化。

构造器

OrthographicCamera(left, right, top, bottom, near, far)

参数	类型	描述
left	Number	左边界坐标。
right	Number	右边界坐标。
top	Number	上边界坐标。
bottom	Number	下边界坐标。
near	Number	近裁剪面距离。
far	Number	远裁剪面距离。

CameraHelper（照相机辅助工具）

CameraHelper用于可视化照相机的视锥体。

构造器

CameraHelper(camera)

参数	类型	描述
camera	Camera	要可视化的照相机。

SphereBufferGeometry（球体几何体）

SphereBufferGeometry用于创建球体模型。

构造器

SphereBufferGeometry(radius, widthSegments, heightSegments)

参数	类型	描述
radius	Number	球体半径。
widthSegments	Number	经度方向上的分段数。
heightSegments	Number	纬度方向上的分段数。

MeshBasicMaterial（基础材质）

MeshBasicMaterial是一种简单的材质，不受光照影响。

构造器

MeshBasicMaterial(parameters)

参数	类型	描述
color	Color	材质颜色。
wireframe	Boolean	是否以线框模式显示。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script type="text/javascript">
    var myAspect = window.innerWidth / window.innerHeight;
    var myFrustumSize = 700;
    var myCamera, myScene, myRenderer, mySphereMesh;
    var myOrthographicCamera, myOrthographicCameraHelper;

    // 创建渲染器
    myRenderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
    myRenderer.setSize(window.innerWidth, window.innerHeight);
    myRenderer.setClearColor('white', 1.0);
    $("#myContainer").append(myRenderer.domElement);

    // 创建场景
    myScene = new THREE.Scene();

    // 创建透视照相机
    myCamera = new THREE.PerspectiveCamera(45, myAspect, 1, 5000);
    myCamera.position.z = 2500;

    // 创建正交照相机
    myOrthographicCamera = new THREE.OrthographicCamera(
        0.5 * myFrustumSize * myAspect / -2, 0.5 * myFrustumSize * myAspect / 2,
        myFrustumSize / 2, myFrustumSize / -2, 150, 1000);

    // 创建正交照相机辅助工具
    myOrthographicCameraHelper = new THREE.CameraHelper(myOrthographicCamera);
    myScene.add(myOrthographicCameraHelper);

    // 创建球体
    mySphereMesh = new THREE.Mesh(new THREE.SphereBufferGeometry(200, 16, 8),
        new THREE.MeshBasicMaterial({color: 'green', wireframe: true}));
    myScene.add(mySphereMesh);

    // 渲染动画
    animate();

    function animate() {
        requestAnimationFrame(animate);
        var r = Date.now() * 0.0005;
        mySphereMesh.position.x = myFrustumSize * Math.cos(r);
        mySphereMesh.position.z = myFrustumSize * Math.sin(r);
        mySphereMesh.position.y = myFrustumSize * Math.sin(r);
        myOrthographicCamera.lookAt(mySphereMesh.position);
        myRenderer.render(myScene, myCamera);
    }
</script>
</body>
</html>