我所知道的用于显示JSCad设计的当前解决方案:
- https://www.openjscad.org/
- https://danmarshall.github.io/jscad-gallery/
- https://risacher.org/OpenJsCad
- 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/
是基于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://risacher.org/OpenJsCad/lampshadedemo.html中的HTML代码来创建了http://wiki.bitplan.com/index.php/ParametricLampShade。
我将文件放置在:
- csg.js
- lightgl.js
- 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文件集是什么,这些文件的适当版本是什么?