desc

Model preview function: get the corresponding file stream presumably for the model reading interface, and then load the model

use

Read the stream using zip.js;

Create the stream URL with url.createObjecturl ().

Load the model with three.js;

working

Const FileLoader = new three.fileloader (); Fileloader.setresponsetype (" arrayBuffer ").load(modelUrl, data => this.onModelLoad(data, scene),) zip. const zip = new JSZip(); const promise = JSZip.external.Promise; const baseUrl = 'blob:' + THREE.LoaderUtils.extractUrlBase(modelUrl); const fileMap = {}; const pendings = []; await zip.loadAsync(data); Url.createobjecturl () Creates the file URL: for (let file in zip.files) {const entry = zip.file(file); if (entry === null) continue; pendings.push(entry.async('blob').then((file, blob) => { fileMap[baseUrl + file] = URL.createObjectURL(blob); }.bind(this, file))); } await promise.all(pendings); Const modelUrl = object.keys (fileMap).find(item => reg.test(item)); if (! modelUrl) { return; } three. Js TDSLoader load 3ds model (other types of model use other loader): const manager = new three. LoadingManager(); CreateObjectURL (); // Modify the URL, such as a 3ds model zip file with texture images, but the url created with url.createObjecturl () does not correspond to the original url. SetURLModifier ((fileMap, url) => {return fileMap[url]? fileMap[url] : url; }); const loader = new TDSLoader(manager); loader.load(modelUrl, group => { scene.add(group) })Copy the code

problems

Jszip.min. js:13 Uncaught (in promise) Error: jszip.min.js:13 Uncaught (in promise) Error: The constructor with parameters has been removed in JSZip 3.0, please check The upgrade guide. 3.0 before: Const zip = new JSZip(); const zip = new JSZip(); Zip. LoadAsync. Then (resp => {}) 2.three. You can set opacity of material to false and modify opacity of MaterialCopy the code