海纳百川 - wasm
type: channel
link: http://hnbc.info/index.php/tag/wasm/
items: 基于Blazor Server 的BabylonJs项目开发流程
items: 基于Blazor WebAssembly应用的BabylonJs项目开发流程

基于Blazor Server 的BabylonJs项目开发流程
type: item
date: 2021-06-15T07:03:00+00:00
description: 导航如果你要在Blazor WebAssembly应用中使用Babylonjs，请参考：https://www.hnbc.info/index.php/archives/40/准备阶段本文案中用到的Hnbc.Lib.Blazor.BabylonJS.Server项目，是基于Babylonjs官方javascript生成的供blazor使用的引用库。可通过https://github.com/canhorn/EventHorizon.Blazor.TypeScript.Interop.Generator 该工程进行生成。也可使用我已经生成好的项目直接使用：下载一：https://pan.baidu.com/s/19GgK3b09cIPAG4t-8sBw-g 提取码: fvxg 下载二：https://download.csdn.net/download/yuexingchen2/19666177Blazor Server应用配置生成基于Blazor的BabylonJs引用库参考:https://github.com/canhorn/EventHorizon.Blazor.TypeScript.Interop.Generator可直接clone该项目，然后生成，或者下载我已经处理好的：创建Blazor项目创建新项目，选择Blazor Server应用。添加Hnbc.Lib.Blazor.BabylonJS.Server项目将项目文Hnbc.Lib.Blazor.BabylonJS.Server拷贝到解决方案目录下，在解决方案上右键，添加现有项目，选择Hnbc.Lib.Blazor.BabylonJS.Server。添加项目引用在Blazor Server应用项目上添加项目引用，将Hnbc.Lib.Blazor.BabylonJS.Server引用到当前项目。修改App.razor在App.razor文件末尾，添加如下代码： @code { [Inject] public IJSRuntime JSRuntime { get; set; } protected override void OnInitialized() { EventHorizon.Blazor.Server.Interop.EventHorizonBlazorInterop.JSRuntime = JSRuntime; } }添加Js引用在Pages/_Host.cshtml文件中，添加Babylon的js引用和server-interop-bridge.js引用 创建Babylon组件为了测试是否可以正常使用，在项目下新建Controls文件夹，在此文件夹下新建-Razor组件。命名为TestComp。内容为： 添加TestComp的类文件，在Controls下添加名为TestComp.razor.cs的类文件，内容为：using BABYLON; using Hnbc.Lib.Blazor.BabylonJS.Server.Model; using EventHorizon.Blazor.Server.Interop.Callbacks; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace Blazor.Test.Server.Controls { public partial class TestComp : IDisposable { private IDictionary<string, AnimationGroup> _animationMap = new Dictionary<string, AnimationGroup>(); private AnimationGroup _runningAnimation = null; private Engine _engine; public Mesh Obj; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await CreateScene(); } } public void Dispose() { _engine?.dispose(); } public async ValueTask CreateScene() { var canvas = await Canvas.GetElementById("test-window"); var engine = await Engine.NewEngine(canvas,…

基于Blazor WebAssembly应用的BabylonJs项目开发流程
type: item
date: 2021-06-15T07:00:00+00:00
description: 导航如果你要在Blazor Server应用中使用Babylonjs，请参考：https://www.hnbc.info/index.php/archives/41/准备阶段本文案中用到的Hnbc.Lib.Blazor.BabylonJS.Wasm项目，是基于Babylonjs官方javascript生成的供blazor使用的引用库。可通过https://github.com/canhorn/EventHorizon.Blazor.TypeScript.Interop.Generator 该工程进行生成也可使用我已经生成好的项目：下载一：https://pan.baidu.com/s/19GgK3b09cIPAG4t-8sBw-g 提取码: fvxg 下载二：https://download.csdn.net/download/yuexingchen2/19666120Blazor WebAssembly应用配置创建Blazor项目创建新项目，选择Blazor WebAssembly应用。添加Hnbc.Lib.Blazor.BabylonJS.Wasm项目将项目文Hnbc.Lib.Blazor.BabylonJS.Wasm拷贝到解决方案目录下，在解决方案上右键，添加现有项目，选择Hnbc.Lib.Blazor.BabylonJS.Wasm。添加项目引用在Blazor WebAssembly应用上添加项目引用，将Hnbc.Lib.Blazor.BabylonJS.Wasm引用到当前项目。修改App.razor在App.razor文件末尾，添加如下代码： @code { [Inject] public IJSRuntime JSRuntime { get; set; } protected override void OnInitialized() { EventHorizon.Blazor.Interop.EventHorizonBlazorInterop.JSRuntime = JSRuntime; } }添加Js引用在wwwroot/index.html文件中，添加Babylon的js引用和interop-bridge.js引用添加interop-bridge.js引用，通常和blazor.webassembly.js在一起。 添加BabylonJs引用，通常放在head中。 创建Babylon组件为了测试是否可以正常使用，在项目下新建Controls文件夹，在此文件夹下新建-Razor组件。命名为TestComp。内容为： 添加TestComp的类文件，在Controls下添加名为TestComp.razor.cs的类文件，内容为：using BabylonJS; using Hnbc.Lib.Blazor.BabylonJS.Wasm.Model; using EventHorizon.Blazor.Interop.Callbacks; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace Blazor.Test.Client.Controls { public partial class TestComp : IDisposable { private IDictionary<string, AnimationGroup> _animationMap = new Dictionary<string, AnimationGroup>(); private AnimationGroup _runningAnimation = null; private Engine _engine; public Mesh Obj; protected override void OnAfterRender(bool firstRender) { if (firstRender) { CreateScene(); } } public void Dispose() { _engine?.dispose(); } public void CreateScene() { var canvas = Canvas.GetElementById("test-window"); var engine = new Engine(canvas, true); var scene = new Scene(engine); var cameraTarget = new BabylonJS.Vector3(0, 0, 5); var camera =new ArcRotateCamera( "ArcRo…