Blender

Blender形式(.blend)のファイルサイズを圧縮する(Blender)

やりたいことBlenderの基本形式である.blendファイルを保存に圧縮してファイルサイズを小さくします。環境Blender:3.4.1保存時の圧縮通常の保存と同じように”ファイル”メニューから”名前を付けて保存”を選択します。表示される保存ダイアログの右上の歯車をクリックします。以下の設定が表示されるので”ファイルを圧縮”にチェックをいれて”名前を付けて保存”をクリックして保存します。結果試験データ以下のサイコロのデータを使用してファイルサイズの確認をおこないます。テクスチャは使用していません。サイズの比較ファイルサイズファイルを圧縮 off (初期値)1,582kByteファイルを圧縮 ...
JavaScript

canvasタグのサイズ設定方法と動作の違い(JavaScript)

やりたいことcanvasタグは2つの方法でサイズを指定でき見た目は同じが、JavaScriptで扱う際に動作が異なるので確認します。環境Chrome: 113.0.5672.127Canvasのサイズ設定方法CanvasのサイズはattributeとStyleで設定できます。下のように表示の結果は同様です。attribute(canvasタグ内)での設定<canvas width=200 height=200></canvas>上記のhtmlで200x200のCanvasが下のように描画できます。(領域がわかりやすいように背景を灰色にしています。)Styleでの設定<canvas style=...
ツール

htmlタグをブラウザに表示させるための文字変換を行うツール

やりたいことwebサイトにhtmlタグを表示させるためには、<と>を別の文字列に置換する必要があります。(文中にあるとタグと判断されるため)htmlの書き方などを説明する際には、何度も作業をする必要があり手間なので自動化のツールを作成しました。ツール上のテキストボックスに変換する文字列を入力しCONVERTボタンをクリックします。変換された文字列は下のテキストボックスに表示されます。 function convertStr() { let input_str = document.getElementById('input_text').value; let output_str =input...
Threejs(Java script)

glTF(.gltf)ファイルをLoadして表示(Threejs)

やりたいことThreejsやMicrosoftが推奨されているglTF(.gltf)ファイル、.binファイル、テクスチャファイルで分割された3DファイルをThreejsを簡単に読み込みたい。Blenderでの保存方法は以下のページ環境Threejs: r150Chrome: 111.0.5563.65読み込みと表示読み込みと表示は.glbと同じコードで読み込めます。loadObjects(scene,"./dice.glb");上記で指定している読み込みファイルを指定の.gltfに変更します。.gltfファイルを保存する際に同時に作成される.binファイルとテクスチャファイルはソースコードの...
3D

glTFファイルを直接編集する。(Blender)

やりたいことi以下のページで作成したgltTF Separateの.glTFファイルを直接編集します。テキスト(JSON)として編集gltTF Separateの.glTFファイルはJSONフォーマットのためテキストファイルとして編集ができます。Blenderで日本語を使用すると(オブジェクト名、マテリアル名など)、.glTFファイル内ではデコードされます。編集はできますが、対象の設定を探すのを楽にしたい場合は英語を使用しておいたほうが便利です。テクスチャの変更テクスチャは以下のように宣言されます。"images" : [ { "mimeType" : "image/png", "name" ...
Blender

glTFファイル保存時にテクスチャを外部ファイルとして保存する(Blender)

やりたいことBlenderでglTF 2.0でエクスポートする際に単一ファイルでなく、テクスチャを外部ファイルとして保存する。環境Blender:3.4.1フォーマットの変更左上の”ファイル” → ”エクスポート” → glTF 2.0(.glb/.gltf) からエクスポートダイアログを表示します。表示されるダイアログの右側のフォーマットをクリックします。glTF Separate(.gltf + .bin + テクスチャ)を選択して保存します。結果選択したフォルダに、指定したファイル名.gltf、指定したファイル名.bin、テクスチャファイル(画像ファイル)が保存されます。例)3D.glt...
ブラウザ

Edgeの拡張機能を自作する

やりたいことEdgeの拡張機能を自作EdgeとChromeの拡張機能Edgeの拡張機能とChromeの拡張機能は基本的に同じです。すべてが使用できるかはわかりませんが、Chrome向けに作成した拡張機能はEdgeでも使用できます。簡単なChromeの拡張機能の作成方法は下のページを参照してください。拡張機能の登録作成した拡張機能を登録する方法は下のページを参照してください。
ブラウザ

自作のChrome拡張機能をEdgeで使用する

やりたいこと自作のChromeの拡張機能をEdgeで使用する。Chromeの拡張機能の作成は以下のページ環境Edge:112.0.1722.64拡張機能の登録すべての拡張機能で保証するものではありませんが、Chromeの拡張機能をEdgeに登録するために修正は不要です。以下の手順で作成した拡張機能をEdgeに登録します。Edgeを開き、上記のようにユーザ名横の”…” → ”拡張機能”を選択します。上のGUIが表示されるので、”拡張機能の管理”をクリックします。画面左の”開発者モード”をオンにします。”開発者モード”のチェックが表示されない場合は画面左の三をクリックして表示させます。画面右側に”...
ブラウザ

Chromeの拡張機能(manifest v3)を使用して特定のページを変更する

やりたいことChromeの拡張機能を使用して特定のページを変更する。サーバーのファイルを編集するわけではなく拡張機能をインストールしたPCでのみ有効です。環境Chrome:112.0.5615.138拡張機能のmanifestに関して拡張機能のmanifest:V3現在、検索で出てくる多くのページで説明されているChromeの拡張機能はmanifest Version2 (V2)です。V2は将来的に廃止予定ですので可能な限りV3を使用したほうが賢明です。また2023/1や2023/6にV2が廃止になるような記載があるページがありますが、誤りか情報が古いです。現在(2023/5月現在)、廃止の予...
Blender

三角柱、四角柱(正N角柱)を作成する(Blender)

やりたいこと基本的な形でありながら知らないと作るのに苦戦する三角柱、四角柱を作成する。環境Blender:3.4.1円柱から作成円柱の作成”追加” → ”メッシュ” → ”円柱” を選択して円錐を作成します。円柱の設定変更円柱を作成すると左下に以下のGUIが表示されます。円柱を作成後に、画面をクリックするなど他の操作をすると上のGUIは消えて円柱が確定します。操作の前に以下の作業をする必要があります。上記のGUIをクリックし表示されるGUIの”頂点”を変更します。上記のGUIをクリックし表示されるGUIの”頂点”を変更します。三角柱を作成する場合は、”頂点”を3にします。四角柱を作成する場合は...