# Zjbcool-css3d
该插件用于在三维面片中嵌入网站、视频或地图。
EN
This plugin used for embedding websites, videos, or maps on surfaces of 3D objects.
- create css3d object
- remove css3d object
- css3d controls
- when hovered css3d
- when clicked css3d
- set app background
- load YouTube Iframe API
- load YouTube Video
- get YouTube player prop
- YouTube Player playback Controls
- YouTube API Errors
- load Vimeo Player API
- load Vimeo Video
- get Vimeo Player prop
- Vimeo Player playback Controls
TIP
插件需要开启透明背景。在Init选项卡中,勾选configure application拼图的透明背景选项。
EN
The plugin needs to enable transparency background. In the init tab, check the transparency background option of the configure application puzzle.
# create css3d object
该拼图用于创建一个新的CSS3D物体。CSS3D物体由一个三维面片和一个HTML DOM元素组成。
EN
The puzzle is used to create a new CSS3D object. A CSS3D object consists of a Plane object and an HTML DOM element.
参数:
- name: 名字
- element: 要嵌入的
HTML DOM
元素(如<div>
<iframe>
<img>
) - background: CSS3D物体的背景,默认为透明
- width(px): DOM元素和三维面片的宽度,单位为像素
- height(px): DOM元素和三维面片的高度,单位为像素
- scale: 缩放系数,仅控制三维面片的缩放
- render: 渲染模式,单面渲染或双面渲染
- display: 显示模式,渲染、固有色、线框
如果想把B站、YouTube、Vimeo视频嵌入到3D场景,只需将视频嵌入代码复制进element参数。
EN
Parameters:
- name: the name of the CSS3D object
- element: the 'HTML DOM' element to embed (e.g '< div >' < iframe > '< img >')
- background: the background of the CSS3D object, default is 'transparent'
- width(px): the width of HTML DOM element and the Plane object, in pixels
- height(px): the heiht of HTML DOM element and the Plane object, in pixels
- scale: Scaling factor, which controls only the scaling of the Plane object
- render: Rendering mode - 'frontSided' or 'doubleSided'
- display: Display mode - render, solid, wireframe
If you want to embed Bilibili, youtube and Vimeo videos into 3D scene, you only need to copy the video embed code into the element parameter.
<!-- Bilibili -->
<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>
<!-- YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/nBVdcO0VTAc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Vimeo -->
<iframe src="https://player.vimeo.com/video/246627710" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
2
3
4
5
6
# remove css3d object
删除CSS3D物体。
EN
Remove a CSS3D object.
# css3d controls
该拼图用于控制是否开启嵌入页面的交互。
选项:
- enable:启用控制
- disable:禁用控制
EN
This puzzle is used to control whether the embedded web page interaction is enabled or not.
Option:
- enable:enable interaction
- disable: disable interaction
# when hovered css3d
为CSS3D物体添加经过事件。当指针移入时,就会执行over:do插槽中的拼图;当指针移出时,执行out:do插槽中的拼图。不支持组,物体列表和all object拼图。
EN
Add 'hover' event listener to css3d object. When the pointer moves in, execute the puzzles in the over:do slot; When the pointer moves out, execute the puzzles in the out:do slot. Do not support group, object list and all object puzzle.
# when clicked css3d
为CSS3D物体添加点击事件。由于CSS3D物体由一个三维面片和一个HTML DOM元素组成。当点击一个CSS3D物体时,目标可能是三维面片或者是HTML DOM元素。当是三维面片时,执行is obj:do插槽下的拼图;当是HTML DOM元素时,执行is elem:do插槽下的拼图。不支持组,物体列表和all object拼图。
如果你只需要点击三维面片,可以用Events分类下的when clicked拼图代替这个拼图使用。
EN
Add 'click' event listener to CSS3D object. Because a CSS3D object consists of a Plane object and an HTML DOM element. When you click on a CSS3D object, the target may be a Plane object or an HTML DOM element. When it is a Plane object, execute the puzzles in the is obj:do slot; When it is an HTML DOM element, execute the puzzles in the is elem:do slot. Do not support group, object list and all object puzzle.
If you only need to click the Plane object, you can use the when clicked (opens new window) puzzle in Events category instead of this puzzle.
# set app background
设置应用程序背景,支持CSS格式输入,如 #AA00FF。
EN
set verge app's background, support CSS style string, such as #AA00FF.
# load YouTube Iframe API
为嵌入了YouTube视频的CSS3D物体启用YouTube Iframe API (opens new window),用于实现在YouTube播放器外部控制视频回放。当加载完API后,会执行"do:"插槽中的拼图,你可以在这里使用create css3d obj拼图创建新的YouTube播放器。
EN
Enable 'YouTube Iframe API' for the CSS3D object embedded YouTube video. It is used to control the video playback outside the YouTube player. Once the API loaded, the puzzles in the "do:" slot will be executed. You can use the create css3d obj puzzle here to create a new YouTube player.
# load YouTube Video
通过ID加载YouTube视频。enable controls 控制是否显示播放器控件。默认关闭。用于create css3d obj拼图的element参数。
EN
Load video by the ID of the YouTube video. enable controls controls whether the player control is displayed. Default is off. Used on the element parameter of the create css3d obj puzzle.
# get YouTube player prop
获取播放器属性:
- state: 返回播放器状态,返回值分别为:
- -1 – 未开始
- 0 – 已结束
- 1 – 正在播放
- 2 – 已暂停
- 3 – 正在缓冲
- 5 – 已插入视频
- currentTime: 当前时间
- volume: 音量
- isMuted: 是否静音
- duration: 视频时长
EN
Returns the property of the player:
- state: Returns the state of the player. Possible values are:
- -1 – unstarted
- 0 – ended
- 1 – playing
- 2 – paused
- 3 – buffering
- 5 – video cued
- currentTime: Get the playback position of a video
- volume: Get the volume level of a player
- isMuted: Get whether the player is muted
- duration: Get the duration of a video
# YouTube Player playback Controls
YouTube播放器的回放控制。
EN
Playback control of YouTube player.
# YouTube API Errors
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').
如果得到上述报错,请参考MDN Window.postMessage() (opens new window)。可以使用caddy (opens new window)实现本地HTTPS服务器。
EN
If you get the error above, please refer to MDN Window.postMessage() (opens new window). You can use caddy (opens new window) to implement the HTTPS server in the local development environment.
# load Vimeo Player API
为嵌入了Vimeo视频的CSS3D物体启用Vimeo Player API (opens new window),用于实现在Vimeo播放器外部控制视频回放。当加载完API后,会执行"do:"插槽中的拼图,你可以在这里使用create css3d obj拼图创建新的YouTube播放器。
EN
Enable 'Vimeo Player API' for the CSS3D object embedded Vimeo video. It is used to control the video playback outside the Vimeo player. Once the API loaded, the puzzles in the "do:" slot will be executed. You can use the create css3d obj puzzle here to create a new YouTube player.
# load Vimeo Video
通过ID加载Vimeo视频。enable controls 控制是否显示播放器控件。默认关闭。用于create css3d obj拼图的element参数。
EN
Load video by the ID of the Vimeo video. enable controls controls whether the player control is displayed. Default is off. Used on the element parameter of the create css3d obj puzzle.
# get Vimeo Player prop
获取Vimeo播放器属性:
- currentTime:当前时间
- duration:视频时长
- loopState:是否循环,默认为false
- paused:是否暂停
- volume: 音量
该拼图返回一个Promise (opens new window)对象,你需要使用Advanced分类下的wait promise拼图获取它的返回值。
EN
Returns the property of the player:
- currentTime:Get the playback position of a video
- duration:Get the duration of a video
- loopState:Get the loop state of a player
- paused:Get the pause state of a player
- volume: Get the volume level of a player
The puzzle returns a Promise (opens new window) object, you should use the wait promise (opens new window) puzzle in Advanced category to get the value.
# Vimeo Player playback Controls
Vimeo播放器的回放控制:
- play: 播放
- pause: 暂停
- currentTime: 定位播放器位置,以秒为单位。
- loop: 设置循环播放。当为true时,播放器完成播放后会立即从头播放。
- volume: 设置播放器音量,范围从0到1。
EN
Playback control of Vimeo player:
- play: play a video
- pause: pause a video
- currentTime: sets the current playback position in seconds.
- loop: sets the loop state of the player. When the loop state is true, playback resumes at the beginning of the video immediately after the video ends.
- volume: sets the volume level of the player on a scale from 0 to 1.
例如,我们可以使用如下拼图实现Vimeo播放器快进功能:
EN
e.g, we can implement the 'seek to' feature of Vimeo player using the following puzzles: