Help us understand the problem. What is going on with this article?

【PlayCanvas】スライドに組み込む

More than 1 year has passed since last update.

この記事は PlayCanvas Advent Calendar 2017 の16日目の記事です。

PlayCanvasの実行画面をスライドに組み込んでプレゼンテーション出来たら素敵だと思いませんか?
Webスライドライブラリ"reveal.js"のWebサービス"Slides.com"なら簡単にできるので紹介します。

Slides.com

Webベースのスライド作成サービスです、無料から使えます
https://slides.com にアクセスしてアカウントを作成しましょう

deck 作成

Slides.comではスライドのことをdeckと呼びます、まずは一つ作ってみましょう
基本的なSlides.comの使いかたはここでは割愛します

PlayCanvasの画面を組み込む

PlayCanvasでプロジェクトを作成し、ビルドしてURL(playcanv.as/....)を取得しましょう

矩形選択して組み込み

メニューからiframeを選択してURLを入力すると組み込まれます。
サイズは矩形の頂点や辺から簡単に調整できます。
image.png
image.png

全画面で組み込み

右上のSlide backgroundからiframeを選択し、URLを入力します。
マウス操作やキーボード操作等、なにかインタラクティブな動作をさせる場合は、interactiveにチェックを入れる必要があります。
image.png

なお、全画面で組み込んだ場合、Slides.comの仕様で、見ていないスライドでもPlayCanvasプロジェクトはアクティブなままになってしまうようです。パフォーマンスを考えると矩形で組み込んだほうが今は良さそうです。
なお、Google Chromeでは6画面以上を同一タブでレンダリングしようとするとエラーが起きるため、6スライド以上は背景に指定しないほうがよさそうです。
https://forum.playcanvas.com/t/shader-compile-error-if-20-iframes-on-a-page/3025

utautattaro
世界中の端末で自分の書いたコードを走らせることが夢です
https://utautattaro.com
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away