08/02/2019スポンサードリンクどうも、とがみんです。最近は「Three.js」を利用して、3Dオブジェクトを作ったりしています。2019この記事では、そのようなJavaScriptを利用して書いたコードをWordPresの記事内に表示する方法について紹介していきます。今回は例として、「Three.js」を利用し、3Dオブジェクトの立方体を表示していきます。以下のボタンを押すと、立方体が記事中に表示されます。これを実装する方法について紹介していきます。ちなみに、ボタンを押してから動作するようにしているのは、記事の読み込み速度を速めるためです。ボタンを押してから、読み込むことによって、記事自体の読み込み速度に影響を与えないようにしています。Toolbox」プラグインをインストールし有効化します。このプラグインを利用することによって、WordPressのテンプレートを直接編集することなく、指定したページのヘッダーorフッターにPHPやHTML/CSS、JavaScriptのコードを挿入することができるようになります。Blockにてコードを作成します。ここで、挿入したいコードや、挿入する対象の記事を選択していきます。Three.jsの読み込み「Three.js」の読み込みを行います。プログの「Three.js」というカテゴリ内の記事と、この記事にのみ適応させたいので、そのページや、カテゴリを指定し、以下のコードを書き込みます。src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>Detector.jsの読み込み同様にして、以下のコードも導入します。表示ブラウザがWebGLに対応しているかどうかを判断するためのコードです。type;}}};</script>3Dオブジェクトを記事内に表示これで、3Dオブジェクトを表示するための環境が揃ったので、最後に立方体を表示するコードを読み込んで行きます。以下のコードを導入します。導入する記事はこのページだけなので、読み込むページは、このページのみを指定します。init);});</script>記事編集画面にて、3Dオブジェクトを表示させたい場所に以下のコードを書き込みます。id="three-btn">3Dオブジェクト表示</button>これで、上記のように、ボタンを押すと立方体が現れるようになります。まとめWordPressの記事の中に、「Three.js」を利用して作成した立方体を表示する方法について紹介しました。性能向上を目的とした研究をしていました。現在はFinTech系ベンチャー企業勤務。Boot」でWebAPIの作成。JSONの受信と送信を行うサンプル。行われる学習方法について。バッチ・ミニバッチ・オンライン学習。ニューラルネットワークの学習の仕組み。7【自由と哲学】一体自由とはどういう状態なのか。究極の自由とその考察。