关于前端:Online3DViewer-使用心得

8次阅读

共计 2182 个字符，预计需要花费 6 分钟才能阅读完成。

因为业务须要，须要展现 3D 文件，之前我曾经写了一个 three.js 来渲染 3D 数据的计划，原本认为能够间接拿来用，然而甲方那边须要后另外一个业务用同样的技术路线 online-3d-viewer (就是对 three.js 进行了二次封装 )，只好从他们我的项目外面拿来借鉴一下，然而因为一个 api 的差别，导致我被卡了一天，在这里记录一下，如果各位大佬有其余的更好的解决办法，欢送回复。

一开始我拿过去的代码感觉是能够间接应用的，然而在一开始就出了问题，原来的你代码外面很多函数都有问题，感觉那边我的项目的不晓得从哪里 copy 来的代码，没有依据库的版本进行批改，很多办法曾经不反对了。。这都是小事，去看了源码之后都找到了相应的替换办法。

然而在获取数据的时候出了一个问题，在原来的逻辑外面，获取数据是通过 api 间接拿到一个 zip 文件的, 这里有一个问题就是，他们我的项目这个接口是不须要 token 的，公共数据，能够间接拿到，我我的项目外面是须要权限才能够获取数据，间接时应用 url 会出问题

// 原代码
import * as OV from 'online-3d-viewer';

...

const inputEle = useRef(null)

const url = [`/api/public/file/download.zip?fileId=${el.media3D.documents}`]

const load3d = () => {
      // tell the engine where to find the libs folder
      OV.SetExternalLibLocation ('build/libs');
      // initialize the viewer with the parent element and some parameters
      let viewer = new OV.EmbeddedViewer (inputEle.current, {
        // 观看视角
        camera : new OV.Camera (new OV.Coord3D (-1.5, -3.0, 2.0),
          new OV.Coord3D (0.0, 0.0, 0.0),
          new OV.Coord3D (0.0, 0.0, 1.0)
        ),
        // 背景色彩
        backgroundColor : new OV.Color (255, 255, 255),
        defaultColor : new OV.Color (200, 200, 200),
        // 边框设置
        edgeSettings : {
          showEdges : false,
          edgeColor : new OV.Color (0, 0, 0),
          edgeThreshold : 1
        },
        // 背景图片设置
        environmentMap : [],
        // onModelLoaded : () => {//   let model = viewer.GetModel ();
        //   // do something with the model
        // }
      });
      
      // load a model providing model urls DamagedHelmet
        
      viewer.LoadModelFromUrls (url); 
    }
    if (inputEle.current) {load3d()
    }
}
...
<div ref={inputEle} style={{width: '100%', height: '650px'}}></div>

在下面的代码外面，OV 的办法根本都有问题, 因为用的库版本是 "online-3d-viewer": "^0.8.17", 所以外面的办法要替换成

OV.Color  => OV.RGBColor
OV.LoadModelFromUrls  => OV.LoadModelFromUrlList

从下面的咱们能够看到，用的办法是 LoadModelFromUrlList，从翻译就能看出要的是 url 列表，而咱们的接口因为须要权限，所以在这里是不实用的，只好去翻找源码，而后就看到了上面的局部

LoadModelFromUrlList (modelUrls)
    {TransformFileHostUrls (modelUrls);
        let inputFiles = InputFilesFromUrls (modelUrls);
        this.LoadModelFromInputFiles (inputFiles);
    }

从下面的代码能够看出，他应用 url 也是获取数据之后调用了外部的 LoadModelFromInputFiles 办法去执行文件，那我能够间接本人获取文件而后运行啊，因而就有了上面的批改, 最初实现了性能。

// 通过接口获取文件的 blob
const res = await FileService.downloadZipForPreview(fileId)
let blob = new Blob([res], {type: '',})
// 通过 File 将流转换成文件
let files = await new File([blob], 'xxx.zip', {type: 'application/zip',})
// 给当初的文件对象增加一些字段, 这些字段是前面的函数解决步骤种须要用到的,
// 间接应用 file 会因为参数缺失导致谬误, 这部分是要害
files.data = res
// 定义文件类型,
// {Url : 1, File : 2,Decompressed : 3}
files.source = 2
viewer.LoadModelFromInputFiles([files])

正文完