# Zjbcool-css3d

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

css3d支持任何HTML元素和Web页面。

提示

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

mark

# create css3d object

创建CSS3D物体,CSS3D物体就是三维面片+DOM元素,从而实现将HTML嵌入到Verge3D场景中。

mark

参数:

  • 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参数。视频嵌入代码可以从视频的分享链接获得。

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

# css3d controls

该拼图用于控制是否开启css3d页面的交互。

选项:

  • enable:启用控制
  • disable:禁用控制

mark

# css3d event

为CSS3D物体的DOM元素添加事件监听。一旦触发事件,就会执行do插槽中的拼图。

mark

# get css3d container

获取css3d画布所在容器的ID。

<div id='css3d-container'></div>
1

mark

# YouTube Iframe API

为css3d物体的dom元素启用YouTube Iframe API (opens new window),用于实现在YouTube播放器外部控制视频播放。在create css3d object拼图之前创建。

mark

# load YouTube Video

根据YouTube视频的ID加载该视频。enable controls 控制是否显示播放器控件。默认关闭。

mark

# playback Controls

YouTube播放器的回放控制。

mark

# playback Status

获取当前视频的播放状态。

  • -1 – 未开始
  • 0 – 已结束
  • 1 – 正在播放
  • 2 – 已暂停
  • 3 – 正在缓冲
  • 5 – 已插入视频

mark

# 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>').
1

原因是本地开发环境是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 scriptcreate scenecss3d 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

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

# v1.0 20201124

CSS3D 插件1.0版发布。

上次更新: 2021-3-3 10:21:13