JavaScript 【Blender×three.js】Webブラウザ上でモデルとアニメーションを再現する
以前、three.jsとpanolens.jsを利用して360度画像をWebに埋め込むという記事を書きました。 今回は、このthree.jsだけを使って、3DCG作成無料ソフトBlenderで制作したモデルとアニメーションをWeb上で再現し...
プログラミング
JavaScript JavaScript 【three.js/panolens.js】360度画像をWeb上に埋め込む
前回までは、Googleストリートビューを使って無料で360度写真を撮影し、Photoshopで360度写真を加工しました。 本記事では、360度画像をVRビューとしてWeb上に埋め込む方法を記載します。 環境 OS:Windows10エデ...
JavaScript 【Photoshop】360度全天球写真を加工する
前回は、Googleストリートビューアプリを使って無料で360度写真を撮影しました。 今回は、こちらの写真をPhotoshopで加工していきたいと思います！ 出来上がりはこんな感じです。センスのかけらもなくてすみません（笑） Photosh...
JavaScript 廃止【スマホ】無料で360度パノラマ写真を撮影する
Googleストリートビューアプリは2023年3月をもって終了となりました。 本記事の内容は、現在、再現ができませんのでご注意ください。 360度の全天球写真を撮るには、全天球カメラが必要だーーーー！それか一枚一枚撮影しないとーーーー！と思...
HTML/CSS [css]grid-gapを％で設定したら親要素の高さがおかしい
cssのgridを使ってコンテナの高さ幅にそれぞれギャップ（間）を持たせるために、％で指定をしたところ、親要素の高さが「grid全体の高さ−（設定したギャップ×row数）」になってしまい、次の要素が被るという現象が起きました。 原因追及まで...
HTML/CSS [Sass]@mixinと@extend使い分け
久しぶりにCSSではなくSassを使いました。過去、Sassは変数の定義やbreak pointの設定が便利なので、使ってはいたもののそこまで使いこなせてはいませんでした。 ま、今も使いこなせてはいないのですが！（笑）とはいえ、以前よりかm...
CMS 【WordPress】カスタムフィールド/カスタム投稿/カスタムタクソノミー
メイン画面とsingleページ使われる関数はこちらをご参照ください↓ カスタムフィールド カスタムフィールドとは、決まった項目をパーツとして扱うことができる。（メニューや料金表など）ユーザーは、フィールドに必要な情報を入れていくだけなので、...
CMS 【WordPress】個別記事に関わる関数/single.php
index.php関連はこちら↓ 投稿した記事に用いられる関数のメモを残します。 WordPressテンプレート階層 まず事前に、WPにはテンプレート階層が存在し、ファイル名によって表示するページのテンプレートが決まるようになっています。つ...
CMS 【WordPress】メイン画面に関わる関数や記述まとめ/index.php
ぶっちゃけWordPressをなめてました。。。独自テーマを作れるようになるにも一苦労で、オブジェクトでのコーディングや、ブロックを作れるようにするとなるとReactの知識も入ってくる、といったように内部構造が想像以上に複雑です。 まずは、...
CMS 【Local】WordPress開発環境をローカルに構築する
以前にVagrantの「VCCW」boxを使用してローカルに開発環境を作成しました。前回記事はこちら↓ Vagrantを使い慣れている方には利便性がいいのですが、慣れていない方にはとっつきにくい点もあります。 環境構築に時間がかかる（Vir...