JavaScript 【Blender×three.js】Webブラウザ上でモデルとアニメーションを再現する
以前、three.jsとpanolens.jsを利用して360度画像をWebに埋め込むという記事を書きました。 今回は、このthree.jsだけを使って、3DCG作成無料ソフトBlenderで制作したモデルとアニメーションをWeb上で再現し...
JavaScript
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度の全天球写真を撮るには、全天球カメラが必要だーーーー！それか一枚一枚撮影しないとーーーー！と思...
JavaScript 【Vue.js】ページが見つからない時の設定ファイル～redirectの設定～
publicフォルダ直下に_redirectsファイルを作成する。（拡張子なし） public | favicon.ico | index.html | _redirects _redirectsのファイル内に、どのパスで受け取ってもind...
JavaScript 【Vue.js】Vuex～store.jsを分割する～
vuexについての記事はこちら↓ 機能ごとにコードを分割 store.jsは大規模な開発になると肥大化するため、用途ごとにパーツ分けをすると保守運用が効率的になる。 まず、src直下にstoreフォルダを作成し、storeフォルダの直下にm...
JavaScript 【Vue.js】Devtoolsのインストール
googleの拡張機能にvueのdevtoolが無償提供されている。 google vuedevtoolはこちら インストールした後に、F12（google devtool）を開くと、ElementsやConsole、Networkの並びに...
JavaScript 【Vue.js】Vuexを使ってみる～アクセッサーとv-model使って値のやり取りを行う～
vuexのインストール方法はこちら↓ vuexの使い方についてはこちら↓ v-modelをvuexで使う 入力した値を取得＆置き換えるときには、getterとsetterをcomputedの中で使用して、v-modelで双方向データバインデ...
JavaScript 【Vue.js】Vuexを使ってみる
インストール方法の記事はこちら↓ getters 計算式など複雑な式を含む関数をコンポーネントで使いまわしたい時、gettersを使用すると効率的になる。 store.jsに計算式を作成。gettersの中では、stateで定義したcoun...
JavaScript 【Vue.js】Vuexインストール方法
大規模な開発に向いている状態管理パターンとライブラリ。 下記コマンドを実行 npm install vuex src直下にstore.jsを作成。importで読み込む。 state:はvue全体で使用できるグローバル変数。 main.js...