如何在Autodesk Forge中動態更新THREE.js PointCloud覆蓋

Question

我正在為Autodesk Forge開發標記擴展。 我希望能夠單擊一個位置，並使標記動態顯示為點雲。

下面是擴展的負載函數。 第一次加載點雲時，它可以工作，但是當我嘗試向幾何圖形添加頂點並進行渲染時，不會出現新的點。 但是，光線投射器可以檢測到該點。 我知道這一點是因為當我第二次單擊某個位置時，會收到一條日志，告訴我光線投射器攔截了點雲（即使該點未在屏幕上呈現）。

ClickableMarkup.prototype.load = function () {
    const self = this;

    /* Initizialize */
    console.log('Start loading clickableMarkup extension');
    this.camera = this.viewer.navigation.getCamera(); // Save camera instance
    console.log(this.camera);
    this.initCameraInfo(); // Populate cameraInfo array
    this.overlayManager.addScene(this.sceneName); // Add scene to overlay manager
    this.scene = this.viewer.impl.overlayScenes[this.sceneName].scene; // Save reference to the scene

    /* Create pointCloud */
    this.geometry = new THREE.Geometry();
    this.cameraInfo.forEach( function(e) {
            // console.log(`   > add ${e.position}`)
            self.geometry.vertices.push(e.position);
        }
    );
    this.geometry.computeBoundingBox();
    // const material = new THREE.PointCloudMaterial( { size: 50, color: 0Xff0000, opacity: 100, sizeAttenuation: true } );
    const texture = THREE.ImageUtils.loadTexture(this.pointCloudTextureURL);
    this.material = new THREE.ShaderMaterial({
        vertexColors: THREE.VertexColors,
        opacity: this.prefs.POINT_CLOUD_OPACITY,
        fragmentShader: this.fragmentShader,
        vertexShader: this.vertexShader,
        depthWrite: true,
        depthTest: true,
        uniforms: {
            size: {type: "f", value: self.size},
            tex: {type: "t", value: texture}
        }
    });
    this.points = new THREE.PointCloud( this.geometry, this.material );

    /* Add the pointcloud to the scene */
    this.overlayManager.addMesh(this.points, this.sceneName); /* >>> THIS WORKS  SO IT RENDERS THE POINTCLOUD AT THE BEGINNING OF LAOD <<< */

    /* Set up event listeners */
    document.addEventListener('click', event => {
        event.preventDefault();

        this.setRaycasterIntersects(event); // Fill this.intersects with pointcloud indices that are currently selected

        if (this.intersects.length > 0) {
            console.log('Raycaster hit index: ' + this.hitIndex + JSON.stringify(this.intersects[0]));
            this.setCameraView(this.hitIndex);
        } else {
            /*  >>>>  THE PROBLEM IS HERE - IT DOESN'T RENDER THE NEW POINTCLOUD POINTS <<<< */
            const mousePos = this.screenToWorld(event);
            if (mousePos) { // Only add point to scene if the user clicked on the building
                const vertexMousePos = new THREE.Vector3(mousePos.x, mousePos.y, mousePos.z);
                this.geometry.vertices.push(vertexMousePos);
                this.geometry.verticesNeedUpdate = true;
                this.geometry.computeBoundingBox();

                this.points = new THREE.PointCloud(this.geometry, this.material);
                this.overlayManager.addMesh(this.points, this.sceneName);
                this.viewer.impl.invalidate(true); // Render the scene again
            }
        }

    }, false);

    console.log('ClickableMarkup extension is loaded!');
    return true;
};

如何制作新的Pointcloud頂點渲染？

Answer 1

看來問題代碼中可能有錯字。

this.overlayManager.addMesh(this.points, 'this.sceneName');

應該是

this.overlayManager.addMesh(this.points, this.sceneName);