在threejs中实现DollyZoom（希区柯克变焦）

不坠心河

已于 2024-08-20 16:30:32 修改

阅读量478

点赞数 2

分类专栏： # threejs 文章标签： javascript vue.js threejs

于 2024-04-12 13:21:36 首次发布

本文链接：https://blog.csdn.net/ztllll007/article/details/137676346

版权

本文介绍了如何在Three.js中创建DollyOutZoomIn和DollyInZoomOut类，实现摄像机的外退内进效果，通过计算目标点和当前点的距离调整视场和摄像机位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DollyOutZoomIn

项目参见：

GitHub - LoongZP/threejs-DollyZoom

核心代码

import * as THREE from 'three';
export class DollyZoom {
    // nearPoint, farPoint,targetPos: Vector3
    // targetPos为被观察物体的坐标
    nearPoint
    farPoint
    targetPos
    nearFov    // nearFov[0,90]

    constructor(nPoint, fPoint, tPos, nFov) {
        this.nearPoint = nPoint;
        this.farPoint = fPoint;
        this.targetPos = tPos;
        this.nearFov = nFov;
        this._init()
    }

    _line1
    _targetPoint
    _distance2
    _x
    _init() {
        this._line1 = new THREE.Line3(this.nearPoint, this.farPoint);
        let targetPosProgress = this._line1.closestPointToPoint