GhostにCode injectionでThree.jsの3Dモデルを埋め込んでみる
Three.jsを使って作られた3Dモデルをブログ記事の中にCode injectionを使って埋め込めるのかなとふと思ったので試してみました。
本文中でHTMLカードに<canvas>タグ、Code injectionのヘッダに<style>タグでCSSを、<script>タグでJavaScriptを貼り付けると、ちゃんと動かすことができました。
埋め込んだのはThree.jsのマニュアルにあった以下の例です。
three.js manual
three.js manual | 基礎知識
コードの中身は全く理解できていませんが、3Dって面白いですね。
Three.jsでは3Dモデルをインポートして使用することもできるようですが、以下のようなところから素材を使わせてもらうこともできるみたいですね。
OpenGameArt.orgというサイトで、ゲーム制作をしている人には有名なのかもしれませんが、僕は初めて知りました。
OpenGameArt.org
素材によってライセンス形態が異なるようですが、先日の記事で描いたCC0みたいなライセンスにしてある3D素材もあって、Three.jsのマニュアルでも使用されています。
部屋に飾る絵画とブログの画像
僕は特別アートに詳しいわけでもないですが、たまに絵を見たくなることもあります。 そういうとき、思い切って美術館に行くこともあるにはあるんですが、基本的に出不精なのでネットで調べて満足してしまうことが大半です。 ただやっぱり画面の中で見るのはその一瞬だけですし、なんだか味気ないってのも正直あります。 この記事は、そんなときはパブリックドメインになっている絵画データを印刷するとなんかいいよってことを伝えたくて書きました。 こういう自由に利用可能な素材はブログの画像なんかにも使えるのもいいですよね。この記事のトップにもパブリックドメインの絵画をお借りして載せてみました。 パブリックドメインってなんぞや 高画質な絵画データでもパブリックドメインで無償でダウンロード可能になってるものが結構あったりします。 パブリックドメインとは、誰でも自由に利用可能(商用利用含む)な素材です。 パブリックドメインになっている素材は大きく分けて、 1. 著作権が切れたもの 2. 著作者がパブリックドメインにしたもの(CC0と表記されている) の２種類があるようです。 💡僕は
Three.jsでは今回埋め込んだ例のように立体を動かしたり、データの可視化もできれば、自分の想像の世界を作ったり、ゲームを作ったりもできるので、ちょっと本格的に学んでみたくなりました。
Ghostに埋め込むのは今回やったみたいにCode injectionでもできるのですが、CodePenとの連携機能もあるようなので、メインのデザインとして使うのでなければそっちの方が簡単で管理もしやすそうです。
自分で制作する際には、CodePenのアカウントを作ってやってみようと思います。
Official Ghost + CodePen Integration
Showcase front-end code snippets in your content directly from CodePen - all you have to do is paste an embed code into a HTML block! 👩💻
