Add 3D-file-viewer component #1558

Merged
btzr-io merged 8 commits from three-viewer into master 2018-07-19 16:17:06 +02:00
8 changed files with 21 additions and 22 deletions
Showing only changes of commit 7db1782c57 - Show all commits

View file

@ -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;

View file

@ -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,

View file

@ -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;

View file

@ -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;