aps-iot-extensions-demo 和动画 Sprite Viewables 的问题：Sprite 无法自动移动

Question

我是台湾成功大学建筑系的学生。这是我第一次使用 stackoverflow。 Autodesk的工作人员告诉我，我可以来这里询问**Autodesk平台服务**相关的问题。

我目前正在研究如何将人流数据导入到ap中。在平台上。我目前正在使用来自github的aps-iot-extensions-demo和来自官方网站的Animating Sprite Viewables，我尝试了一段时间但无法成功使用官方网站的说明来移动和更改sprites 。我目前正在基于 aps-iot-extensions-demo 进行修改。

我主要参考了以下两个网站： aps-iot-扩展-演示 动画精灵可视项

以下是我主要修改的代码：SensorSpritesExtension.js：

/// import * as Autodesk from "@types/forge-viewer";
import { UIBaseExtension } from './BaseExtension.js';

export const SensorSpritesExtensionID = 'IoT.SensorSprites';
export class SensorSpritesExtension extends UIBaseExtension {
    constructor(viewer, options) {
        super(viewer, options);
        this._onSpriteClicked = this._onSpriteClicked.bind(this);
        this._dbIdToSensorId = new Map();
        this.update = this.update.bind(this);
    }
    onDataViewChanged(oldDataView, newDataView) { this.update(); }
    update() {
        if (this.isActive()) { // TODO: update @types/forge-viewer
            this._refreshSprites();
        }
    }
    async load() {
        await super.load();
        this._style = this._createVisualStyle();
        this.viewer.addEventListener(Autodesk.DataVisualization.Core.MOUSE_CLICK, this._onSpriteClicked);
        
        console.log(`${SensorSpritesExtensionID} extension loaded.`);
        return true;
    }
    unload() {
        super.unload();
        this._style = undefined;
        this.viewer.removeEventListener(Autodesk.DataVisualization.Core.MOUSE_CLICK, this._onSpriteClicked);
        console.log(`${SensorSpritesExtensionID} extension unloaded.`);
        return true;
    }
    activate() {
        super.activate();
        this._refreshSprites();
        this._test(); 
        console.log('activate method has been called and _test method invoked'); // 确认activate方法被调用
        return true;
    }
    deactivate() {
        super.deactivate();
        this._dataVizExt.removeAllViewables();
        return true;
    }
   
    onToolbarCreated() {
        this.createToolbarButton('iot-sensor-sprites-btn', 'IoT Sensor Sprites', 'https://img.icons8.com/ios-filled/50/000000/iot-sensor.png'); // <a href="https://icons8.com/icon/61307/iot-sensor">IoT Sensor icon by Icons8</a>
    }
    _onSpriteClicked(ev) {
        if (this.onSensorClicked) {
            this.onSensorClicked(this._dbIdToSensorId.get(ev.dbId));
        }
    }
    _refreshSprites() {
        this._dataVizExt.removeAllViewables();
        if (!this.dataView) {
            return;
        }


        const viewableData = new Autodesk.DataVisualization.Core.ViewableData();
        viewableData.spriteSize = 32;

        this._dbIdToSensorId.clear();
        let dbid = 1000000;

        for (const [sensorId, sensor] of this.dataView.getSensors().entries()) {
            this._dbIdToSensorId.set(dbid, sensorId);
           
            const { x, y, z } = sensor.location;
            const style = this._style;
            const viewable = new Autodesk.DataVisualization.Core.SpriteViewable(new THREE.Vector3(x, y, z), style, dbid++);

            viewableData.addViewable(viewable);
        }

        viewableData.finish().then(() => {
            this._dataVizExt.addViewables(viewableData);
        });
        
    }

    
    _createVisualStyle() {  
        const DataVizCore = Autodesk.DataVisualization.Core;
        const viewableType = DataVizCore.ViewableType.SPRITE;
        const spriteColor = new THREE.Color(0xffffff);
//https://img.icons8.com/color/48/000000/electrical-sensor.png
        const spriteIconUrl = 'https://img.icons8.com/color/48/000000/electrical-sensor.png' ; // <a href="https://icons8.com/icon/12096/proximity-sensor">Proximity Sensor icon by Icons8</a>
        
        return new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIconUrl);
    }

    _test() {
        console.log('_test method has been called');     
        let spritesToUpdate = this._dataVizExt.viewableData.viewables.map((v) => v.dbId);
        let moveDistance = 20; 
        let currentPosition = -30; 
        let direction = 1; 
    
        const updatePosition = () => {
            currentPosition += (moveDistance * direction);
            if (currentPosition <= -50 || currentPosition >= -30) {
                direction *= -1; 
            }
    
            this._dataVizExt.invalidateViewables(spritesToUpdate, (viewable) => {
                let newPosition = new THREE.Vector3(currentPosition, viewable.position.y, viewable.position.z);
                return { position: newPosition };
            });
    
            console.log(`Sprites updated to position X: ${currentPosition}`);
        };
    
        setInterval(updatePosition, 200); //
    }
}

我目前的想法是，在db.json最初创建精灵后，SensorSpritesExtension.js中的程序每200毫秒更新精灵的位置。我目前正在使用来回运动作为测试效果，但我还不知道。是什么原因？我通过ChatGPT4.0修改了很多次，也改变了很多写法，但都没有成功让精灵自动移动

我想请求您的帮助，谢谢。

Answer 1

您需要在每个时间间隔给出新的位置。我能够使用以下代码为传感器设置动画：

        viewableData.finish().then(() => {
        this._dataVizExt.addViewables(viewableData);
        let spritesToUpdate = this._dataVizExt.viewableData.viewables.map((v) => v.dbId);
        console.log(spritesToUpdate)
        let xpos = 0;
        setInterval(() => {
            xpos=xpos+0.2;
            this._dataVizExt.invalidateViewables(spritesToUpdate, (viewable) => {
            return {
                // Move the viewable to a new location.
                position: { x: (viewable._position.x+xpos), y: viewable._position.y, z: viewable._position.z },
            };
        });
        }, 1000);
    });