「tutorial」タグのついた95記事

マウスとタッチ操作でカメラを動かして周囲を見回す方法を示すサンプル

オーストリアの町メードリングにある郵便局の中庭です。このアプリは、SOG圧縮、シャドウキャスティング、ダイナミックリライティング、物理演算を実演しています。このスプラットはChristoph Schindelarによってスキャンされました。「N」キーを押してナイトモードに切り替えてください！

クリック可能なホットスポットとアノテーションを備えた3Dガウシアンスプラット製品ビジュアライザー。

カスタムシェーダーとポストエフェクトによる美しいトランジションを備えた3Dガウシアンスプラット彫像ギャラリー。

3DオブジェクトをUIの一部としてレンダリングする

非常に高速な物理オブジェクトのためにCCDをセットアップして有効にするスクリプトのサンプル

Draco圧縮GLBを読み込む方法。

フラッピーが帰ってきた！フラッピーバードをできるだけ多くのパイプを通り抜けるようにガイドしましょう。@playcanvasで作成

プロジェクトを開く ↗

GLBをバイナリアセットとして読み込む方法。

HTMLとCSSのライブ編集を使用する方法のサンプル。

HTMLとCSSを使用してUIを作成する方法のサンプル

使用しない場合に開始時にプリロードする必要がないように、実行時にアセットをロードする方法を示すサンプル。

pc.Mesh APIを使用したレインボートレイル

複数のカメラとレイヤーを使用して、UI要素とワールド空間オブジェクトの混合ユーザーインターフェースをレンダリングする方法を示すデモンストレーションプロジェクト。

カメラのビューポートプロパティを変更することで複数のビューポートをレンダリングする方法を示すサンプル

このテンプレートのアステロイドシューターをフォークして、自分だけのスペースシューターゲームを作りましょう！マウスで狙いを定め、左ボタンで発射します。できるだけ長く生き残りましょう！

Layout Groupコンポーネントを使用してユーザーインターフェースを構築します。

テキスト用のノーマルマップとパララックスマップを動的に生成します

ShadertoyのGLSLエフェクトをPlayCanvasマテリアルのシェーダーチャンクで使用するデモンストレーション

UI Elements、Layout Groups、Buttonコンポーネント、スプライト、テクスチャアトラスを使用してショップユーザーインターフェース画面を構築します

イベントを使用してスクリプト間で通信する方法を示すサンプル。

ammo.jsのRaycastVehicle APIを使用したPlayCanvasでの車両物理の実装。デスクトップ、モバイル、VRをサポートしています。

古いCRTのような劣化したビデオ画面をシミュレートする基本的なフルスクリーンエフェクト。

WebXR対応の360度画像 | 画像クレジット//www.flickr.com/photos/54144402@N03/ より

WebXR対応の360度ビデオ

WebXR ARを使用している際にPlayCanvasシーン内でレイキャストする方法の例。

WebXR ARセッションでDOM（HTML + CSS）を使用する方法の例。

WebXR Hit Test APIの使用方法の例。現実世界のジオメトリに対してヒットテストを行うことができます。

入力ソースプロファイルに基づいてWebXRコントローラー/ハンドモデルをロードするサンプルアプリケーション。モデルの提供元//github.com/immersive-web/webxr-input-profiles

WebXRハンドトラッキングを使用したサンプルアプリケーション。

VRカメラをサポートする基本的なシーン

VRでのリアルな手！

PlayCanvasを使用した、トラッキングコントローラー対応のWebXRサポート用ボイラープレートコードを含むサンプルアプリケーション。

開発者がすべてのデバイス向けにスケーラブルでレスポンシブなWebXR VRアプリケーションを作成する方法を学ぶためにPlayCanvasチームが構築した継続的なプロジェクト

WebXR拡張現実のImage Tracking APIの使用方法の例。提供されたサンプルに基づいて現実世界の画像をアクティブにトラッキングできます。

WebXR拡張現実のPlane Detection APIの使用方法の例。現実世界の平面推定をアクティブにトラッキングできます。

timeScaleプロパティを変更してアプリを一時停止・再開する方法を示すサンプル。クリックで一時停止/再生を切り替えます

マウスとタッチ操作でエンティティの周りを回転するオービットカメラのサンプル。スクロールホイールと「ピンチでズーム」でズームイン・ズームアウトができます。

モデル単位でフェードイン・フェードアウトする方法を示すサンプル。

動的リフレクションとHDRライトマップを使用したインタラクティブなインテリアビジュアライゼーション。

