SView Help Center
English (US)

界面搭建

Author: sviewngts Last Updated: 2026-09-08 16:57

    在集成界面文件中增加SView for HTML5所需标签,具体可参考控件包中sview3d.html中body下标签。

<div id="mainSection" style="display: flex;width:100%;height:100%;position:absolute">
    <!--三维视口-->
    <div id="mainView" style="width:100%;height:100%;display:flex;position:relative;background-color:aliceblue;z-index:0;user-select:none;overflow:hidden">
        <div id="sview_1" class="render_view_div">
            <!--多视口-->
            <div id="views" class="render_views">
                <!--单个模型视口行-->
                <div id="singleModel" class="render_single_div" style="">
                    <div id="changeCompareBasic" class="SView_change_compare_basic_button">
                    </div>
                    <!--模型一视口-->
                    <div id="model_1" class="render_view_div">
                        <p class="file_name_p" id="file_name_1"></p>
                        <canvas id="gesture_canvas" style="display:none;position:fixed;top:0;left: 0;z-index:-1;" langid="warning.browserNotSupportCanvas">您的浏览器不支持 canvas 标签</canvas>
                        <video style="display:none;" id='video' class="dx-theme-background-color" autoplay muted playsinline autobuffer></video>
                        <!--odaCanvas-->
                        <canvas id="odaCanvas" style="display: none; width: 100%; height: 100%;"></canvas>
                    </div>
                    <!--模型二视口-->
                    <div id="model_2" class="model_div SView-hide">
                        <p class="file_name_p" id="file_name_2"></p>
                    </div>
                </div>
                <!--模型比对视口行-->
                <div id="modelCompare" class="model_compare_div SView-hide" style="">
                    <!--装配树-->
                    <div id="assemblyTree1" class="assemblyTree compare_assembly_tree" style="">
                    </div>
                    <div id="assemblyTree2" class="assemblyTree compare_assembly_tree" style="">
                    </div>
                    <!--模型比对视口-->
                    <div id="compare" class="compare_div">
                        <div class="description_div" id="description" style="position: absolute; display: block">
                        </div>
                    </div>
                    <!--模型比对结果展示-->
                    <div id="compareResult" class="compare_result_div">
                        <div id="compareResultTitle"></div>
                        <div id="compareResultContent" class="compare_result_content_div">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 预览PDF div  -->
    <div id="preViewPdf" style=" display: none;border: 1px solid #000000; box-sizing: border-box; width: 100%; height: 100%; background-color: aliceblue; z-index: 0; user-select: none; overflow: hidden ">
        <iframe id="iframe_pdf" style="width:100%;height:100%;border:none;"></iframe>
    </div>
</div>
<div class="newAssembleTreeInfo" style="display:none">
    <div class="assembly-tree" id="setting_assembly_tree">
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="ModelTree" class="ztree"></ul>
            </div>
        </div>
    </div>
</div>