Question

嗨，我尝试了一些有趣的伪造查看器，将其放置在物联网上。我程序正在反应。

这是我的代码poiExtension.js，在这里，我们用json（x，y，z）调用了所有poi：

    let Autodesk = window.Autodesk;
let THREE = window.THREE;

// Extension Three.js pour afficher des points d'intérêts sous la forme de billboards de taille fixe faisant face à la caméra
// NB: Ne fonctionne bien qu'en mode perspective
class POIExtension extends Autodesk.Viewing.Extension {
    constructor(viewer, options) {
        super();
        this.viewer = viewer;
        var texture = THREE.ImageUtils.loadTexture("img/icone_pointeur.png");
        this.selectedMaterial = new THREE.MeshBasicMaterial( { map: texture, transparent: true, alphaTest: 0.5, color: 0xFF0000 } );
        this.defaultMaterial = new THREE.MeshBasicMaterial( { map: texture, transparent: true, alphaTest: 0.5, color: 0x00FF00 } );
        this.loaded_poi = [];
        this.planeGeometry = new THREE.PlaneGeometry(0.6, 1, 1, 1);
        this.spriteScaleFactor = 0.8;
        this.spriteAltitude = 15.0;
    }

    load () {
        let self = this;
        this.viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT,
            (event) => {
                this.animate(self);
            }
        );
        return true
    }

    unload () {
        return true
    }

    setSettings(settings) {
        const scale = 1.0 / 255.0;
        this.selectedMaterial.color.setRGB(
            settings.selectedPointColor[0] * scale,
            settings.selectedPointColor[1] * scale,
            settings.selectedPointColor[2] * scale);

        this.defaultMaterial.color.setRGB(
                settings.defaultPointColor[0] * scale,
                settings.defaultPointColor[1] * scale,
                settings.defaultPointColor[2] * scale);

        this.spriteScaleFactor = settings.spriteScaleFactor;
        this.spriteAltitude = settings.spriteAltitude;
    }

    clearAllPOI () {
        this.loaded_poi.map((poiParticle) => {
            this.viewer.impl.scene.remove( poiParticle.mesh );
        });
        this.loaded_poi = [];

    }

    createPOI (poi, isSelected) {
        let poiParticle = {
            poi: poi,
            mesh: new THREE.Mesh(this.planeGeometry, isSelected === true ? this.selectedMaterial : this.defaultMaterial)
        }
        this.loaded_poi.push(poiParticle);
        poiParticle.original_position = {
            x: poi.x,
            y: poi.y,
            z: poi.z
        }
        poiParticle.mesh.position.set(poi.x, poi.y, this.spriteAltitude);
        this.viewer.impl.scene.add(poiParticle.mesh);
        this.viewer.impl.sceneUpdated(true);
        this.animate();
    }

    animate() {
        // THIS IS A HUGE HACK REQUIRED BECAUSE SOME STATE IN FORGE I'SNT SET CORRECTLY IN SOME BROWSER
        if (this.hacked === undefined) {
            this.viewer.toolbar._controls[1];
            let menu_1 = this.viewer.toolbar._controls[2];
            if ((menu_1 !== undefined) && (menu_1._controls!== undefined)) {
                let menu_2 = menu_1._controls[0];
                if ((menu_2 !== undefined) && (menu_2.subMenu !== undefined) && (menu_2.subMenu._controls !== undefined)) {
                    menu_2.subMenu._controls[2].onClick();
                    this.hacked = true;
                }
            }
        }
        // END HACK

        this.loaded_poi.map((poiParticle) => {
            var vec = new THREE.Vector3(); 
            var defaultDepth = 10;

            poiParticle.mesh.scale.x = poiParticle.mesh.scale.y = poiParticle.mesh.scale.z = this.spriteScaleFactor * vec.setFromMatrixPosition( poiParticle.mesh.matrixWorld ).sub( this.viewer.impl.camera.position ).length() / defaultDepth;
            poiParticle.mesh.position.set(poiParticle.original_position.x, poiParticle.original_position.y, poiParticle.original_position.z );

            poiParticle.mesh.quaternion.copy( this.viewer.impl.camera.quaternion );
            this.viewer.impl.scene.updateMatrixWorld(true);
        });
    }
}

export default POIExtension;

这是我的poiList.js（右侧的可单击列表）：

    import React, { Component } from 'react';
import './poiList.css';

// Composant react affichant la liste des points d'intérêts
// C'est ce composant qui communique avec l'extension POI
class PoiList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            poi: [],
            selectedPoi: undefined,
            settings: {
                defaultPointColor: [61, 183, 255],
                selectedPointColor: [37, 27, 255],
                defaultPointTransparancy: 0.4,
                spriteScaleFactor: 0.8,
                //altitude par défaut
                spriteAltitude: 15.0
            }
        }; 
    }

    componentDidMount() {                
        fetch('/settings')
            .then(response => {
                if (!response.ok) {
                    console.log(`status ${response.status}`);
                    throw new Error(`status ${response.status}`);
                }
                return response.json();
            })
            .then(json => {
                this.setState({
                    settings: json
                });               

            })
            .catch(e => {
                console.log(`Settings call failed: ${e}`);
                this.setState({
                    message: `Settings call failed: ${e}`
                });
            })
        fetch('/poi')
            .then(response => {
                if (!response.ok) {
                    console.log(`status ${response.status}`);
                    throw new Error(`status ${response.status}`);
                }
                return response.json();
            })
            .then(json => {
                this.setState({
                    poi: json.poi
                });               

            })
            .catch(e => {
                console.log(`POI call failed: ${e}`);
                this.setState({
                    message: `POI call failed: ${e}`
                });
            });
    }

    render() {
        if(this.props.poiExtension !== undefined) {
            this.props.poiExtension.clearAllPOI();
            this.props.poiExtension.setSettings(this.state.settings);
        }
        let self = this;
        let poiList = [];
        let index = 0;
        this.state.poi.map((poi) => {
            if(this.props.poiExtension !== undefined) {
                this.props.poiExtension.createPOI(poi, this.state.selectedPoi === poi);
            }
            let colorState = index % 2 === 1 ? "lightgrey" : "";
            colorState = this.state.selectedPoi === poi ? "selected" : colorState;
            let classC = "poiEntry " + colorState;
            let poiItem = (
                <div className={classC} key={index} onClick={() => {
                    self.setState({
                        selectedPoi: poi,
                    });
                }}>
                    {poi.type} ({poi.x}, {poi.y}, {poi.z})
                </div>
            );
            index++;

            poiList.push(poiItem);
        })

        return(
            <div className="fullscreen">
                <div className="poiTitle">BATIMENT E17</div>
                <div className="poiList">
                    { poiList }
                </div>
            </div>
        );
    }
}

export default PoiList;

我不知道该怎么做...。那么如果有人可以帮助我，我会很高兴的：）

Answer 1

看起来您的问题实际上与Forge或Viewer.js无关，但是...

如果通过“无法单击POI”表示当您单击POI的DIV时没有任何反应（看不到突出显示），则Redux会序列化您的状态，因此您可以测试是否选择了当前selectedPOI不起作用-使用可序列化的密钥（ID字符串等）来标识您的POI：

colorState = this.state.selectedPoi.id === poi.id ? "selected" : colorState;

无法点击我在Forge查看器上放置的POI

1 个答案: