CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。babylonjs前回の記事では、Noodlの概要を紹介しました。www.crossroad-tech.comNoodlはノードをつなげてプロトタイピングするツールですが、javascriptを自分で書いたり、インターネットで提供されているjavascriptソースを読み込んで使うこともできます。今回はBabylon.jsを読み込んでNoodlで表示させる手順を紹介します。Noodlのインストール手順、基本操作などは前回の記事をご参照ください。この記事は以下を参考にさせていただいております。Babylon.jsの事情でこの記事通りにはできなかった箇所があるので、その辺りを追加しています。"javascript"というノードを使います。このノードをクリックし、Propertiesを表示させると、"Edit"というボタンがあります。これをクリックするとエディタが表示されます。このjavascriptはいくつか決まりがあります。詳しくはこちらに書いてあります(日本語です)。JAVASCRIPTinputsには、javascriptノードが動くときに使用される設定値です。Viewで調整できるようになります。giste2d8b33b2f604c0934c326fe2326d59doutputとsetupもありますが、今回はまだ使っていません。今回はRunを使いました。この中にBabylon.jsを読み込む処理を書きます。Stepとして書かれているサンプルコードです。Sphereが表示されるだけのシンプルなものです。Downloader"ノードを使う先ほどのコードには、このようにBabylon.js特有の処理がいくつかあります。当然ながら、このままだとこのようなエラーが出ます。Downloader"ノードを使います。ScriptsにURLを入力します。今回は先ほどのBabylon.js公式サイトで書かれていたURL3つ(下記)を入れました。gist96e7d85081b25ce7878c26ab91f83c62ちなみに、"javascript"ノードのRunの冒頭にif文が書いてあります。definedになってしまいました。Typeを"div"にします。そばのHTMLという要素でEditをクリックし、Canvasタグを1行追加します。Typeを"canvas"にしていました。これだとNoodlが本来指定しているcanvasタグのidやclass名称を指定できていないので、以下のエラーが出ます。ノードを接続するこのように接続します。javascriptノードに集まるように接続します。具体的な手順は下記の動画をご参照ください。これでBabylon.jsをNoodlで表示させることができます。サイズ調整の方法がまだわかっていませんが、Noodlの使い方を覚えたら対応予定です。APIとの連携がわかれば、拡張性の高いプロトタイピングができそうです。いくつか所用があって12月まで時間が取りづらいため、次の更新時期は未定です。時間を確保して、前々回のPWAと一緒にNoodlの学習も進めていこうと思います。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。