标签 server 下的文章

准备阶段

本文案中用到的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/19666177

Blazor 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引用

        <!-- blazor基础框架js -->
        <script src="_framework/blazor.server.js"></script>
        <script src="_content/EventHorizon.Blazor.Server.Interop/server-interop-bridge.js"></script>

    <!-- Babylon.js -->
    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://cdn.babylonjs.com/ammo.js"></script>
    <script src="https://cdn.babylonjs.com/cannon.js"></script>
    <script src="https://cdn.babylonjs.com/Oimo.js"></script>
    <script src="https://cdn.babylonjs.com/libktx.js"></script>
    <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>

创建Babylon组件

为了测试是否可以正常使用，在项目下新建Controls文件夹，在此文件夹下新建-Razor组件。命名为TestComp。内容为：

<div>
    <canvas id="test-window" style="width:100%"></canvas>
</div>

添加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,true);
            var scene = await Scene.NewScene(engine);
            var cameraTarget = await Vector3.NewVector3(0, 0, 5);

            var camera = await ArcRotateCamera.NewArcRotateCamera(
                "ArcRotateCamera",
                (decimal)(System.Math.PI / 2),
                (decimal)(System.Math.PI / 2),
                2,
                cameraTarget,
                scene
            );
            var hemisphericLightDirection = await Vector3.NewVector3(1, 1, 0);
            var light1 = await HemisphericLight.NewHemisphericLight("light1", hemisphericLightDirection, scene);
            var pointLightDirection = await Vector3.NewVector3(0, 1, -1);

            var light2 = await PointLight.NewPointLight("Omni", pointLightDirection,scene);

            await Mesh.CreateSphere("sphere1",50,2, scene);

            await scene.set_activeCamera(camera);
            await camera.attachControl(false);

            await engine.runRenderLoop(new ActionCallback(
                            () => Task.Run(() => scene.render(true, false))
                        ));

            _engine = engine;
        }

        public async ValueTask RunAnimation(string name)
        {
            if (_runningAnimation != null)
            {
                await _runningAnimation.stop();
                _runningAnimation = null;
            }

            if (_animationMap.ContainsKey(name))
            {
                await _animationMap[name].play(true);
                _runningAnimation = _animationMap[name];
            }
        }
    }
}

测试

修改Pages/Index.razor文件，添加TestComp组件显示。

@page "/"

<h1>Babylon测试!</h1>

<Blazor.Test.Server.Controls.TestComp/>

启动，如果界面显示了模型，则说明可以正常使用了。

修改网站设置

如果上面的测试例子中，使用了glb模型，为了能在网站加载此模型，需要在StartUp.cs文件的Configure中添加如下代码，如果网站部署在IIS下，也可在IIS中手动配置MIME。


var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".fx"] = "application/fx";
provider.Mappings[".gltf"] = "model/vnd.gltf+json";
provider.Mappings[".glb"] = "application/octet-stream";