Embed Three.js viewer in WPF

Question

I am trying to use Three.js to create a cross platform 3D renderer, one that can be used on almost any platform by simply using a "WebView"/"WebBrowser" type element inside a native application. So far I have got it working on Windows 8.1 (Store) and Windows Phone 8.1 applications and the viewer works fine in the Internet Explorer 11 desktop browser. My problem is that I cannot get it to work within a WPF application on the same desktop computer.

Currently I am using the following code to load my page:

            private const string MainUri = "file:///{0}/Html/stlviewer.html";
            string curDir = Directory.GetCurrentDirectory();
            webView.Navigate(new Uri(String.Format(MainUri, curDir)));

What happens then is that once I start my application firstly I get a dialog asking if I want to run ActiveX (this is not acceptable) and when I say yes I get error in three.min.js at line 22 char 190 with error "Expected ':' and code 0. This then ultimately causes undefined references to THREE in other JavaScript files as well as my main script in my html file.

I have tried adding the MARK OF THE WEB tag:

<!-- saved from url=(0016)http://localhost -->

And this does indeed take away the ActiveX dialog but it seems to make my JavaScript problem even worse because now I still get JavaScript errors in the same files but suddenly in all the files except my html file there is no information about the errors anymore, it just says 0 in all the fields except the error one which just says 'script error'.

What on earth could be causing this or at least what am I doing wrong because this works in normal IE, Store Apps and WP but now suddenly WPF decides that there is something wrong with the three.min.js file?

PS. My three.min.js file is the standard r66 one, I know r67 exists but WP 8.1 is not compatible with it yet.

EDIT: Just in case any of you were wondering, using the following tag instead also does not work:

<!-- saved from url=(0014)about:internet -->

EDIT: Ok I have found out that the problem might be that the WebBrowser in WPF uses IE7 (or is at least in a mode where it behaves like it) instead of IE11 but I do not know if this can be fixed.

EDIT: Ok WebGL is now at least working after following http://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version to set up the WebBrowser in IE11 mode but the moment I use the mark of the web tag to disable the ActiveX dialogs then suddenly I cannot load any JavaScript files anymore. With this setup though touch does not work as it does on the Desktop IE. I am using Hammer.js for touch but it does not seem to send multitouch info to Hammer, it only tries to implement pinch to zoom itself. Any ideas?

Answer 1

尝试使用CefSharp代替随 WinForms 和 WPF 一起开箱即用的WebBrowser组件。