用HT for Web实现3D列车行进动画

最新推荐文章于 2024-08-01 11:18:55 发布

我辈岂是蓬蒿人225

最新推荐文章于 2024-08-01 11:18:55 发布

阅读量5.2k

点赞数 1

分类专栏：前端文章标签： HT for Web hightop

本文链接：https://blog.csdn.net/shenjuntao520/article/details/100155817

版权

本文介绍如何利用HT for Web的图形引擎和WebGL技术构建3D列车行进动画。首先引入必要的js文件，然后进行图像初始化，设置DataModel和Graph3DView。接着，通过新建ht.Node并设定其位置、大小和旋转来创建模型。通过setAnimation方法为车身和轮子添加平移和旋转动画，最后启动全局动画定时器使动画运行。

摘要由CSDN通过智能技术生成

HT for Web有一套强大的基于WebGL技术的图形引擎，可以用js代码实现3D图像的建模和动画。现在用HT for Web来实现一个3D列车行进的动画来带大家了解一下如何使用这套框架。

    <script src="js/ht.js"></script>
    <script src="js/ht-animation.js"></script>
    <script src="js/texture.js"></script>

首先需要引入如图的3个js文件。ht.js是基础库，ht-animation.js是动画库,texture.js是图像素材库，是用户自己定义的。

ht.Default.setImage('train', 128, 128, 'img/train.png');
ht.Default.setImage('wheels', 128, 128, 'img/wheels.png');

这里定义了两组图片，第一个参数是name，后面引用的时候就是用的它，第二第三分别是宽度高度，第四个参数是图片路径。

初始化工作：

            dataModel = new ht.DataModel();
            var g3d = new ht.graph3d.Graph3dView(dataModel);

            var view = g3d.getView();
            view.className = 'main';
            document.body.appendChild(view);
            window.addEventListener('resize', function (e) {
                g3d.invalidate();
            }, false);
            g3d.setEye([0, 300, 1000]);
            g3d.enableToolTip();
            g3d.getToolTip = function(e){
                var data = this.getDataAt(e);
                if(data){
                    return '<pre>' + JSON.stringify(data