将OpenJSCAD集成到MediaWiki中

3

我所知道的用于显示JSCad设计的当前解决方案:

所有这些都需要相当多的基础设施才能运行。

https://www.openjscad.org/
是基于Node的用户指南。

https://www.openjscad.org/dokuwiki/doku.php?id=user_guide_website states

这个网站可以集成到现有的网站中。

但没有说明如何实现。

https://danmarshall.github.io/jscad-gallery/

它的源代码位于 https://github.com/danmarshall/jscad-gallery。截至本帖发布时,这些代码最后修改于2017年(大约两年前)。 它使用了几十个JavaScript文件和Jekyll来实现其目的。
例如:https://danmarshall.github.io/jscad-gallery/s-hook 页面的源代码非常简短:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSCAD Gallery s-hook</title>
    <link rel="stylesheet" type="text/css" href="/jscad-gallery/site.css"/>
    <script src='/jscad-gallery/browser_modules/@jscad/csg/0.3.7.js' type="text/javascript"></script>
    <script src='/jscad-gallery/js/jscad-viewer.js' type="text/javascript"></script>
    <script src='/jscad-gallery/js/ui.js' type="text/javascript"></script></head>
<body>
    <h1>s-hook</h1>

<p>a simple S-hook design</p>


<div id="detail-viewer"></div>

<div id="inputs"></div>

<button onclick="detailView.export('stl', document.getElementById('download'))">Generate STL</button>
<div id="download"></div>

<script>

    var design = {
        title: "s-hook",
        updated: null,
        author: "Joost Nieuwenhuijse",
        version: "1.0.0",
        dependencies: [{"@jscad/scad-api":"^0.4.2"}],
        image: "/browser_modules/s-hook/thumbnail.png",
        camera: {"angle":{"x":-60,"y":0,"z":-45},"position":{"x":0,"y":0,"z":116}}
    };

    var detailView = new JscadGallery.DesignView();
    detailView.load(document.getElementById('detail-viewer'), design, document.getElementById('inputs'));

</script>


    <footer>
        <a href="https://github.com/danmarshall/jscad-gallery">Jscad-gallery on GitHub</a>
    </footer>
</body>
</html>

我希望能够找到一个简单的解决方案,可以嵌入到Mediawiki中。起初,一个带有一些JavaScript的纯HTML页面对我来说已经足够了。
另请参见:

https://openjscad.nodebb.com/topic/98/displaying-jscad-designs-in-media-wiki-or-plain-html-for-a-start

首先,我通过简单地复制https://risacher.org/OpenJsCad/lampshadedemo.html中的HTML代码来创建了http://wiki.bitplan.com/index.php/ParametricLampShade

我将文件放置在:

  1. csg.js
  2. lightgl.js
  3. openjscad.js

将其放入文件夹 extensions/OpenJsCad 中。

使用这种简单方法会出现错误:

Error in line 466: NetworkError: Failed to load worker script at http://wiki.bitplan.com/index.php/csg.js (nsresult = 0x804b001d)

原因似乎在openjscad.js中:
// callback: should be function(error, csg)
OpenJsCad.parseJsCadScriptASync = function(script, mainParameters, options, callback) {
  var baselibraries = [
    "csg.js",
    "openjscad.js"
  ];

  var baseurl = document.location.href.replace(/\?.*$/, '');
  var openjscadurl = baseurl;
  if (options['openJsCadPath'] != null) {
    openjscadurl = OpenJsCad.makeAbsoluteUrl( options['openJsCadPath'], baseurl );
  }

  var libraries = [];
  if (options['libraries'] != null) {
    libraries = options['libraries'];
  }
  ...
}

开放式jscadurl取自基本路径,对于MediaWiki来说是../index.php。
我该如何解决这个问题?
需要的最小JavaScript文件集是什么,这些文件的适当版本是什么?

1
我现在在 https://github.com/jscad/OpenJSCAD.org/issues/448 创建了一个问题。 - Wolfgang Fahl
2个回答

3

这看起来很不错!作为一个新手,我现在需要一些关于如何和在哪里应用“-standalone”开关以及进行实际集成的文档。 - Wolfgang Fahl

3

将baseurl计算方式更改为:

  //alert(document.location);
  var baseurl = document.location.href.replace(/index.php\/.*$/, 'extensions/OpenJsCad/');
  //alert(baseurl);

问题已经修复。

请参见http://wiki.bitplan.com/index.php/ParametricLampShade查看结果。

这是一个概念验证。

http://wiki.bitplan.com/index.php/Template:Jscad现在拥有一个Mediawiki模板。

我仍然想学习应该使用哪些JavaScript文件和版本。由于当前的方法使用了一些过时的JavaScript文件,甚至无法渲染来自http://openjscad.org的OpenJSCAD标志代码。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接