运用WebGL实现机柜的开关门动画

最新推荐文章于 2025-06-14 13:54:19 发布

原创

最新推荐文章于 2025-06-14 13:54:19 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#WebGL #ThingJS #JavaScript

本文详细介绍了如何运用WebGL和ThingJS平台创建机柜的开关门动画。首先，通过CampusBuilder搭建场景并导入机柜模型。接着，在ThingJS平台上加载模型，设置动画事件。然后，创建机柜类，包含开门和关门方法，并添加信息显示。最后，为机柜添加双击开门、单击关门的交互事件，并处理错误。通过这种方式，实现了机柜的交互性和生动性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在 ThingJS 平台上练习了一些常用的动画功能，所以今天写一篇文章来系统的记录一下自己的小收获吧。

第一步，运用CampusBuilder工具搭建一个场景，将所需机柜添加到场景中

CampusBuilder工具可以在 http://www.3dmomoda.com/download/index 下载
在这里插入图片描述
然后将搭建好的模型另存为.tjs格式。

第二步，将模型文件上传到ThingJS平台上加载

http://www.thingjs.com/guide/?m=sample 这是ThingJS平台在线开发的地址
在这里插入图片描述
加载成功后，进入编辑模式，我们先简单的设计一个摄像头飞入的事件，这样会更有立体感。
代码如下：

// 加载场景代码
var app = new THING.App({ 
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/机柜组",
    //背景设置
    "skyBox" :"BlueSky"
});
// 加载场景时加载
app.on ('load', function(){// 摄像机飞行到某位置
    app.camera.flyTo({
        'time': 800,
        'position': [-26.2, 7.8, 4.5],
        'target': [-19.8, -1.8, -5.0],
    });
    ...
})

第三步，创建机柜类

代码如下：

class Cabinet extends THING.Thing {
    constructor(app) {
        super(app);
        this.isCabinet = true;
        this.ui = null;
    }
    ...
｝

此处以class的方式创建机柜是为了体现其复用性，这样以后可能会有类似的需求时可以直接使用。
然后，在类当中，创建开门以及关门的方法添加在机柜类中，代码如下：

// 开门相关
    openDoor() {
        this.playAnimation('open1');
    }
    closeDoor() {
        this.playAnimation('close1');
    }

最低0.47元/天解锁文章

200万优质内容无限畅学