宅家呗

# Zjbcool-css3d

该插件用于在三维面片中嵌入网站、视频或地图。

EN

This plugin used for embedding websites, videos, or maps on surfaces of 3D objects.

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.

mark

# 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.

mark

参数：

  • 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>
1
2
3
4
5
6

# remove css3d object

删除CSS3D物体。

EN

Remove a CSS3D object.

mark

# 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

mark

# 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.

mark

# 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.

mark

# set app background

设置应用程序背景，支持CSS格式输入，如 #AA00FF。

EN

set verge app's background, support CSS style string, such as #AA00FF.

mark

# 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.

mark

# 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.

mark

# 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

mark

# YouTube Player playback Controls

YouTube播放器的回放控制。

EN

Playback control of YouTube player.

mark

# YouTube API Errors

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').
1

如果得到上述报错，请参考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.

mark

# 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.

mark

# get Vimeo Player prop

获取Vimeo播放器属性：

  • currentTime：当前时间
  • duration：视频时长
  • loopState：是否循环，默认为false
  • paused：是否暂停
  • volume: 音量

该拼图返回一个Promise (opens new window)对象，你需要使用Advanced分类下的wait promise拼图获取它的返回值。

img

mark

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。

mark

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:

mark

上次更新: 2021/8/2 下午3:37:13

← Zjbcool-virtual-joystick →