javascript

Javascriptでテキストファイルをドラッグアンドドロップで読み込む

やりたいことJavascriptでローカルに保存されているテキストファイルをドラッグアンドドロップ読み込みます。ファイルセレクタで読み込む場合は以下のページを参照。ファイルシステム APIによる読み込み以下のhtmlで表示される500x500の領域にファイルをドラッグアンドドロップすることで、読み込みをすることができます。<!doctype html><html lang="ja"><head> <meta charset="utf-8" /> <title>text読込</title></head><body> <div id="droparea" style="border:solid;w...

2024.01.02

JavaScript

Javascriptでテキストファイルを指定して読み込む

やりたいことJavascriptでローカルに保存されているテキストファイルを読み込みます。ドラッグアンドドロップでの読み込みは以下を参照。ファイルシステム APIによる読み込み以下のhtmlで表示される"text読込"ボタンをクリックすることで、ファイルセレクタからファイルを選択、読み込みをすることができます。読み込まれたデータはtextに格納されます。 <!doctype html><html lang="ja"><head> <meta charset="utf-8" /> <title>text読込</title></head><body> <input type=button id="...

2024.01.02

JavaScript

読み込んだMMD向けファイル（PMD）をテクスチャ付きでThreejsで読み込めるglbで出力する(Blender)

やりたいことBlenderにてインポートしたMMD向けファイルのモデルをテクスチャ付きThreejsで表示可能なglbで出力します。下の記事の通りglbを出力すると多くのマテリアルはうまくいきます。しかし下の目のようにテクスチャの情報を引き継がないと正しく表示できないものがあります。そのためテクスチャ付きのマテリアルをエクスポートする必要があります。あにまさ氏の初音ミクのモデルを例に進めさせていただきます。マテリアルの修正対象のマテリアルの特定マテリアルを一つ一つ設定を変更して対象のマテリアルを特定します。（例えば色を変え目の色が変わるマテリアルを探します。）今回の例では”材質6”が対象の目の...

2023.08.18

Threejs(Java script)

ThreejsでMMD向けファイル（PMD）を開く方法まとめ

MikuMiku Dance(MMD)向けファイル（PMD）をThreejsで表示する方法のまとめです。Blenderでインポートインポートしたモデルの編集Threejs向けに変更/エクスポートThreejsで読み込み

2023.08.18

Threejs(Java script)

読み込んだMMD向けファイル（PMD）をThreejsで読み込めるglbで出力する(Blender)

やりたいことBlenderにてインポートしたMMD向けファイルのモデルをThreejsで表示可能なglbで出力します。あにまさ氏の初音ミクのモデルを例に進めさせていただきます。読み込み方法は下を参照。マテリアルの変更PMDファイルをインポートした際にマテリアルにはMMDSharderDevというものが使用されていますがが、これはglbに出力したときに正しくThreejsで表示できません。そのためマテリアルの設定を変更する必要があります。”初音ミク_mesh”を選択します。マテリアルのプロパティを選択します。リストから材質を一つ選択し、”ノードを使用”をクリックし非選択状態にし、ブレンドモードを...

2023.08.18

Blender

Youtubeの動画をwebページに埋め込む２つの方法

やりたいことYoutubeの動画をwebページに埋め込む２つの方法を紹介します。iframeにSrcで動画を指定する方法一つ目の方法はiframeにSrcで動画を指定することです。通常Youtubeの動画埋め込みはこちらを指します。埋め込み方法コードの動画から取得Youtubeの動画を右クリックして表示されるメニューから”埋め込みコードをコピー”を選択することでHTMLのコードを取得することができます。以下のようなコードが得られます。<iframe width="1033" height="581" src="" title="不居実まるの初動画" frameborder="0" allow=...

2023.07.08

WEB

拡張機能追加時エラー”UTF-8 でエンコードされていません。”(Edge,Chrome)

やりたいことChrome,Edgeに自作の拡張機能を追加時に以下のエラーが表示され追加できないときの対処。コンテンツスクリプトのファイル「XXXX.js」を読み込むことができませんでした。UTF-8 でエンコードされていません。マニフェストを読み込めませんでした。XXXX.jsは拡張機能で使用しているファイル名です。原因”UTF-8 でエンコードされていません。”とあるようにスクリプトファイルの文字がUTF-8でない可能性があります。特に日本語を扱う際に注意が必要です。”マニフェストを読み込めませんでした。”とありますが、スクリプトのみに問題があってもこのメッセージは表示されます。まずはスク...

2023.06.18

ブラウザ

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=...

2023.05.20

JavaScript

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

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

2023.05.15

Threejs(Java script)

Blenderで作成した3DオブジェクトをThreejsで読込、表示するまとめ

やりたいことBlenderで作成した3DオブジェクトをThreejsで読込、表示します。関係する複数の記事が書きましたのでまとめます。（随時更新）保存　→　読込/表示（基本）Threejsで読込、表示するにはglTFでエクスポートします。Blenderで保存単一ファイル(.glb)でエクスポートする方法分割ファイル(.gltf)でエクスポートする方法(.bin、テクスチャファイルが別で保存されます)Threejsで読込/表示圧縮したglTFの扱いBlenderで圧縮glTFでエクスポートすることができますが、Threejs側の対応も必要です。.gltfファイルも同様の対応で読み込み可能です。圧...

2023.04.15

BlenderThreejs(Java script)