Three.js - 重置相机和控制器使镜头回到初始状态

最新推荐文章于 2024-08-10 07:50:06 发布

「已注销」

最新推荐文章于 2024-08-10 07:50:06 发布

阅读量5.9k

点赞数 11

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/80882969

版权

在做三维项目的过程中，如果一个模型被用户不断旋转和缩放，会产生找不到模型的情况，因此就需要添加一个键盘事件，来使相机和控制器重置，找回模型。

1、添加键盘控制
2、重置相机和控制器
按 Enter键重置浏览镜头.
示例浏览地址：https://ithanmang.gitee.io/threejs/home/201807/20180702/01-resetCamera.html

主要代码

// 键盘监听方法
function onKeyDown(event) {
   
    switch (event.keyCode){
   
        case 13: //按下 enter 键时触发
            // 重新初始化相机和控制器
            initCamera();
            initControls();
            break;
    }
}

当相机被重新初始的时候，需要经相机重新加入控制器，因为此时被渲染的相机已经不再指向第一次初始化的那个对象，若想控制器在控制镜头就需要同步更新，否则会不能再控制镜头的缩放和旋转。
相机处于位置
这里写图片描述
按下 Enter 键视角重置

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制字体模型</title>
    <style>

        body{
   
            margin: 0;
            overflow: hidden;
        }

    </style>
    <script src="../../libs/build/three.js"></script>

    <script src="../../libs/examples/js/Detector.js"></script>

    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>

    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>

    <script src="../../libs/extend/ThreeBSP.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"><