使用三个 js 在几何创建的 Autodesk 查看器上将相机从 A 点移动到 B 点

Posted 2023-03-16

【中文标题】使用三个 js 在几何创建的 Autodesk 查看器上将相机从 A 点移动到 B 点

【英文标题】：Moving Camera from Point A to Point B On the Geometry Created Autodesk Viewer using three js

【发布时间】：2021-02-12 21:24:15

【问题描述】：

我正在尝试将我的相机视图状态从 A 点移动到 B 点。 为此，我在 Autodesk 查看器中使用 LineDashedMaterial 创建了一条路径，我能够创建并显示从 A 点到 B 点的线。

这里是代码

geometry = new THREE.Geometry();
geometry.vertices.push(getBoundingBox([2112]).center(),
                    getBoundingBox([2109]).center());
material = new THREE.LineDashedMaterial(color: 0xFF0000,
                                          dashSize: 3,
                                          gapSize: 1,
                                          transparent: true,
                                          depthWrite: false,
                                          depthTest: true,
                                          );

checkLineDistance  = geometry.computeLineDistances();
geometry.lineDistancesNeedUpdate = true;
NOP_VIEWER.impl.matman().addMaterial('material', material, true);
line= new THREE.Line(geometry, material);   
NOP_VIEWER.impl.sceneAfter.skipDepthTarget = true;
NOP_VIEWER.impl.sceneAfter.skipIdTarget = true;                                       
NOP_VIEWER.impl.sceneAfter.add(line);

这给我带来了：

现在我遇到了一个问题，我想根据我的线/路径的方向（A 到 B）导航或移动我的相机。 我现在正在使用示例模型，认为这将是一栋有房间 A 和 B 的建筑物。

2.有什么方法可以从线经过的地方获取所有矢量我基本上需要位置、目标和 upVector 来进行相机移动

3.有什么方法可以在forge viewer api中使用dbid获取从A到B的所有向量或点

4.我尝试使用 forge viewer 安装 Three.js，但似乎很难。

This 是我实际上想要实现的，但我需要在伪造查看器中显示视口而不是移动几何体

【参考方案1】：

Forge Viewer 中的导航系统支持使用setRequestTransition 方法将平滑、线性插值到自定义相机状态，例如，如下所示：

let newCameraPosition = new THREE.Vector3(1.0, 2.0, 3.0);
let newCameraTarget = new THREE.Vector3(4.0, 5.0, 6.0);
let fov = viewer.navigation.getHorizontalFov();
viewer.navigation.setRequestTransition(true, newCameraPosition, newCameraTarget, fov);

此过渡的默认持续时间为 1 秒，因此，如果您有一个路径的顶点列表，您希望相机跟随，您可以这样做：

function followPath(viewer, vertices, delayMs) 
    let index = 0;
    let timer = setInterval(function () 
        if (index >= vertices.length) 
            clearInterval(timer);
            return;
        
        let newPos = vertices[index];
        let newTarget = vertices[index + 1];
        if (!newTarget) 
            let oldPos = viewer.navigation.getPosition();
            let oldTarget = viewer.navigation.getTarget();
            newTarget = new THREE.Vector3(
                newPos.x + (oldTarget.x - oldPos.x),
                newPos.y + (oldTarget.y - oldPos.y),
                newPos.z + (oldTarget.z - oldPos.z)
            );
        
        viewer.navigation.setRequestTransition(true, newPos, newTarget, viewer.navigation.getHorizontalFov());
        index++;
    , delayMs);


followPath(viewer, [
    new THREE.Vector3(10, 20, 30),
    new THREE.Vector3(40, 50, 60),
    new THREE.Vector3(70, 80, 90),
    new THREE.Vector3(0, 10, 0)
], 2000);

如果您需要更大的灵活性（例如，围绕曲线进行插值、自定义缓入/缓出等），您仍然可以使用 three.js 或其他动画库，并简单地控制相机位置并自己瞄准。

【讨论】：

感谢 Petr 这对我控制相机有更多帮助，我必须传递 vector3 数组，这是我正在寻找的问题，它可以获取点 A 到 B 之间的所有矢量点，以便相机位置现在可以通过该路径 相机直接转到 B 点并跳过所有元素，例如 Cabin A 到 Cabin D 所以在导航到点 DI 时有 Cabin B 和 Cabin C

因此，我创建了一条从 A 点到 B 点的线，我需要遵循线的路径，或者你可以说出线的所有向量

我不确定您所说的“A 舱”或“D 舱”是什么意思？在您的屏幕截图中，您只需在两个端点之间显示一条直线。沿线还有其他“站点”吗？

是的，我发布了一个示例屏幕截图。让我向您解释一下，我正在寻找一种解决方案，它可以驱使我通过一条路径假设如果我在 1 楼并且我正在寻找电梯，它应该使用摄像头导航向我显示到达电梯的方向。这就是我创建线几何的原因

你在上一篇文章中提到了这个问题？你用过revit api吗？如果你使用revit api你可以通过方法Tessellate()获取路径上的点：revitapidocs.com/2020/f95f3199-3251-c708-c5a3-a0e9ef95ecfa.htm当你得到点时，你可以正常，....