# Zjbcool-css3d
这类拼图能够将网页嵌入3D场景，比如，你可以把B站/YouTube视频嵌入到3D场景中，将视频站作为免费的视频托管平台。
css3d支持任何HTML元素和Web页面。
提示
CSS3D插件需要开启背景透明。在Init选项卡中，使用configure application拼图，勾选背景透明。
# create css3d object
创建CSS3D物体，CSS3D物体就是三维面片+DOM元素，从而实现将HTML嵌入到Verge3D场景中。
参数：
- name: CSS3D物体名称
- element: 要嵌入的
DOM元素（<div><iframe><img>...） - background: CSS3D物体的背景，默认为透明
- width(px): DOM元素和三维面片的宽度，单位为像素
- height(px): DOM元素和三维面片的高度，单位为像素
- scale: 缩放系数，仅控制三维面片的缩放
- render: 渲染模式，单面渲染和双面渲染
- display: 显示模式，渲染、固有色、线框
- YouTube Iframe API高级选项：
- enable"YouTube on ready"slot：当YouTube视频加载完成时，执行这个插槽中的拼图
- enable"YouTube on state change"slot：当播放器状态改变时，执行这个插槽中的拼图
如果想把B站或youtube视频嵌入到3D场景，只需将视频嵌入代码复制进element参数。视频嵌入代码可以从视频的分享链接获得。
<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>
# remove css3d object
删除已经创建的css3d物体。
# css3d controls
该拼图用于控制是否开启css3d页面的交互。
选项：
- enable：启用控制
- disable：禁用控制
# css3d event
为CSS3D物体的DOM元素添加事件监听。一旦触发事件，就会执行do插槽中的拼图。
# get css3d container
获取css3d画布所在容器的ID。
<div id='css3d-container'></div>
# YouTube Iframe API
为css3d物体的dom元素启用YouTube Iframe API (opens new window)，用于实现在YouTube播放器外部控制视频播放。在create css3d object拼图之前创建。
# load YouTube Video
根据YouTube视频的ID加载该视频。enable controls 控制是否显示播放器控件。默认关闭。
# playback Controls
YouTube播放器的回放控制。
# playback Status
获取当前视频的播放状态。
- -1 – 未开始
- 0 – 已结束
- 1 – 正在播放
- 2 – 已暂停
- 3 – 正在缓冲
- 5 – 已插入视频
# YouTube Errors
在本地开发环境下使用YouTube Iframe AIP 可能会报错：
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').
原因是本地开发环境是http协议，YouTube是https协议，这是协议不同造成的。详见MDN Window.postMessage() (opens new window)。
可以使用caddy (opens new window)在本地开发环境下实现https协议。
# 更新
# v2.0 20210303
- 支持YouTube Iframe API，新增相关拼图
- create css3d obj拼图添加YouTube高级选项;新增background参数;为display参数的solid选项添加color参数
- 新增css3d event拼图，可以为css3d物体的dom元素添加html事件
- 新增css3d container拼图
# v1.4 2021021
- 重写了整个插件，精减了拼图数量，移除
load script、create scene、css3d render拼图; - 改进create css3d object拼图，增加了display参数，便于在预览窗口内显示;
- css3d物体现在支持when hoved事件；
- 交互控制拼图更名为iframe controls；
- 支持verge3d 3.6+
# v1.3 20210119
- 不再需要在三维软件中单独创建“面片”，而是由create css3d object拼图生成；
- create css3d object拼图改进：
- 增加width、height、scale参数，用于控制css3d物体的尺寸和缩放；
- 可以使用物体分类下的hide/show拼图显示/隐藏css3d物体；
- 可以使用set transform拼图和copy transform控制css3d的位置和旋转。
- 移除
render css3d拼图和update css3d transform拼图
# v1.2 20201128
支持Verge3D 3.6版新增的创建物体（create object）拼图，CSS3D插件可以通过该拼图创建的面片(Plane)物体生成CSS3D物体。
# v1.1 20201128
Blender、3dsMax (包括Maya)中不再需要改变坐标轴，但是导出前仍然需要应用缩放。
# v1.0 20201124
CSS3D 插件1.0版发布。