Android向けスマホアプリを.NET MAUI Blazor Hybrid で開発するとき Three.js を使うことはできるのでしょうか？ npm があれば簡単に使うことができます。
npm をインストールする
npm がないなら Node.js をインストールしましょう。npm は Node.js をインストールすると自動的にインストールされます。
ところで WindowsPowerShell で npm を使おうとすると
npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことができません。
というエラーが出るときがあります。このようなときは PowerShell で
|
1 |
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned |
とやれば次回以降はうまくいきます。
npm で Three.js と vite をインストールする
.NET MAUI Blazor Hybrid のプロジェクトのフォルダに移動しましょう。そこで
|
1 2 3 |
npm init -y npm install three npm install -D vite |
を実行します。
プロジェクトのフォルダ内に package.json というファイルが生成されているはずなので、これを編集します。
package.json の scripts に “build”: “vite build” を追加します。既存の scripts がある場合は削除せず、項目を追加してください。
package.json
|
1 2 3 4 5 |
{ "scripts": { "build": "vite build" } } |
プロジェクトのフォルダ内に vite.config.js を作成して以下のコードを書きます。
vite.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { defineConfig } from 'vite'; export default defineConfig({ build: { outDir: 'wwwroot/dist', emptyOutDir: true, lib: { entry: 'wwwroot/js/main.js', formats: ['es'], fileName: () => 'main.js' } } }); |
Home.razor の編集
Home.razor を編集します。
Components\Pages\Home.razor
|
1 2 3 4 5 |
@page "/" <div id="container"></div> <script type="module" src="dist/main.js"></script> |
style.css の作成と編集
wwwroot フォルダ内に style.css を作成し、以下を書きます。
wwwroot\style.css
|
1 2 3 4 5 6 7 |
#container { width: 100%; /* 100vh だとPCでデバッグするとき画面下部が表示されないので95vhにする */ height: 95vh; position: relative; overflow: hidden; } |
wwwroot.index.html の <head> </head> の最後に以下の行を追加して読み込めるようにしておいてください。
|
1 |
<link rel="stylesheet" href="style.css" /> |
main.js の作成と編集
wwwrootフォルダ内に js というフォルダを作成し、そのなかに main.js を作成して以下のように書きます。
これは中央に回転している立方体を表示させるサンプルプログラムです。
wwwroot\js\main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import * as THREE from 'three'; const $container = document.getElementById('container'); const scene = new THREE.Scene(); // onWindowResize(後述) で $containerの幅、高さを取得して調整するので、ここでは適当な値を設定する const w = 1; const h = 1; const camera = new THREE.PerspectiveCamera( 75, w / h, 0.1, 1000 ); camera.position.z = 5; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(w, h); $container.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const cube = new THREE.Mesh(geometry, material); scene.add(cube); scene.background = new THREE.Color(0x0000ff); // 背景は 青 onWindowResize(); function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); // ウィンドウサイズ変更時の処理 window.addEventListener('resize', () => { onWindowResize(); }); function onWindowResize() { // 描画サイズを $container のサイズに合わせたいので取得する const cw = $container.clientWidth; const ch = $container.clientHeight; camera.aspect = cw / ch; // カメラのアスペクト比を更新 camera.updateProjectionMatrix(); // 投影行列を更新 renderer.setSize(cw, ch); // 描画サイズを更新 } |
npm run build の実行
WindowsPowerShell で 以下を実行します。
|
1 2 |
cd <プロジェクトフォルダのパス> npm run build |
これで dist\main.js にファイルが生成されます。
Visual Studioのビルド時に npm run build を自動実行する
js\main.js を編集するたびに上記を手動で実行するのは地味に面倒くさいので[ビルド]ボタンを押下したら自動的にこれを実行してくれるようにします。
プロジェクト名が MauiApp ならプロジェクトフォルダ内に MauiApp.csproj があるのでこれを編集します。
</Project> の直前に以下を追加します。
MauiApp.csproj
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ItemGroup> <!-- Three.jsのソースファイル --> <UpToDateCheckInput Include="wwwroot\js\**\*.js" /> <!-- npmの設定ファイル --> <UpToDateCheckInput Include="package.json" /> <UpToDateCheckInput Include="package-lock.json" /> <!-- ビルドによって生成されるファイル --> <UpToDateCheckOutput Include="wwwroot\dist\main.js" /> </ItemGroup> <Target Name="BuildThreeJs" BeforeTargets="PrepareForBuild"> <Exec Command="npm run build" WorkingDirectory="$(MSBuildProjectDirectory)" /> </Target> |
これでビルドするたびに必要であれば npm run build も実行されます。
PCにおけるアプリの表示サイズを設定する
あと実機テストやエミュレーターを使うと重くなるので PC だけで簡単なデバッグをしたくなる場合があります。そんなときにスマホに近いサイズでアプリを表示させるにはどうすればよいでしょうか？
プロジェクトフォルダ内にある App.xaml.cs の CreateWindowメソッドを編集します。
PCの環境によってWebViewの表示領域が異なります。自分の環境では調整値として1.2を掛けています。
App.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
protected override Window CreateWindow(IActivationState? activationState) { //return new Window(new MainPage()) { Title = "MauiApp2" }; var window = new Window(new MainPage()) { Title = "MauiApp2" }; #if WINDOWS // ディスプレイの設定によって 360 だとうまく表示されない場合がある。 // その場合は適当な値を掛けて調整する（本当に適当な弥縫策） window.Width = 360 * 1.2; window.Height = 600 * 1.2; #endif return window; } |
