Question

我遇到了一个问题，我似乎无法弄清楚如何修复。我正在使用mathquill（https://github.com/laughinghan/mathquill#readme）和Three.js（https://github.com/mrdoob/three.js/）进行项目。

然而，当我将webGLRenderer附加到我的页面DOM时，它会使用mathquill的公式编辑器降低性能（或做一些时髦的事情）。基本上，光标变得不可见，并且很难输入任何东西。如果您注释掉下面的行（####），您将能够比较我在文本框中与等式交互时的含义。

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <link rel="stylesheet" type="text/css" href="mathquill.css">
</head>
<body>
  <div id="viewport" z-index:"-1">
<canvas width="1920" height="713">
  </div>
  <div class="math" style="background: rgba(255,255,255,0.2);position:absolute;z-index:2;width:1920px;height:713px;top:150px;left:150px;">
    <p><span class="mathquill-editable">\frac{5+\theta}{\int_0^x\theta}</span></p>
  </div>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="mathquill.js"></script>
  <script type="text/javascript" src="three.js"></script>
  <script type="text/javascript">
    $(function(){
      var latexMath = $('.mathquill-editable').bind('keydown keypress').keydown().focus();
    });

    window.onload = function() {

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( 800, 600 );
        // ###########  uncomment the next line ######################
        //document.body.appendChild( renderer.domElement );
    };
  </script>
</body></html>

webGLRenderer使用mathquill方程式编辑来降低性能

0 个答案: