Add 3D-file-viewer component #1558
8 changed files with 21 additions and 22 deletions
|
@ -53,6 +53,13 @@ app.setAsDefaultProtocolClient('lbry');
|
||||||
app.setName('LBRY');
|
app.setName('LBRY');
|
||||||
app.setAppUserModelId('io.lbry.LBRY');
|
app.setAppUserModelId('io.lbry.LBRY');
|
||||||
|
|
||||||
|
if (isDev) {
|
||||||
|
// Enable WEBGL
|
||||||
|
app.commandLine.appendSwitch('ignore-gpu-blacklist');
|
||||||
|
app.commandLine.appendSwitch('--disable-gpu-process-crash-limit');
|
||||||
|
app.disableDomainBlockingFor3DAPIs();
|
||||||
|
}
|
||||||
|
|
||||||
app.on('ready', async () => {
|
app.on('ready', async () => {
|
||||||
const processList = await findProcess('name', 'lbrynet-daemon');
|
const processList = await findProcess('name', 'lbrynet-daemon');
|
||||||
const isDaemonRunning = processList.length > 0;
|
const isDaemonRunning = processList.length > 0;
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import LoadingScreen from 'component/common/loading-screen';
|
import LoadingScreen from 'component/common/loading-screen';
|
||||||
import PdfViewer from 'component/viewers/pdfViewer';
|
import PdfViewer from 'component/viewers/pdfViewer';
|
||||||
import ThreeViewer from 'component/threeViewer';
|
import ThreeViewer from 'component/viewers/threeViewer';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
mediaType: string,
|
mediaType: string,
|
||||||
|
|
|
@ -69,7 +69,7 @@ class ThreeViewer extends React.PureComponent<Props> {
|
||||||
} else {
|
} else {
|
||||||
// No webgl support, handle Error...
|
// No webgl support, handle Error...
|
||||||
// TODO: Use a better error message
|
// TODO: Use a better error message
|
||||||
this.state({ error: "Sorry, your computer doesn't support WebGL." });
|
this.setState({ error: "Sorry, your computer doesn't support WebGL." });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -178,22 +178,24 @@ class ThreeViewer extends React.PureComponent<Props> {
|
||||||
|
|
||||||
if (source) {
|
if (source) {
|
||||||
ThreeLoader(source, this.renderModel.bind(this), {
|
ThreeLoader(source, this.renderModel.bind(this), {
|
||||||
onStart: this.handleStart(this),
|
onStart: this.handleStart,
|
||||||
onLoad: this.handleReady.bind(this),
|
onLoad: this.handleReady,
|
||||||
onError: this.handleError.bind(this),
|
onError: this.handleError,
|
||||||
onProgress: this.handleProgress.bind(this),
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleStart() {
|
handleStart = () => {
|
||||||
this.setState({ isLoading: true });
|
this.setState({ isLoading: true });
|
||||||
}
|
};
|
||||||
|
|
||||||
handleReady() {
|
handleReady = () => {
|
||||||
// Handle load ready
|
|
||||||
this.setState({ isReady: true, isLoading: false });
|
this.setState({ isReady: true, isLoading: false });
|
||||||
}
|
};
|
||||||
|
|
||||||
|
handleError = () => {
|
||||||
|
this.setState({ error: "Sorry, looks like we can't load this file" });
|
||||||
|
};
|
||||||
|
|
||||||
handleResize = () => {
|
handleResize = () => {
|
||||||
const { offsetWidth: width, offsetHeight: height } = this.viewer.current;
|
const { offsetWidth: width, offsetHeight: height } = this.viewer.current;
|
||||||
|
@ -203,15 +205,6 @@ class ThreeViewer extends React.PureComponent<Props> {
|
||||||
this.renderer.setSize(width, height);
|
this.renderer.setSize(width, height);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleError() {
|
|
||||||
this.setState({ error: "Sorry, looks like we can't load this file" });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleProgress() {
|
|
||||||
// const progress = (currentItem / totalItems) * 100;
|
|
||||||
// console.info(currentItem, totalItems, progress);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleColorChange(color) {
|
handleColorChange(color) {
|
||||||
if (!this.mesh) return;
|
if (!this.mesh) return;
|
||||||
const pickColor = this.materialColors[color] || this.materialColors.green;
|
const pickColor = this.materialColors[color] || this.materialColors.green;
|
|
@ -1,10 +1,9 @@
|
||||||
import { LoadingManager, STLLoader, OBJLoader } from './three';
|
import { LoadingManager, STLLoader, OBJLoader } from './three';
|
||||||
|
|
||||||
const Manager = ({ onLoad, onStart, onProgress, onError }) => {
|
const Manager = ({ onLoad, onStart, onError }) => {
|
||||||
const manager = new LoadingManager();
|
const manager = new LoadingManager();
|
||||||
manager.onLoad = onLoad;
|
manager.onLoad = onLoad;
|
||||||
manager.onStart = onStart;
|
manager.onStart = onStart;
|
||||||
manager.onProgress = onProgress;
|
|
||||||
manager.onError = onError;
|
manager.onError = onError;
|
||||||
|
|
||||||
return manager;
|
return manager;
|
Loading…
Reference in a new issue