1

我遇到了一个问题，我似乎无法弄清楚如何解决。我在一个项目中同时使用了 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>
4

0 回答 0