自有项目Iframe嵌入ThingJS物联网可视化项目代码解析

最新推荐文章于 2022-12-23 14:38:28 发布

人生苦短不愿停

最新推荐文章于 2022-12-23 14:38:28 发布

阅读量931

点赞数 1

分类专栏： webgl threejs 物联网文章标签：可视化 html5 物联网

本文链接：https://blog.csdn.net/qq_42739428/article/details/108117790

版权

自有项目想添加三维场景怎么处理最简单？

有时候为了提升项目的逼格，我们会给项目增加一些没有太大用处但是看起来就很高大上的一些东西，最常见的其实就是前端样式，你说样式作用大不大？告诉你，没有一个好的样式，再牛的项目也无法得到大众的买单，这个正常程序员都知道使用一些前端框架、引用前端样式等。在这里就给大家分享一个让自己项目看起来更加“高大上”的方法！
我们可以在项目中添加一个可以操作的三维可视化场景比如能够进出楼层或者实现小车沿着轨迹运动之类的，大家感觉这个制作起来很难么？不！在ThingJS在线开发平台直接保存官方示例，然后分享链接就可以IFrame的方式直接嵌入到我们自己的项目中去了，这里为大家分享的是另一种方法，在我们的项目中，获取要调用的方法名传递到三维项目中去，去调用相应方法！
首先我们得有一个前端页面用于使用Iframe标签去引用：
代码如下：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>ThingJS的 Iframe演示</title>

</head>

<body>

    <div width="800px">
        <button style="position: absolute;top: 15px;left: 15px;width: 75px;" onclick="flyToCar()">飞到小车</button>
        <button style="position: absolute;top: 45px;left: 15px;width: 75px;"
            onclick="flyToBack()">返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回</button>
        <iframe id="testMsg" style="width: 600px;height: 400px;"
            src='https://www.thingjs.com/s/aa25e09eae2f73e6ce080d73?params=105b0f77fd24654d4eebc434e9'><

最低0.47元/天解锁文章

人生苦短不愿停

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
自有项目Iframe嵌入ThingJS物联网可视化项目代码解析

自有项目想添加三维场景怎么处理最简单？有时候为了提升项目的逼格，我们会给项目增加一些没有太大用处但是看起来就很高大上的一些东西，最常见的其实就是前端样式，你说样式作用大不大？告诉你，没有一个好的样式，再牛的项目也无法得到大众的买单，这个正常程序员都知道使用一些前端框架、引用前端样式等。在这里就给大家分享一个让自己项目看起来更加“高大上”的方法！我们可以在项目中添加一个可以操作的三维可视化场景比如能够进出楼层或者实现小车沿着轨迹运动之类的，大家感觉这个制作起来很难么？不！在ThingJS在线开发平台直接保
复制链接

扫一扫