# Zjbcool-css3d

这类拼图能够将网页嵌入3D场景,比如,你可以把B站视频嵌入到3D场景中,将B站作为免费的视频托管平台。

css3d能够将任何页面元素嵌入3D场景,包括:文字、图片、视频、网站。

提示

CSS3D插件需要开启背景透明。在Init选项卡中,使用configure application拼图,勾选背景透明。

mark

# create css3d object

创建CSS3D物体,它能够将一个<iframe>元素绑定到一个三维面片上,从而嵌入到Verge3D场景中。

mark

参数:

  • name: CSS3D物体名称
  • iframe: 要嵌入的<iframe>元素
  • width: iframe和三维面片的宽度
  • height: iframe和三维面片的高度
  • scale: 缩放系数,仅控制三维面片的缩放
  • render: 渲染模式,单面渲染和双面渲染
  • display: 显示模式,最终渲染、固有色、线框

如果想把B站或youtube视频嵌入到3D场景,只需将视频嵌入代码复制进iframe参数。视频嵌入代码可以从视频的分享链接获得。

mark

<iframe src="//player.bilibili.com/player.html?aid=15986493&bvid=BV16x411E7fY&cid=26085431&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
1

# remove css3d object

删除已经创建的css3d物体。

mark

# iframe controls

该拼图可以开启/关闭iframe嵌套页面的交互。

mark

以下拼图可以实现鼠标移入时开启交互;移出时自动关闭。移动设备需要使用when clicked事件。

mark

# 更新

# 20210210 v 1.4

  • 重写了整个插件,精减了拼图数量,移除load scriptcreate scenecss3d render拼图;
  • 改进create css3d object拼图,增加了display参数,便于在预览窗口内显示;
  • css3d物体现在支持when hoved事件;
  • 交互控制拼图更名为iframe controls
  • 支持verge3d 3.6+

# 20210119 v 1.3

  • 不再需要在三维软件中单独创建“面片”,而是由create css3d object拼图生成;
  • create css3d object拼图改进:
    • 增加width、height、scale参数,用于控制css3d物体的尺寸和缩放;
    • 可以使用物体分类下的hide/show拼图显示/隐藏css3d物体;
    • 可以使用set transform拼图和copy transform控制css3d的位置和旋转。
  • 移除render css3d拼图和update css3d transform拼图

# 20201128 v 1.2

支持Verge3D 3.6版新增的创建物体(create object)拼图,CSS3D插件可以通过该拼图创建的面片(Plane)物体生成CSS3D物体。

# 20201128 v 1.1

Blender3dsMax (包括Maya)中不再需要改变坐标轴,但是导出前仍然需要应用缩放。

# 20201124 v 1.0

CSS3D 插件1.0版发布。

上次更新: 2021-2-10 11:31:53