javascript - 将OpenJSCAD集成到MediaWiki

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

https://www.openjscad.org/

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

https://johnwebbcole.gitlab.io/vesa-shelf/

https://joostn.github.io/OpenJsCad/

https://github.com/jscad/OpenJSCAD.org/blob/V2/packages/web/demo.html

所有人都需要相当多的基础架构才能工作。

https://www.openjscad.org/
基于节点《用户指南》

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

但是没有说如何。

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

它的来源在https://github.com/danmarshall/jscad-gallery。这些文件的最新修改时间为2017年(截至本帖子发布大约2年前)。
它使用十几个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

首先，我只是通过从http://wiki.bitplan.com/index.php/ParametricLampShade复制html来创建https://risacher.org/OpenJsCad/lampshadedemo.html。

我把文件:

csg.js

lightgl.js

openjscad.js

进入文件夹扩展名/ 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'];
  }
  ...
}

openjscadurl取自基本路径，对于Mediawiki来说，该基本路径是../index.php。

我该如何解决？

需要的最小javascript文件集是什么，这些文件的正确版本是什么？

最佳答案

将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徽标代码