如何在Django中使用pythonOCC将3D对象呈现为HTML文件？

如何解决如何在Django中使用pythonOCC将3D对象呈现为HTML文件？

我有一个Django应用程序，并且正在使用pythonOCC包。我必须在模板中显示3D .stl，.stp，.igs文件。通常，当我调用render（）函数时，以下输出将显示在我的vscode控制台上，并且由于是由pythonocc而不是django创建的flask应用程序开始在本地主机上运行，因此不会渲染我的index.html。但是我需要在Django模板中显示文件。这就是为什么我将X3DomRenderer Class扩展如下。

我的自定义 x3domRenderer类：

class Customx3domRenderer(x3dom_renderer.x3domRenderer):
    def render_to_string(self):
        self.generate_html_file(self._axes_plane,self._axes_plane_zoom_factor)
        return open(self._html_filename,'r').read()

从render_to_string（）函数返回的HTML代码：

<html lang="en">
<head>
    <title>pythonOCC 7.4.0 x3dom renderer</title>
    <Meta name='Author' content='Thomas Paviot - tpaviot@gmail.com'>
    <Meta name='Keywords' content='WebGl,pythonOCC'>
    <Meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://x3dom.org/release/x3dom.css">
    <script src="https://x3dom.org/release/x3dom.js"></script>
    <style>
        body {
            background: linear-gradient(#ced7de,#808080);
            margin: 0px;
            overflow: hidden;
        }
        #pythonocc_rocks {
            padding: 5px;
            position: absolute;
            left: 1%;
            bottom: 2%;
            height: 38px;
            width: 280px;
            border-radius: 5px;
            border: 2px solid #f7941e;
            opacity: 0.7;
            font-family: Arial;
            background-color: #414042;
            color: #ffffff;
            font-size: 14px;
            opacity: 0.5;
        }
        #commands {
            padding: 5px;
            position: absolute;
            right: 1%;
            top: 2%;
            height: 65px;
            width: 180px;
            border-radius: 5px;
            border: 2px solid #f7941e;
            opacity: 0.7;
            font-family: Arial;
            background-color: #414042;
            color: #ffffff;
            font-size: 14px;
            opacity: 0.5;
        }
        a {
            color: #f7941e;
            text-decoration: none;
        }
        a:hover {
            color: #ffffff;
        }
    </style>
</head>

<body>

        <x3d id="pythonocc-x3d-scene" style="width:100%;border: none" >
                <Scene>

            <transform scale="1,1,1">
            <transform id="plane_smallaxe_Id" rotation="1 0 0 -1.57079632679">
                <inline url="https://rawcdn.githack.com/x3dom/component-editor/master/static/x3d/plane.x3d" mapDEFToID="true" namespaceName="plane"></inline>
                <inline url="https://rawcdn.githack.com/x3dom/component-editor/master/static/x3d/axesSmall.x3d" mapDEFToID="true" namespaceName="axesSmall"></inline>
            </transform>
            <inline url="https://rawcdn.githack.com/x3dom/component-editor/master/static/x3d/axes.x3d" mapDEFToID="true" namespaceName="axes"></inline>
            </transform>
            <transform id="glbal_scene_rotation_Id" rotation="1 0 0 -1.57079632679">                    <Inline onload="fitCamera()" mapDEFToID="true" url="shp6b8ef6d6e61744489de16a6798cfe998.x3d"></Inline>
</transform>            </Scene>
        </x3d>

    <div id="pythonocc_rocks">
        pythonocc-7.4.0 <a href="https://www.x3dom.org" target="_blank">x3dom</a> renderer
        <br>Check our blog at
        <a href=http://www.pythonocc.org>http://www.pythonocc.org</a>
    </div>
    <div id="commands">
    <b>t</b> view/hide shape<br>
    <b>r</b> reset view<br>
    <b>a</b> show all<br>
    <b>u</b> upright<br>
    </div>
    <script>
    var selected_target_color = null;
    var current_selected_shape = null;
    var current_mat = null;
    function fitCamera()
    {
        var x3dElem = document.getElementById('pythonocc-x3d-scene');
        x3dElem.runtime.fitAll();
    }
    function select(the_shape) // called whenever a shape is clicked
    {
        // restore color for prevIoUs selected shape
        if (current_mat) {
            current_mat.diffuseColor = selected_target_color;
        }
        // store the shape for future process
        current_selected_shape = the_shape;
        console.log(the_shape);
        // store color,to be restored later
        appear = current_selected_shape.getElementsByTagName("Appearance")[0];
        mat = appear.getElementsByTagName("Material")[0];
        current_mat = mat;
        console.log(mat);
        selected_target_color = mat.diffuseColor;
        mat.diffuseColor = "1,0.65,0";
        //console.log(the_shape.getElementsByTagName("Appearance"));//.getAttribute('diffuseColor'));
    }
    function onDocumentKeyPress(event) {
      event.preventDefault();
      if (event.key=="t") {  // t key
         if (current_selected_shape) {
           if (current_selected_shape.render == "true") {
              current_selected_shape.render = "false";
           }
           else {
              current_selected_shape.render = "true";
           }
         }
      }

    }
    // add events
    document.addEventListener('keypress',onDocumentKeyPress,false);
    </script>
</body>
</html>

这是我的观点：

def occ_viewer(request):
    shape = read_step_file(os.path.join('C:/Users/imgea/desktop/bgtask/bgtask/ThreeDFile','splinecage.stp'))
    my_renderer = extend_x3dom.Customx3domRenderer(path='C:/Users/imgea/desktop/bgtask/bgtask/ThreeDFile')
    my_renderer.displayShape(shape)
    context = {'viewer': my_renderer.render_to_string()}
    return render(request,'success.html',context)

，并且将我从render_to_string()函数获得的这些HTML代码添加到了模板文件中。查看器的网格已显示，但由于以下错误而未显示3D对象。

Page not found: http://127.0.0.1:8000/file/occview/shp6b8ef6d6e61744489de16a6798cfe998.x3d

该库在与我要渲染到模板的文件相同的目录中创建该.x3d文件，但是我猜想查看器正在寻找该.x3d文件，即使我发送该目录也遇到了我之前提到的错误。我找不到此错误的原因。我想念什么吗？

谢谢！