カーブを使って基本的なアニメーションを行う方法を示すサンプル。

カーブデータを使用してサウンドスロットの音量を制御する方法を示すサンプル。シーンをクリックしてオーディオを開始します。

ライトとモデルにレンダーマスキングを使用して、ライティングが特定のモデルにのみ影響を与え、カメラが特定のモデルのみをレンダリングする方法を示すサンプル。

複数のカメラビューポートでのレイキャスト。各ビューでシェイプをクリックしてみてください

ターゲット位置にカメラをフォーカスする方法を示すサンプル

プロジェクトを開く ↗

ショックウェーブ波紋ポストエフェクト

エンティティをピックする方法を示すサンプル

プロジェクトを開く ↗

カメラからスクリーンショットをキャプチャしてPNGとしてダウンロードする方法を示すサンプル

プロジェクトを開く ↗

ステートグラフを使わずにアニメーションを追加・再生する方法を示すサンプルプロジェクト

ステンシルバッファを使用してカード上にマジックウィンドウのような効果を作成するサンプルプロジェクト。

LerpとSlerp関数を使用して、カメラをある位置と回転から別の位置と回転へスムーズに遷移させるサンプル。

UIのスクロールビューで要素を追加・削除するサンプル

PlayCanvasエンジンを拡張してワンショットタイマーを作成するサンプル。Pキーで時間を一時停止します。

raycastAllを使用してタグでエンティティをピックする方法を示すサンプル

画面上でダブルクリックするとカメラが移動します

タッチスクリーンでダブルタップを検出する方法を示すサンプル。

スプラインパス上のポイントに沿ってカメラが移動するサンプル。

プロジェクトを開く ↗

常にカメラの方を向く平面（ビルボード）の簡単なサンプル。ボックスをクリックして、WASDでシーン内を飛び回ってみてください

一人称カメラのチュートリアルを拡張し、3Dレベル内を移動・ジャンプできるようにしたサンプルプロジェクト

他のプロジェクトでも使用できる、自己完結型FPSカウンターのサンプル。

プログレスバーを表示しながら実行時に複数のアセットを読み込む方法を示すサンプル。

LeXXikによるグラデーション効果を持つプロシージャルテクスチャの作成例

ユーザーがクリックした場所にオブジェクトを移動するシンプルなポイント&クリックシステムを示すサンプル

スクリーン空間でマウスを使ってオブジェクトを回転させる方法を示すサンプル

クリック時にマウスをロックする方法を示すサンプル。

画面上のすべてのタッチポイント間に線を描画するサンプル。

UIのセーフエリアを処理するサンプルプロジェクト - https://developer.playcanvas.com/user-manual/user-interface/safe-area/

放射状ローディングサークルのサンプル

ワールド空間のポイント上にUI要素を配置するサンプル。

ワールド空間UIをワールドの上にレンダリングする方法を学ぶ

シンプルな三人称コントローラー。

クラシックなゲーム「三目並べ」

アラビア語などのRTL言語をサポートするためのスクリプト

PlayCanvasでの基本的なタッチ入力を実演するチュートリアル。ボックスをタッチして画面上で動かしてみてください！

実行時に複数のアセットを読み込む方法を示すサンプル。

https://github.com/davidshimjs/qrcodejs を使用して実行時にQRコードを生成する

スクリプトを通じてマテリアルのテクスチャを変更する方法を示すサンプル

モデルのマテリアルを実行時に切り替えるサンプル。

クレジット//playcanvas.com/user/lexxik

シーン上に情報ホットスポットを表示するサンプル。

プロジェクトを開く ↗

マウスに追従する火の玉のサンプル

画面揺れを伴う多層パーティクルエフェクトを示すサンプルプロジェクト。

物理レイキャストを使ってエンティティをピックする方法を示すサンプル

物理を使用してワールドにオブジェクトを配置する方法を示すサンプル。地面をクリックしてボックスを配置します。

物理システム（公開プロジェクトに追加で1MB）やフレームバッファを使用せずにオブジェクトをピックする方法を示すサンプル。

物理を使用せずにワールドにオブジェクトを配置する方法を示すサンプル。地面をクリックしてボックスを配置します。

UIに影響を与えずに異なる解像度でワールドをレンダリングするサンプルプロジェクト

長押し／長タップを検出してアクションを実行する方法を示すサンプル。

ローディング画面でプロジェクトの画像アセットを使用する方法を示すサンプルプロジェクト