https://www.soft8soft.com/wiki/api.php?action=feedcontributions&user=Zjbcool&feedformat=atomVerge3D Wiki - User contributions [en]2024-03-29T11:39:30ZUser contributionsMediaWiki 1.36.1https://www.soft8soft.com/wiki/index.php?title=CSS3D_plugin&diff=267CSS3D plugin2021-09-14T01:01:31Z<p>Zjbcool: /* get Vimeo Player prop */</p>
<hr />
<div>[[Category:Plugins]]<br />
by [https://zjbcool.com/ Zjbcool]<br />
<br />
This plugin used for embedding websites, videos, or maps on surfaces of 3D objects.<br />
<br />
Video: https://youtu.be/nBVdcO0VTAc<br />
<br />
BuyOnGumroad: https://gumroad.com/l/IpdbDX<br />
<br />
[[File:Css3dplugin.png|frameless|1240x1240px]]<br />
<br />
<br />
<br />
The plugin needs to enable transparency background. In the init tab, check the transparency background option of the configure application puzzle.<br />
<br />
[[File:Css3d-1(3).jpg|frameless|502x502px]]<br />
<br />
=== Puzzles ===<br />
<br />
==== create css3d object ====<br />
The puzzle is used to create a new CSS3D object. A CSS3D object consists of a Plane object and an HTML DOM element.<br />
<br />
[[File:Css3d-2(1).png|frameless|300x300px]]<br />
<br />
Parameters:<br />
<br />
* name: the name of the CSS3D object<br />
* element: the 'HTML DOM' element to embed (e.g '< div >' < iframe > '< img >')<br />
* background: the background of the CSS3D object, default is 'transparent'<br />
* width(px): the width of HTML DOM element and the Plane object, in pixels<br />
* height(px): the heiht of HTML DOM element and the Plane object, in pixels<br />
* scale: Scaling factor, which controls only the scaling of the Plane object<br />
* render: Rendering mode - 'frontSided' or 'doubleSided'<br />
* display: Display mode - render, solid, wireframe<br />
<br />
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.<br />
<!-- Bilibili --><br />
<nowiki><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></nowiki><br />
<nowiki><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></nowiki><br />
<nowiki><iframe src="https://player.vimeo.com/video/246627710" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></nowiki><br />
<br />
==== remove css3d object ====<br />
Remove a CSS3D object.<br />
<br />
[[File:Css3d-3(1).jpg|frameless]]<br />
<br />
==== css3d controls ====<br />
<br />
<br />
<br />
This puzzle is used to control whether the embedded web page interaction is enabled or not.<br />
<br />
Option:<br />
<br />
* enable:enable interaction<br />
* disable: disable interaction<br />
<br />
[[File:Css3d-4(1).png|frameless]]<br />
<br />
==== when hovered css3d ====<br />
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.<br />
<br />
[[File:Css3d-5(1).png|frameless|655x655px]]<br />
<br />
==== when clicked css3d ====<br />
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.<br />
<br />
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.<br />
<br />
[[File:Css3d-6(1).png|frameless|648x648px]]<br />
<br />
==== set app background ====<br />
set verge app's background, support CSS style string, such as #AA00FF.<br />
<br />
[[File:Css3d-6-1(1).png|frameless|342x342px]]<br />
<br />
==== load YouTube Iframe API ====<br />
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.<br />
<br />
[[File:Css3d-7(1).png|frameless|740x740px]]<br />
<br />
==== load YouTube Video ====<br />
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.<br />
<br />
[[File:Css3d-8(1).png|frameless|444x444px]]<br />
<br />
==== get YouTube player prop ====<br />
<br />
<br />
Returns the property of the player:<br />
<br />
* state: Returns the state of the player. Possible values are:<br />
** -1 – unstarted<br />
** 0 – ended<br />
** 1 – playing<br />
** 2 – paused<br />
** 3 – buffering<br />
** 5 – video cued<br />
* currentTime: Get the playback position of a video<br />
* volume: Get the volume level of a player<br />
* isMuted: Get whether the player is muted<br />
* duration: Get the duration of a video<br />
<br />
[[File:Css3d-9(1).png|frameless|396x396px]]<br />
<br />
==== YouTube Player playback Controls ====<br />
Playback control of YouTube player.<br />
<br />
[[File:Css3d-10(1).png|frameless|377x377px]]<br />
<br />
==== YouTube API Errors ====<br />
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').<br />
If you get the error above, please refer to MDN [https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Window.postMessage()] (opens new window). You can use [https://github.com/caddyserver/caddy caddy] (opens new window)to implement the HTTPS server in the local development environment.<br />
<br />
==== load Vimeo Player API ====<br />
Enable [https://developer.vimeo.com/player/sdk/basics '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.<br />
<br />
[[File:Css3d-11(3).png|frameless|579x579px]]<br />
<br />
==== load Vimeo Video ====<br />
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.<br />
<br />
[[File:Css3d-12(1).png|frameless]]<br />
<br />
==== get Vimeo Player prop ====<br />
Returns the property of the player:<br />
<br />
* currentTime:Get the playback position of a video<br />
* duration:Get the duration of a video<br />
* loopState:Get the loop state of a player<br />
* paused:Get the pause state of a player<br />
* volume: Get the volume level of a player<br />
<br />
The puzzle returns a Promise object, you should use the [https://www.soft8soft.com/docs/manual/en/puzzles/Advanced.html#wait_promise wait promise] puzzle in Advanced category to get the value.<br />
<br />
[[File:Css3d-13(1).png|frameless|432x432px]]<br />
<br />
[[File:Css3d-13-1(1).png|frameless|594x594px]]<br />
<br />
==== Vimeo Player playback Controls ====<br />
<br />
<br />
Playback control of Vimeo player:<br />
<br />
* play: play a video<br />
* pause: pause a video<br />
* currentTime: sets the current playback position in seconds.<br />
* 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.<br />
* volume: sets the volume level of the player on a scale from 0 to 1.<br />
<br />
[[File:Css3d-14(1).png|frameless|363x363px]]<br />
<br />
e.g, we can implement the 'seek to' feature of Vimeo player using the following puzzles:<br />
<br />
[[File:Css3d-15(1).png|frameless|740x740px]]</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=CSS3D_plugin&diff=71CSS3D plugin2021-08-05T05:51:44Z<p>Zjbcool: /* load Vimeo Player API */</p>
<hr />
<div>by [https://zjbcool.com/ Zjbcool]<br />
<br />
This plugin used for embedding websites, videos, or maps on surfaces of 3D objects.<br />
<br />
Video: https://youtu.be/nBVdcO0VTAc<br />
<br />
BuyOnGumroad: https://gumroad.com/l/IpdbDX<br />
<br />
[[File:Css3dplugin.png|frameless|1240x1240px]]<br />
<br />
<br />
<br />
The plugin needs to enable transparency background. In the init tab, check the transparency background option of the configure application puzzle.<br />
<br />
[[File:Css3d-1(3).jpg|frameless|502x502px]]<br />
<br />
=== Puzzles ===<br />
<br />
==== create css3d object ====<br />
The puzzle is used to create a new CSS3D object. A CSS3D object consists of a Plane object and an HTML DOM element.<br />
<br />
[[File:Css3d-2(1).png|frameless|300x300px]]<br />
<br />
Parameters:<br />
<br />
* name: the name of the CSS3D object<br />
* element: the 'HTML DOM' element to embed (e.g '< div >' < iframe > '< img >')<br />
* background: the background of the CSS3D object, default is 'transparent'<br />
* width(px): the width of HTML DOM element and the Plane object, in pixels<br />
* height(px): the heiht of HTML DOM element and the Plane object, in pixels<br />
* scale: Scaling factor, which controls only the scaling of the Plane object<br />
* render: Rendering mode - 'frontSided' or 'doubleSided'<br />
* display: Display mode - render, solid, wireframe<br />
<br />
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.<br />
<!-- Bilibili --><br />
<nowiki><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></nowiki><br />
<nowiki><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></nowiki><br />
<nowiki><iframe src="https://player.vimeo.com/video/246627710" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></nowiki><br />
<br />
==== remove css3d object ====<br />
Remove a CSS3D object.<br />
<br />
[[File:Css3d-3(1).jpg|frameless]]<br />
<br />
==== css3d controls ====<br />
<br />
<br />
<br />
This puzzle is used to control whether the embedded web page interaction is enabled or not.<br />
<br />
Option:<br />
<br />
* enable:enable interaction<br />
* disable: disable interaction<br />
<br />
[[File:Css3d-4(1).png|frameless]]<br />
<br />
==== when hovered css3d ====<br />
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.<br />
<br />
[[File:Css3d-5(1).png|frameless|655x655px]]<br />
<br />
==== when clicked css3d ====<br />
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.<br />
<br />
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.<br />
<br />
[[File:Css3d-6(1).png|frameless|648x648px]]<br />
<br />
==== set app background ====<br />
set verge app's background, support CSS style string, such as #AA00FF.<br />
<br />
[[File:Css3d-6-1(1).png|frameless|342x342px]]<br />
<br />
==== load YouTube Iframe API ====<br />
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.<br />
<br />
[[File:Css3d-7(1).png|frameless|740x740px]]<br />
<br />
==== load YouTube Video ====<br />
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.<br />
<br />
[[File:Css3d-8(1).png|frameless|444x444px]]<br />
<br />
==== get YouTube player prop ====<br />
<br />
<br />
Returns the property of the player:<br />
<br />
* state: Returns the state of the player. Possible values are:<br />
** -1 – unstarted<br />
** 0 – ended<br />
** 1 – playing<br />
** 2 – paused<br />
** 3 – buffering<br />
** 5 – video cued<br />
* currentTime: Get the playback position of a video<br />
* volume: Get the volume level of a player<br />
* isMuted: Get whether the player is muted<br />
* duration: Get the duration of a video<br />
<br />
[[File:Css3d-9(1).png|frameless|396x396px]]<br />
<br />
==== YouTube Player playback Controls ====<br />
Playback control of YouTube player.<br />
<br />
[[File:Css3d-10(1).png|frameless|377x377px]]<br />
<br />
==== YouTube API Errors ====<br />
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').<br />
If you get the error above, please refer to MDN [https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Window.postMessage()] (opens new window). You can use [https://github.com/caddyserver/caddy caddy] (opens new window)to implement the HTTPS server in the local development environment.<br />
<br />
==== load Vimeo Player API ====<br />
Enable [https://developer.vimeo.com/player/sdk/basics '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.<br />
<br />
[[File:Css3d-11(3).png|frameless|579x579px]]<br />
<br />
==== load Vimeo Video ====<br />
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.<br />
<br />
[[File:Css3d-12(1).png|frameless]]<br />
<br />
==== get Vimeo Player prop ====<br />
Returns the property of the player:<br />
<br />
* currentTime:Get the playback position of a video<br />
* duration:Get the duration of a video<br />
* loopState:Get the loop state of a player<br />
* paused:Get the pause state of a player<br />
* volume: Get the volume level of a player<br />
<br />
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.<br />
<br />
[[File:Css3d-13(1).png|frameless|432x432px]]<br />
<br />
[[File:Css3d-13-1(1).png|frameless|594x594px]]<br />
<br />
==== Vimeo Player playback Controls ====<br />
<br />
<br />
Playback control of Vimeo player:<br />
<br />
* play: play a video<br />
* pause: pause a video<br />
* currentTime: sets the current playback position in seconds.<br />
* 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.<br />
* volume: sets the volume level of the player on a scale from 0 to 1.<br />
<br />
[[File:Css3d-14(1).png|frameless|363x363px]]<br />
<br />
e.g, we can implement the 'seek to' feature of Vimeo player using the following puzzles:<br />
<br />
[[File:Css3d-15(1).png|frameless|740x740px]]</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-13(1).png&diff=70File:Css3d-13(1).png2021-08-05T05:46:22Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=CSS3D_plugin&diff=69CSS3D plugin2021-08-05T05:40:08Z<p>Zjbcool: /* create css3d object */</p>
<hr />
<div>by [https://zjbcool.com/ Zjbcool]<br />
<br />
This plugin used for embedding websites, videos, or maps on surfaces of 3D objects.<br />
<br />
Video: https://youtu.be/nBVdcO0VTAc<br />
<br />
BuyOnGumroad: https://gumroad.com/l/IpdbDX<br />
<br />
[[File:Css3dplugin.png|frameless]]<br />
<br />
<br />
<br />
The plugin needs to enable transparency background. In the init tab, check the transparency background option of the configure application puzzle.<br />
<br />
[[File:Css3d-1(3).jpg|frameless]]<br />
<br />
=== Puzzles ===<br />
<br />
==== create css3d object ====<br />
The puzzle is used to create a new CSS3D object. A CSS3D object consists of a Plane object and an HTML DOM element.<br />
<br />
[[File:Css3d-2(1).png|frameless]]<br />
<br />
Parameters:<br />
<br />
* name: the name of the CSS3D object<br />
* element: the 'HTML DOM' element to embed (e.g '< div >' < iframe > '< img >')<br />
* background: the background of the CSS3D object, default is 'transparent'<br />
* width(px): the width of HTML DOM element and the Plane object, in pixels<br />
* height(px): the heiht of HTML DOM element and the Plane object, in pixels<br />
* scale: Scaling factor, which controls only the scaling of the Plane object<br />
* render: Rendering mode - 'frontSided' or 'doubleSided'<br />
* display: Display mode - render, solid, wireframe<br />
<br />
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.<br />
<!-- Bilibili --><br />
<nowiki><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></nowiki><br />
<nowiki><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></nowiki><br />
<nowiki><iframe src="https://player.vimeo.com/video/246627710" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></nowiki><br />
<br />
==== remove css3d object ====<br />
Remove a CSS3D object.<br />
<br />
[[File:Css3d-3(1).jpg|frameless]]<br />
<br />
==== css3d controls ====<br />
<br />
<br />
<br />
This puzzle is used to control whether the embedded web page interaction is enabled or not.<br />
<br />
Option:<br />
<br />
* enable:enable interaction<br />
* disable: disable interaction<br />
<br />
[[File:Css3d-4(1).png|frameless]]<br />
<br />
==== when hovered css3d ====<br />
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.<br />
<br />
[[File:Css3d-5(1).png|frameless]]<br />
<br />
==== when clicked css3d ====<br />
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.<br />
<br />
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.<br />
<br />
[[File:Css3d-6(1).png|frameless]]<br />
<br />
==== set app background ====<br />
set verge app's background, support CSS style string, such as #AA00FF.<br />
<br />
[[File:Css3d-6-1(1).png|frameless]]<br />
<br />
==== load YouTube Iframe API ====<br />
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.<br />
<br />
[[File:Css3d-7(1).png|frameless]]<br />
<br />
==== load YouTube Video ====<br />
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.<br />
<br />
[[File:Css3d-8(1).png|frameless]]<br />
<br />
==== get YouTube player prop ====<br />
<br />
<br />
Returns the property of the player:<br />
<br />
* state: Returns the state of the player. Possible values are:<br />
** -1 – unstarted<br />
** 0 – ended<br />
** 1 – playing<br />
** 2 – paused<br />
** 3 – buffering<br />
** 5 – video cued<br />
* currentTime: Get the playback position of a video<br />
* volume: Get the volume level of a player<br />
* isMuted: Get whether the player is muted<br />
* duration: Get the duration of a video<br />
<br />
[[File:Css3d-9(1).png|frameless]]<br />
<br />
==== YouTube Player playback Controls ====<br />
Playback control of YouTube player.<br />
<br />
[[File:Css3d-10(1).png|frameless]]<br />
<br />
==== YouTube API Errors ====<br />
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').<br />
If you get the error above, please refer to MDN [https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Window.postMessage()] (opens new window). You can use [https://github.com/caddyserver/caddy caddy] (opens new window)to implement the HTTPS server in the local development environment.<br />
<br />
==== load Vimeo Player API ====<br />
Enable [https://developer.vimeo.com/player/sdk/basics '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.<br />
<br />
[[File:Css3d-11(3).png|frameless]]<br />
<br />
==== load Vimeo Video ====<br />
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.<br />
<br />
[[File:Css3d-12(1).png|frameless]]<br />
<br />
==== get Vimeo Player prop ====<br />
Returns the property of the player:<br />
<br />
* currentTime:Get the playback position of a video<br />
* duration:Get the duration of a video<br />
* loopState:Get the loop state of a player<br />
* paused:Get the pause state of a player<br />
* volume: Get the volume level of a player<br />
<br />
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.<br />
<br />
[[File:Css3d-13-1(1).png|frameless]]<br />
<br />
==== Vimeo Player playback Controls ====<br />
<br />
<br />
Playback control of Vimeo player:<br />
<br />
* play: play a video<br />
* pause: pause a video<br />
* currentTime: sets the current playback position in seconds.<br />
* 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.<br />
* volume: sets the volume level of the player on a scale from 0 to 1.<br />
<br />
[[File:Css3d-14(1).png|frameless]]<br />
<br />
e.g, we can implement the 'seek to' feature of Vimeo player using the following puzzles:<br />
<br />
[[File:Css3d-15(1).png|frameless]]</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=CSS3D_plugin&diff=68CSS3D plugin2021-08-05T05:38:12Z<p>Zjbcool: /* create css3d object */</p>
<hr />
<div>by [https://zjbcool.com/ Zjbcool]<br />
<br />
This plugin used for embedding websites, videos, or maps on surfaces of 3D objects.<br />
<br />
Video: https://youtu.be/nBVdcO0VTAc<br />
<br />
BuyOnGumroad: https://gumroad.com/l/IpdbDX<br />
<br />
[[File:Css3dplugin.png|frameless]]<br />
<br />
<br />
<br />
The plugin needs to enable transparency background. In the init tab, check the transparency background option of the configure application puzzle.<br />
<br />
[[File:Css3d-1(3).jpg|frameless]]<br />
<br />
==== create css3d object ====<br />
The puzzle is used to create a new CSS3D object. A CSS3D object consists of a Plane object and an HTML DOM element.<br />
<br />
[[File:Css3d-2(1).png|frameless]]<br />
<br />
Parameters:<br />
<br />
* name: the name of the CSS3D object<br />
* element: the 'HTML DOM' element to embed (e.g '< div >' < iframe > '< img >')<br />
* background: the background of the CSS3D object, default is 'transparent'<br />
* width(px): the width of HTML DOM element and the Plane object, in pixels<br />
* height(px): the heiht of HTML DOM element and the Plane object, in pixels<br />
* scale: Scaling factor, which controls only the scaling of the Plane object<br />
* render: Rendering mode - 'frontSided' or 'doubleSided'<br />
* display: Display mode - render, solid, wireframe<br />
<br />
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.<br />
<!-- Bilibili --><br />
<nowiki><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></nowiki><br />
<nowiki><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></nowiki><br />
<nowiki><iframe src="https://player.vimeo.com/video/246627710" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></nowiki><br />
<br />
==== remove css3d object ====<br />
Remove a CSS3D object.<br />
<br />
[[File:Css3d-3(1).jpg|frameless]]<br />
<br />
==== css3d controls ====<br />
<br />
<br />
<br />
This puzzle is used to control whether the embedded web page interaction is enabled or not.<br />
<br />
Option:<br />
<br />
* enable:enable interaction<br />
* disable: disable interaction<br />
<br />
[[File:Css3d-4(1).png|frameless]]<br />
<br />
==== when hovered css3d ====<br />
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.<br />
<br />
[[File:Css3d-5(1).png|frameless]]<br />
<br />
==== when clicked css3d ====<br />
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.<br />
<br />
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.<br />
<br />
[[File:Css3d-6(1).png|frameless]]<br />
<br />
==== set app background ====<br />
set verge app's background, support CSS style string, such as #AA00FF.<br />
<br />
[[File:Css3d-6-1(1).png|frameless]]<br />
<br />
==== load YouTube Iframe API ====<br />
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.<br />
<br />
[[File:Css3d-7(1).png|frameless]]<br />
<br />
==== load YouTube Video ====<br />
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.<br />
<br />
[[File:Css3d-8(1).png|frameless]]<br />
<br />
==== get YouTube player prop ====<br />
<br />
<br />
Returns the property of the player:<br />
<br />
* state: Returns the state of the player. Possible values are:<br />
** -1 – unstarted<br />
** 0 – ended<br />
** 1 – playing<br />
** 2 – paused<br />
** 3 – buffering<br />
** 5 – video cued<br />
* currentTime: Get the playback position of a video<br />
* volume: Get the volume level of a player<br />
* isMuted: Get whether the player is muted<br />
* duration: Get the duration of a video<br />
<br />
[[File:Css3d-9(1).png|frameless]]<br />
<br />
==== YouTube Player playback Controls ====<br />
Playback control of YouTube player.<br />
<br />
[[File:Css3d-10(1).png|frameless]]<br />
<br />
==== YouTube API Errors ====<br />
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').<br />
If you get the error above, please refer to MDN [https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Window.postMessage()] (opens new window). You can use [https://github.com/caddyserver/caddy caddy] (opens new window)to implement the HTTPS server in the local development environment.<br />
<br />
==== load Vimeo Player API ====<br />
Enable [https://developer.vimeo.com/player/sdk/basics '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.<br />
<br />
[[File:Css3d-11(3).png|frameless]]<br />
<br />
==== load Vimeo Video ====<br />
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.<br />
<br />
[[File:Css3d-12(1).png|frameless]]<br />
<br />
==== get Vimeo Player prop ====<br />
Returns the property of the player:<br />
<br />
* currentTime:Get the playback position of a video<br />
* duration:Get the duration of a video<br />
* loopState:Get the loop state of a player<br />
* paused:Get the pause state of a player<br />
* volume: Get the volume level of a player<br />
<br />
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.<br />
<br />
[[File:Css3d-13-1(1).png|frameless]]<br />
<br />
==== Vimeo Player playback Controls ====<br />
<br />
<br />
Playback control of Vimeo player:<br />
<br />
* play: play a video<br />
* pause: pause a video<br />
* currentTime: sets the current playback position in seconds.<br />
* 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.<br />
* volume: sets the volume level of the player on a scale from 0 to 1.<br />
<br />
[[File:Css3d-14(1).png|frameless]]<br />
<br />
e.g, we can implement the 'seek to' feature of Vimeo player using the following puzzles:<br />
<br />
[[File:Css3d-15(1).png|frameless]]</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=CSS3D_plugin&diff=67CSS3D plugin2021-08-05T05:36:11Z<p>Zjbcool: first submit</p>
<hr />
<div>by [https://zjbcool.com/ Zjbcool]<br />
<br />
This plugin used for embedding websites, videos, or maps on surfaces of 3D objects.<br />
<br />
Video: https://youtu.be/nBVdcO0VTAc<br />
<br />
BuyOnGumroad: https://gumroad.com/l/IpdbDX<br />
<br />
[[File:Css3dplugin.png|frameless]]<br />
<br />
<br />
The plugin needs to enable transparency background. In the init tab, check the transparency background option of the configure application puzzle.<br />
<br />
[[File:Css3d-1(3).jpg|frameless]]<br />
<br />
==== create css3d object ====<br />
The puzzle is used to create a new CSS3D object. A CSS3D object consists of a Plane object and an HTML DOM element.<br />
[[File:Css3d-2(1).png|frameless]]<br />
Parameters:<br />
<br />
* name: the name of the CSS3D object<br />
* element: the 'HTML DOM' element to embed (e.g '< div >' < iframe > '< img >')<br />
* background: the background of the CSS3D object, default is 'transparent'<br />
* width(px): the width of HTML DOM element and the Plane object, in pixels<br />
* height(px): the heiht of HTML DOM element and the Plane object, in pixels<br />
* scale: Scaling factor, which controls only the scaling of the Plane object<br />
* render: Rendering mode - 'frontSided' or 'doubleSided'<br />
* display: Display mode - render, solid, wireframe<br />
<br />
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.<br />
<!-- Bilibili --><br />
<nowiki><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></nowiki><br />
<nowiki><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></nowiki><br />
<nowiki><iframe src="https://player.vimeo.com/video/246627710" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></nowiki><br />
<br />
==== remove css3d object ====<br />
Remove a CSS3D object.<br />
[[File:Css3d-3(1).jpg|frameless]]<br />
<br />
==== css3d controls ====<br />
<br />
<br />
This puzzle is used to control whether the embedded web page interaction is enabled or not.<br />
<br />
Option:<br />
<br />
* enable:enable interaction<br />
* disable: disable interaction<br />
<br />
[[File:Css3d-4(1).png|frameless]]<br />
<br />
==== when hovered css3d ====<br />
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.<br />
<br />
[[File:Css3d-5(1).png|frameless]]<br />
<br />
==== when clicked css3d ====<br />
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.<br />
<br />
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.<br />
<br />
[[File:Css3d-6(1).png|frameless]]<br />
<br />
==== set app background ====<br />
set verge app's background, support CSS style string, such as #AA00FF.<br />
<br />
[[File:Css3d-6-1(1).png|frameless]]<br />
<br />
==== load YouTube Iframe API ====<br />
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.<br />
<br />
[[File:Css3d-7(1).png|frameless]]<br />
<br />
==== load YouTube Video ====<br />
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.<br />
<br />
[[File:Css3d-8(1).png|frameless]]<br />
<br />
==== get YouTube player prop ====<br />
<br />
<br />
Returns the property of the player:<br />
<br />
* state: Returns the state of the player. Possible values are:<br />
** -1 – unstarted<br />
** 0 – ended<br />
** 1 – playing<br />
** 2 – paused<br />
** 3 – buffering<br />
** 5 – video cued<br />
* currentTime: Get the playback position of a video<br />
* volume: Get the volume level of a player<br />
* isMuted: Get whether the player is muted<br />
* duration: Get the duration of a video<br />
<br />
[[File:Css3d-9(1).png|frameless]]<br />
<br />
==== YouTube Player playback Controls ====<br />
Playback control of YouTube player.<br />
<br />
[[File:Css3d-10(1).png|frameless]]<br />
<br />
==== YouTube API Errors ====<br />
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').<br />
If you get the error above, please refer to MDN [https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Window.postMessage()] (opens new window). You can use [https://github.com/caddyserver/caddy caddy] (opens new window)to implement the HTTPS server in the local development environment.<br />
<br />
==== load Vimeo Player API ====<br />
Enable [https://developer.vimeo.com/player/sdk/basics '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.<br />
<br />
[[File:Css3d-11(3).png|frameless]]<br />
<br />
==== load Vimeo Video ====<br />
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.<br />
<br />
[[File:Css3d-12(1).png|frameless]]<br />
<br />
==== get Vimeo Player prop ====<br />
Returns the property of the player:<br />
<br />
* currentTime:Get the playback position of a video<br />
* duration:Get the duration of a video<br />
* loopState:Get the loop state of a player<br />
* paused:Get the pause state of a player<br />
* volume: Get the volume level of a player<br />
<br />
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.<br />
<br />
[[File:Css3d-13-1(1).png|frameless]]<br />
<br />
==== Vimeo Player playback Controls ====<br />
<br />
<br />
Playback control of Vimeo player:<br />
<br />
* play: play a video<br />
* pause: pause a video<br />
* currentTime: sets the current playback position in seconds.<br />
* 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.<br />
* volume: sets the volume level of the player on a scale from 0 to 1.<br />
<br />
[[File:Css3d-14(1).png|frameless]]<br />
<br />
e.g, we can implement the 'seek to' feature of Vimeo player using the following puzzles:<br />
<br />
[[File:Css3d-15(1).png|frameless]]</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-15(1).png&diff=66File:Css3d-15(1).png2021-08-05T05:35:27Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-14(1).png&diff=65File:Css3d-14(1).png2021-08-05T05:34:45Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-13-1(1).png&diff=64File:Css3d-13-1(1).png2021-08-05T05:33:48Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-12(1).png&diff=63File:Css3d-12(1).png2021-08-05T05:32:48Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-11(3).png&diff=62File:Css3d-11(3).png2021-08-05T05:31:50Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-10(1).png&diff=61File:Css3d-10(1).png2021-08-05T05:26:39Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-9(1).png&diff=60File:Css3d-9(1).png2021-08-05T05:25:46Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-8(1).png&diff=59File:Css3d-8(1).png2021-08-05T05:24:41Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-7(1).png&diff=58File:Css3d-7(1).png2021-08-05T05:22:29Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-6-1(1).png&diff=57File:Css3d-6-1(1).png2021-08-05T05:21:26Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-6(1).png&diff=56File:Css3d-6(1).png2021-08-05T05:19:43Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-5(1).png&diff=55File:Css3d-5(1).png2021-08-05T05:17:51Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-4(1).png&diff=54File:Css3d-4(1).png2021-08-05T05:16:51Z<p>Zjbcool: </p>
<hr />
<div>css</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3dplugin.png&diff=53File:Css3dplugin.png2021-08-05T04:55:23Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-3(1).jpg&diff=52File:Css3d-3(1).jpg2021-08-05T04:49:40Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-2(1).png&diff=51File:Css3d-2(1).png2021-08-05T04:47:15Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcoolhttps://www.soft8soft.com/wiki/index.php?title=File:Css3d-1(3).jpg&diff=50File:Css3d-1(3).jpg2021-08-05T04:44:19Z<p>Zjbcool: </p>
<hr />
<div>css3d</div>Zjbcool