From 064e28a02eebad69dab6fb29e9d9fc230d9031e4 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Tue, 12 Jun 2018 16:40:55 -0600 Subject: [PATCH] more fixes --- .../component/common/loading-screen.jsx | 3 - .../component/common/progress-bar.jsx | 23 ---- src/renderer/component/threeViewer/index.jsx | 106 ++++++++++-------- .../component/threeViewer/internal/loader.js | 25 ++--- .../component/threeViewer/internal/scene.js | 18 +-- .../scss/component/_progress-bar.scss | 16 --- 6 files changed, 79 insertions(+), 112 deletions(-) delete mode 100644 src/renderer/component/common/progress-bar.jsx delete mode 100644 src/renderer/scss/component/_progress-bar.scss diff --git a/src/renderer/component/common/loading-screen.jsx b/src/renderer/component/common/loading-screen.jsx index 24bc33f2e..c8eb3f3fb 100644 --- a/src/renderer/component/common/loading-screen.jsx +++ b/src/renderer/component/common/loading-screen.jsx @@ -1,12 +1,10 @@ // @flow import React from 'react'; import Spinner from 'component/spinner'; -import ProgressBar from 'component/common/progress-bar'; type Props = { status: string, spinner: boolean, - progress?: number, }; class LoadingScreen extends React.PureComponent { @@ -19,7 +17,6 @@ class LoadingScreen extends React.PureComponent { return (
{spinner && } - {progress && } {status && {status}}
); diff --git a/src/renderer/component/common/progress-bar.jsx b/src/renderer/component/common/progress-bar.jsx deleted file mode 100644 index 8b63206ba..000000000 --- a/src/renderer/component/common/progress-bar.jsx +++ /dev/null @@ -1,23 +0,0 @@ -// @flow -import React from 'react'; - -type Props = { - progress: number, -}; - -class progressBar extends React.PureComponent { - static defaultProps = { - progress: 0, - }; - - render() { - const { progress } = this.props; - return ( -
-
-
- ); - } -} - -export default LoadingScreen; diff --git a/src/renderer/component/threeViewer/index.jsx b/src/renderer/component/threeViewer/index.jsx index 0db371092..8c74efa10 100644 --- a/src/renderer/component/threeViewer/index.jsx +++ b/src/renderer/component/threeViewer/index.jsx @@ -1,11 +1,12 @@ // @flow import * as React from 'react'; -import * as THREE from './internal/three.js'; -import detectWebGL from './internal/detector.js'; -import ThreeScene from './internal/scene.js'; -import ThreeLoader from './internal/loader.js'; -import ThreeRenderer from './internal/renderer.js'; import LoadingScreen from 'component/common/loading-screen'; +// ThreeJS +import * as THREE from './internal/three'; +import detectWebGL from './internal/detector'; +import ThreeScene from './internal/scene'; +import ThreeLoader from './internal/loader'; +import ThreeRenderer from './internal/renderer'; type Props = { theme: string, @@ -22,7 +23,7 @@ class ThreeViewer extends React.PureComponent { const { theme } = this.props; - //Main container + // Main container this.viewer = React.createRef(); // Object colors @@ -60,6 +61,22 @@ class ThreeViewer extends React.PureComponent { }; } + componentDidMount() { + if (detectWebGL()) { + this.renderScene(); + // Update render on resize window + window.addEventListener('resize', this.handleResize, false); + } else { + // No webgl support, handle Error... + // TODO: Use a better error message + this.state({ error: "Sorry, your computer doesn't support WebGL." }); + } + } + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize, false); + } + createOrbitControls(camera, canvas) { const { autoRotate } = this.props; const controls = new THREE.OrbitControls(camera, canvas); @@ -85,11 +102,15 @@ class ThreeViewer extends React.PureComponent { } createWireFrame(group) { - const wireframe = new THREE.WireframeGeometry(group.geometry); - this.wireframe = new THREE.LineSegments(wireframe); - this.wireframe.material.depthTest = false; - this.wireframe.material.opacity = 0; - this.wireframe.transparent = true; + const wireframeGeometry = new THREE.WireframeGeometry(group.geometry); + const wireframeMaterial = new THREE.LineBasicMaterial({ + opacity: 0, + transparent: true, + linewidth: 1, + }); + // Set material color + wireframeMaterial.color.set(this.materialColors.green); + this.wireframe = new THREE.LineSegments(wireframeGeometry, wireframeMaterial); group.add(this.wireframe); } @@ -115,7 +136,7 @@ class ThreeViewer extends React.PureComponent { this.scene.add(mesh); this.fitMeshToCamera(mesh); this.createWireFrame(mesh); - this.setControlsTarget(mesh.position); + this.updateControlsTarget(mesh.position); return mesh; } @@ -125,8 +146,8 @@ class ThreeViewer extends React.PureComponent { } fitMeshToCamera(group) { - let max = { x: 0, y: 0, z: 0 }; - let min = { x: 0, y: 0, z: 0 }; + const max = { x: 0, y: 0, z: 0 }; + const min = { x: 0, y: 0, z: 0 }; group.traverse(child => { if (child instanceof THREE.Mesh) { @@ -144,29 +165,25 @@ class ThreeViewer extends React.PureComponent { const meshY = Math.abs(max.y - min.y); const meshX = Math.abs(max.x - min.x); - const meshZ = Math.abs(max.z - min.z); - const scaleFactor = 10 / Math.max(meshX, meshY); + const scaleFactor = 15 / Math.max(meshX, meshY); group.scale.set(scaleFactor, scaleFactor, scaleFactor); - group.position.y = meshY / 2 * scaleFactor; + group.position.setY((meshY / 2) * scaleFactor); group.position.multiplyScalar(-1); - group.position.y += meshY * scaleFactor; - } - - setControlsTarget(point) { - this.controls.target.fromArray([point.x, point.y, point.z]); - this.controls.update(); + group.position.setY(meshY * scaleFactor); } startLoader() { const { source } = this.props; - source && + + if (source) { ThreeLoader(source, this.renderModel.bind(this), { onStart: this.handleStart(this), onLoad: this.handleReady.bind(this), onError: this.handleError.bind(this), onProgress: this.handleProgress.bind(this), }); + } } handleStart() { @@ -186,13 +203,13 @@ class ThreeViewer extends React.PureComponent { this.renderer.setSize(width, height); }; - handleError(url) { + handleError() { this.setState({ error: "Sorry, looks like we can't load this file" }); } - handleProgress(url, currentItem, totalItems) { - const progress = (currentItem / totalItems) * 100; - this.setState({progress}); + handleProgress() { + // const progress = (currentItem / totalItems) * 100; + // console.info(currentItem, totalItems, progress); } handleColorChange(color) { @@ -202,6 +219,11 @@ class ThreeViewer extends React.PureComponent { this.wireframe.material.color.set(pickColor); } + updateControlsTarget(point) { + this.controls.target.fromArray([point.x, point.y, point.z]); + this.controls.update(); + } + renderModel(fileType, data) { const geometry = this.createGeometry(data); this.mesh = this.createMesh(geometry); @@ -243,33 +265,21 @@ class ThreeViewer extends React.PureComponent { viewer.appendChild(canvas); } - componentDidMount() { - if (detectWebGL()) { - this.renderScene(); - // Update render on resize window - window.addEventListener('resize', this.handleResize, false); - } else { - // No webgl support, handle Error... - // TODO: Use a better error message - this.state({ error: 'No webgl support!' }); - } - } - - componentWillUnmount() { - window.removeEventListener('resize', this.handleResize, false); - } - render() { - const { error, progress, isReady, isLoading } = this.state; - const loadingMessage = 'Rendering model.'; + const { error, isReady, isLoading } = this.state; + const loadingMessage = 'Loading 3D model.'; const showViewer = isReady && !error; const showLoading = isLoading && !error; return ( {error && } - {showLoading && } -
+ {showLoading && } +
); } diff --git a/src/renderer/component/threeViewer/internal/loader.js b/src/renderer/component/threeViewer/internal/loader.js index 2ba2dc83e..96bdf26b6 100644 --- a/src/renderer/component/threeViewer/internal/loader.js +++ b/src/renderer/component/threeViewer/internal/loader.js @@ -1,10 +1,10 @@ -import { LoadingManager, STLLoader, OBJLoader } from './three.js'; +import { LoadingManager, STLLoader, OBJLoader } from './three'; const Manager = ({ onLoad, onStart, onProgress, onError }) => { - const manager = new THREE.LoadingManager(); + const manager = new LoadingManager(); manager.onLoad = onLoad; manager.onStart = onStart; - //manager.onProgress = onProgress; + manager.onProgress = onProgress; manager.onError = onError; return manager; @@ -19,17 +19,16 @@ const Loader = (fileType, manager) => { }; const ThreeLoader = ({ fileType, filePath }, renderModel, managerEvents) => { - if (!fileType) return; + if (fileType) { + const manager = Manager(managerEvents); + const loader = Loader(fileType, manager); - const manager = Manager(managerEvents); - const loader = Loader(fileType, manager); - - // Unsuported loader - if (!loader) return false; - - loader.load(filePath, data => { - renderModel(fileType, data); - }); + if (loader) { + loader.load(filePath, data => { + renderModel(fileType, data); + }); + } + } }; export default ThreeLoader; diff --git a/src/renderer/component/threeViewer/internal/scene.js b/src/renderer/component/threeViewer/internal/scene.js index c6e79c731..f858c8832 100644 --- a/src/renderer/component/threeViewer/internal/scene.js +++ b/src/renderer/component/threeViewer/internal/scene.js @@ -1,4 +1,4 @@ -import * as THREE from './three.js'; +import * as THREE from './three'; const addGrid = (scene, { gridColor, centerLineColor, size }) => { const divisions = size / 2; @@ -31,25 +31,25 @@ const addLights = (scene, color, groundColor) => { }; const Scene = ({ backgroundColor, groundColor, showFog, showGrid, gridColor, centerLineColor }) => { - // Convert colors - backgroundColor = new THREE.Color(backgroundColor); - groundColor = new THREE.Color(groundColor); + // Convert color + const bgColor = new THREE.Color(backgroundColor); // New scene const scene = new THREE.Scene(); // Background color - scene.background = backgroundColor; + scene.background = bgColor; // Fog effect - scene.fog = showFog === true ? new THREE.Fog(backgroundColor, 1, 95) : null; - - showGrid && + scene.fog = showFog === true ? new THREE.Fog(bgColor, 1, 95) : null; + // Add grid + if (showGrid) { addGrid(scene, { size: 100, gridColor, centerLineColor, }); - + } // Add basic lights addLights(scene, '#FFFFFF', groundColor); + // Return new three scene return scene; }; diff --git a/src/renderer/scss/component/_progress-bar.scss b/src/renderer/scss/component/_progress-bar.scss deleted file mode 100644 index 4ee4b8dbe..000000000 --- a/src/renderer/scss/component/_progress-bar.scss +++ /dev/null @@ -1,16 +0,0 @@ -.progress-bar { - width: 75%; - height: 5px; - display: block; - background: rgba(255, 255, 255, 0.25); - border-radius: 3px; - overflow: hidden; -} - -.progress-bar__progress { - width: 20px; - height: 5px; - background: var(--color-primary); - border-radius: 3px; - transition: width 0.3s ease; -}