Verge3D教程和Web3D开发

在Web3D程序中添加视频注释

实现如下效果:

原理:

使用Verge3D开发Web3D应用程序支持HTML元素绑定到三维模型上,可以利用bind elem拼图实现。

步骤:

1.创建一个新项目。

2.在三维场景中添加一个名为 Empty 的空物体,导出.glTF

3.在app.html中添加如下代码:

<body>
  <div id="container"></div>
  <div id="fullscreen_button" class="fullscreen-open" title="Toggle fullscreen mode"></div>
  <iframe id="video_texture" src="//player.bilibili.com/player.html?aid=46016694&cid=80624139&page=1" scrolling="no"  frameborder="" framespacing="0" allowfullscreen="true" width="300px" height="200px"> </iframe>
</body>

其中iframe标签为将要插入的视频地址,注意给这个iframe一个ID。

4.打开拼图编辑器,添加如下拼图。

5.保存,执行,查看效果。补充:你可以先让视频隐藏,当点击物体时再显示出来。

zjbcool

zjbcool
关闭菜单