使用三個 js 在幾何創建的 Autodesk 查看器上將相機從 A 點移動到 B 點

Question

我正在嘗試將我的相機視圖狀態從 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.有什么辦法可以從線經過的地方得到所有的向量我基本上需要位置、目標和向上向量來讓我的相機移動

3.有什么辦法可以在forge viewer api中使用dbid獲取從A到B的所有向量或點

4.我嘗試使用偽造查看器放置 Three.js，但似乎很難。

這實際上是我想要實現的，但我需要在偽造查看器中顯示視口而不是移動幾何體

Answer 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 或其他動畫庫，只需控制相機位置和目標即可。