0x00Wedge最近做的一个项目是油田3D可视化监控的场景编辑监控系统。它有点类似于3D配置，但主要用于油田。效果如下图所示：首先当然是上传模型，设计师会跟进。配合相关模型，使用我们开发的编辑器，通过模型拖拽编辑、流水线编辑等，很快就可以编辑出上述场景：一切顺利。直到客户说，我们有一个WPF开发的桌面程序，需要把你的3D嵌入桌面。0x01Silence一开始我们很困惑。毕竟我们主要做的是JavaScript前端开发，接触C#之类的很少。抱着试一试的态度，在开发群里问，有没有懂WPF开发的？它沉默了。..因为基本都是前端开发专业的，所以无可厚非。0x02既然没有人能做最初的尝试，怎么办？我只能自己做。虽然接触过C#相关开发的不多，但是Java、Python、C、Flex、JavaScript等都做过开发。有多年的开发经验，相信不会太难。当然第一步是下载vsstudio。看到nG下载的时候，心还是碎的。等了好久，终于下载安装了vsstudio。因为我们的3D管理是基于网页的WebGL开发的，所以我觉得要寻找的方向是WPF里面有没有类似浏览器的控件。搜索了一下，找到了，是WebBrowser控件，大致使用如下，可惜这个控件确实可以显示网页,但它不支持WebGL。一开始以为是使用了IE内核的问题，后来换成chrome内核，发现还是不行。最初的尝试失败了。..0x03当CefSharp出现困惑时，他只能依靠一个伟大的搜索引擎。当然，我这里说的不是某种程度。发现神器CefSharp。CefSharp允许您在.NET应用程序中嵌入Chromium，CefSharp相当于chrome浏览器。感觉CefSharp应该可以支持WebGL功能，所以决定试一试。0x04安装CefSharp我决定使用NuGet安装CefSharp包。如果你是做C#开发的，相信你对NuGet应该不陌生。如果你不做C#开发。那么你可以这样理解NuGet：如果你知道python，它类似于pip。如果你了解nodejs，它类似于npm。如果您了解红宝石，它就像一颗宝石。如果你知道java，它类似于maven。在创建的wpf项目的解决方案上右击，可以找到NuGet管理：点击“ManageNuGetpackageofthesolution”，在出来的界面的搜索框中输入CefSharp，可以找到CefSharp相关的包，因为我们使用WPF，所以选择CefSharp.Wpf下载安装：0x05ConfigureCefSharp安装好CefSharp.Wpf后，在项目中使用using语句导入Cefsharp，发现报错，如下图：因为项目需要待配置。A.CefSharp51及以上版本CefSharp51及以上版本支持AnyCPU，但仍需做简单配置。首先，启用“prefer32-bit”选项，右击项目名称，选择属性，在打开的界面中勾选：然后，找到项目的“.csproj”文件，在末尾添加如下文字:true你的“.csproj”文件应该是这样的：最后，修改你的app.config文件，在解决方案下：将以下文本添加到文件中：然后，您的app.config文件应如下所示：B.CefSharpversion49orolderCefSharpversion49及更早版本不支持AnyCPU，因此需要指定编译架构。否则会出现如下提示：CefSharp.CommondoesnotcorrectlyonAnyCPUplatform。您需要指定平台(x86/x64)。右击解决方案，选择Properties，出现如下界面：ConfigurationProperties--》Configuration下，把BothReleaseandDebugplatforms指定具体的平台，比如x64.0x06UseCefSharp经过上面的配置，就可以使用CefSharp控件，首先介绍控件：usingCefSharp;usingCefSharp.Wpf;然后，开始初始化ChromiumWebBrowser，如下：提供的设置Cef.Initialize(settings);//创建一个浏览器组件chromeBrowser=newChromiumWebBrowser("http://localhost:8080");//添加到表单并填充到表单窗口。//this.AddChild(chromeBrowser)MainGrid.Children.Add(chromeBrowser);}创建一个ChromiumWebBrowser对象，创建的时候传入我们3D应用的地址；然后把这个对象添加到Wpf界面中，启动项目，可以得到如下界面，3D应用正常出来：0x07添加调试功能代码。如果代码无法调试，那是一件很可怕的事情。CefSharp控件和chrome浏览器一样，可以打开控制台。具体来说，ChromiumWebBrowser对象上有一个ShowDevTools函数，可以打开控制台。因此，我们添加了键盘监控。当按下F12时，调用此函数打开控制台：privatevoidMainWindows_Keydown(objectsender,KeyEventArgse){//判断用户的按键是否为F12if(e.KeyStates==Keyboard.GetKeyStates(Key.F12)){chromeBrowser.ShowDevTools();}elseif(e.KeyStates==Keyboard.GetKeyStates(Key.F11)){chromeBrowser.Reload();}}在界面上按F12键效果如下：0x08最后，使用CefSharp基本可以解决客户对WPF嵌入3D应用的需求。虽然CefSharp控件和chrome浏览器相比还是有一些差距，比如性能效率，以及以后可能遇到的一些兼容性问题。但就目前而言，客户非常满意。这就够了。0x09参考https://ourcodeworld.com/articles/read/173/how-to-use-cefsharp-chromium-embedded-framework-csharp-in-a-winforms-application欢迎关注公众号《ITman表叔》“。飚叔，10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。对计算机图形学、WebGL、前端可视化有深入研究。对程序员思维能力的训练与训练，程序员职业生涯规划有着浓厚的兴趣。
