Paraview Glance打开url文件

一、关于paraview

paraview是一个基于vtk的免费、开源的3D数据显示、处理软件。目前，paraview有分别有桌面版(paraview-desktop)、web前端版本（paraview glance）、web后台版本（paraview Visualizer），还有一些light轻量版本。介绍如下：Web | ParaView

• paraview Desktop
• paraview Glance
• paraview Visualizer
• paraview LightViz
• paraview ArcticViewer
• paraview DataView
• paraview SimPut

二、部署paraview glance

Paraview Glance属于一个前端版本，属于基于WebGL驱动的js,因此，部署很简单，只需要用web服务器部署网站即可。

1、准备linux环境，windows下编译错误！

准备一个linux环境，一般可以用windows的linux子系统，安装nodejs和nmp

sudo apt-get install nodejs npm

安装以后，运行npm命令要通过sudo npm才可以

2、配置nmp

(1) 更换国内源

安装nrm

sudo npm install -g nrm

然后通过

sudo nrm ls

显示可以用的源

最后，通过

sudo nrm use taobao

来选择使用源

（2）升级node和npm

升级npm

sudo npm install -g npm

之后，安装n模块

sudo npm install -g n

使用n模块来更新nodejs

sudo n stable 最新稳定版

sudo n latest 最新版

sudo n lts 长期支持版

3、下载paraview glance

(1)首先要安装node和git.安装过程省略。

(2)到paraview glance的github页面执行操作

Kitware/paraview-glance: ParaView Glance is an open-source web application developed at Kitware for visualizing volumetric images, molecular structures, geometric objects, and point clouds. It is part of the ParaView platform and can serve as a foundation for building custom web-based visualization applications involving ITK.js and VTK.js. (github.com)

(3)编译release版本

$ git clone https://github.com/Kitware/paraview-glance.git
$ cd paraview-glance/
$ npm install
$ npm run build:release

执行命令后，可得到一个dist文件夹，里面有index.html等网站文件。如图所示。

4、部署

类似于一般网站，在nginx的配置文件里进行设置

server {
        listen       9001;
        server_name  localhost;
	client_max_body_size 10000M;
	proxy_max_temp_file_size 0;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:\paraview-glance;
	    try_files $uri $uri/ /index.html;
            index  index.html index.htm;         
            
        }
        
        

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

需要说明的是：

• server_name：这里填写localhost是可以在本地访问，也可以局域网访问的
• client_max_body_size：建议写大点，因为要可能需要传输文件到前台渲染
• location：填写编译生成的dist的路径

三、初步测试

打开浏览器，输入127.0.0.1:9001后，

说明配置ok，拖动一个tif文件，效果如下图

四、打开url

paraview的文档里给出了打开url文件链接的方法。

Loading Files | ParaView Glance (kitware.github.io)

现在的问题是，如何将服务器的3D对象生成url链接，笔者想到的简单的办法就是再通过nginx服务器，直接搭建文件的http服务器。

nginx的配置如下：

server {
        listen       9002;
        server_name  localhost;
	client_max_body_size 10000M;
	proxy_max_temp_file_size 1000M;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\DCAPLAT\upload;
	    try_files $uri $uri/ /index.html;
            index  index.html index.htm;           
    	    add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GEt,POST,OPTIONS';
            add_header Access-Control-Allow-Header 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';        
            
}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

特别要注意的是，要添加上述代码中的

• add_header Access-Control-Allow-Origin *;           
• add_header Access-Control-Allow-Methods ‘GEt,POST,OPTIONS’;           
• add_header Access-Control-Allow-Header ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization’;           

这三行，是为http添加请求头，如果没有这个请求头，无法通过chrome浏览器的安全机制，paraview glance会请求失败。

ok，至此，大功告成。只需要将要加载的文件放在该server的location下即可。