From c646816f0f0324e2ae68bfe265cce678046a7006 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 6 Mar 2019 22:37:25 -0500 Subject: [PATCH] trim bundle --- package.json | 2 +- src/ui/component/common/yrbl.jsx | 38 -------------- src/ui/component/fileTile/view.jsx | 2 +- .../component/viewers/threeViewer/index.jsx | 50 +++++++++++-------- .../viewers/threeViewer/internal/grid.js | 3 +- .../viewers/threeViewer/internal/renderer.js | 2 +- .../viewers/threeViewer/internal/scene.js | 24 +++++---- webpack.base.config.js | 7 ++- yarn.lock | 37 +++----------- 9 files changed, 63 insertions(+), 102 deletions(-) delete mode 100644 src/ui/component/common/yrbl.jsx diff --git a/package.json b/package.json index ed00381f3..a7ab8b667 100644 --- a/package.json +++ b/package.json @@ -141,11 +141,11 @@ "node-sass": "^4.11.0", "preprocess-loader": "^0.3.0", "prettier": "^1.11.1", + "raw-loader": "^1.0.0", "react-hot-loader": "^4.7.2", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "webpack": "^4.28.4", - "webpack-build-notifier": "^0.1.23", "webpack-dev-middleware": "^3.6.0", "webpack-dev-server": "^3.1.14", "webpack-merge": "^4.2.1", diff --git a/src/ui/component/common/yrbl.jsx b/src/ui/component/common/yrbl.jsx deleted file mode 100644 index 884ec421e..000000000 --- a/src/ui/component/common/yrbl.jsx +++ /dev/null @@ -1,38 +0,0 @@ -// @flow -import * as React from 'react'; -import Native from 'native'; -import classnames from 'classnames'; - -type Props = { - title: string, - subtitle: string | React.Node, - type: string, - className?: string, -}; - -const yrblTypes = { - happy: 'gerbil-happy.png', - sad: 'gerbil-sad.png', -}; - -export default class extends React.PureComponent { - static defaultProps = { - type: 'happy', - }; - - render() { - const { title, subtitle, type, className } = this.props; - - const image = yrblTypes[type]; - - return ( -
- Friendly gerbil -
-

{title}

-
{subtitle}
-
-
- ); - } -} diff --git a/src/ui/component/fileTile/view.jsx b/src/ui/component/fileTile/view.jsx index 863c8fae5..db9435ef9 100644 --- a/src/ui/component/fileTile/view.jsx +++ b/src/ui/component/fileTile/view.jsx @@ -11,7 +11,7 @@ import classnames from 'classnames'; import FilePrice from 'component/filePrice'; import UriIndicator from 'component/uriIndicator'; import DateTime from 'component/dateTime'; -import Yrbl from 'component/common/yrbl'; +import Yrbl from 'component/yrbl'; type Props = { obscureNsfw: boolean, diff --git a/src/ui/component/viewers/threeViewer/index.jsx b/src/ui/component/viewers/threeViewer/index.jsx index ba0f87a86..e698e8136 100644 --- a/src/ui/component/viewers/threeViewer/index.jsx +++ b/src/ui/component/viewers/threeViewer/index.jsx @@ -5,14 +5,24 @@ import classNames from 'classnames'; import LoadingScreen from 'component/common/loading-screen'; // ThreeJS -import * as THREE from 'three-full'; +import { LoadingManager } from 'three-full/sources/loaders/LoadingManager'; +import { STLLoader } from 'three-full/sources/loaders/STLLoader'; +import { OBJLoader2 } from 'three-full/sources/loaders/OBJLoader2'; +import { OrbitControls } from 'three-full/sources/controls/OrbitControls'; +import { Geometry } from 'three-full/sources/core/Geometry'; +import { Box3 } from 'three-full/sources/math/Box3'; +import { Vector3 } from 'three-full/sources/math/Vector3'; +import { Mesh } from 'three-full/sources/objects/Mesh'; +import { Group } from 'three-full/sources/objects/Group'; +import { PerspectiveCamera } from 'three-full/sources/cameras/PerspectiveCamera'; +import { MeshPhongMaterial } from 'three-full/sources/materials/MeshPhongMaterial'; import detectWebGL from './internal/detector'; import ThreeGrid from './internal/grid'; import ThreeScene from './internal/scene'; import ThreeRenderer from './internal/renderer'; const Manager = ({ onLoad, onStart, onError }) => { - const manager = new THREE.LoadingManager(); + const manager = new LoadingManager(); manager.onLoad = onLoad; manager.onStart = onStart; manager.onError = onError; @@ -22,8 +32,8 @@ const Manager = ({ onLoad, onStart, onError }) => { const Loader = (fileType, manager) => { const fileTypes = { - stl: () => new THREE.STLLoader(manager), - obj: () => new THREE.OBJLoader2(manager), + stl: () => new STLLoader(manager), + obj: () => new OBJLoader2(manager), }; return fileTypes[fileType] ? fileTypes[fileType]() : null; }; @@ -70,7 +80,7 @@ class ThreeViewer extends React.PureComponent { }); static createOrbitControls(camera: any, canvas: any) { - const controls = new THREE.OrbitControls(camera, canvas); + const controls = new OrbitControls(camera, canvas); // Controls configuration controls.enableDamping = true; controls.dampingFactor = 0.75; @@ -88,8 +98,8 @@ class ThreeViewer extends React.PureComponent { const min = { x: 0, y: 0, z: 0 }; group.traverse(child => { - if (child instanceof THREE.Mesh) { - const box = new THREE.Box3().setFromObject(child); + if (child instanceof Mesh) { + const box = new Box3().setFromObject(child); // Max max.x = box.max.x > max.x ? box.max.x : max.x; max.y = box.max.y > max.y ? box.max.y : max.y; @@ -108,7 +118,7 @@ class ThreeViewer extends React.PureComponent { group.scale.set(scaleFactor, scaleFactor, scaleFactor); group.position.setY((meshY / 2) * scaleFactor); // Reset object position - const box = new THREE.Box3().setFromObject(group); + const box = new Box3().setFromObject(group); // Update position box.getCenter(group.position); group.position.multiplyScalar(-1); @@ -195,7 +205,7 @@ class ThreeViewer extends React.PureComponent { } // Clean up group items this.mesh.traverse(child => { - if (child instanceof THREE.Mesh) { + if (child instanceof Mesh) { if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); } @@ -257,7 +267,7 @@ class ThreeViewer extends React.PureComponent { ThreeViewer.fitMeshToCamera(group); if (!this.targetCenter) { - const box = new THREE.Box3(); + const box = new Box3(); this.targetCenter = box.setFromObject(this.mesh).getCenter(); } this.updateControlsTarget(this.targetCenter); @@ -334,9 +344,9 @@ class ThreeViewer extends React.PureComponent { this.bufferGeometry.computeBoundingBox(); this.bufferGeometry.center(); this.bufferGeometry.rotateX(-Math.PI / 2); - this.bufferGeometry.lookAt(new THREE.Vector3(0, 0, 1)); + this.bufferGeometry.lookAt(new Vector3(0, 0, 1)); // Get geometry from bufferGeometry - this.geometry = new THREE.Geometry().fromBufferGeometry(this.bufferGeometry); + this.geometry = new Geometry().fromBufferGeometry(this.bufferGeometry); this.geometry.mergeVertices(); this.geometry.computeVertexNormals(); } @@ -391,7 +401,7 @@ class ThreeViewer extends React.PureComponent { renderStl(data: any) { this.createGeometry(data); - this.mesh = new THREE.Mesh(this.geometry, this.material); + this.mesh = new Mesh(this.geometry, this.material); this.mesh.name = 'model'; this.scene.add(this.mesh); this.transformGroup(this.mesh); @@ -399,19 +409,19 @@ class ThreeViewer extends React.PureComponent { renderObj(event: any) { const mesh = event.detail.loaderRootNode; - this.mesh = new THREE.Group(); + this.mesh = new Group(); this.mesh.name = 'model'; // Assign new material mesh.traverse(child => { - if (child instanceof THREE.Mesh) { + if (child instanceof Mesh) { // Get geometry from child - const geometry = new THREE.Geometry(); + const geometry = new Geometry(); geometry.fromBufferGeometry(child.geometry); geometry.mergeVertices(); geometry.computeVertexNormals(); // Create and regroup inner objects - const innerObj = new THREE.Mesh(geometry, this.material); + const innerObj = new Mesh(geometry, this.material); this.mesh.add(innerObj); // Clean up geometry geometry.dispose(); @@ -454,7 +464,7 @@ class ThreeViewer extends React.PureComponent { this.grid = ThreeGrid({ size: 100, gridColor, centerLineColor }); this.scene.add(this.grid); // Camera - this.camera = new THREE.PerspectiveCamera(80, width / height, 0.1, 1000); + this.camera = new PerspectiveCamera(80, width / height, 0.1, 1000); this.camera.position.set(-9.5, 14, 11); // Controls @@ -464,10 +474,10 @@ class ThreeViewer extends React.PureComponent { this.renderer.setSize(width, height); // Create model material - this.material = new THREE.MeshPhongMaterial({ + this.material = new MeshPhongMaterial({ depthWrite: true, flatShading: true, - vertexColors: THREE.FaceColors, + vertexColors: 1, }); // Set material color diff --git a/src/ui/component/viewers/threeViewer/internal/grid.js b/src/ui/component/viewers/threeViewer/internal/grid.js index 3195e1955..2bb7fef2b 100644 --- a/src/ui/component/viewers/threeViewer/internal/grid.js +++ b/src/ui/component/viewers/threeViewer/internal/grid.js @@ -1,4 +1,5 @@ -import { GridHelper, Color } from 'three-full'; +import { Color } from 'three-full/sources/math/Color'; +import { GridHelper } from 'three-full/sources/helpers/GridHelper'; const ThreeGrid = ({ size, gridColor, centerLineColor }) => { const divisions = size / 2; diff --git a/src/ui/component/viewers/threeViewer/internal/renderer.js b/src/ui/component/viewers/threeViewer/internal/renderer.js index e87f188e2..b1fd67d12 100644 --- a/src/ui/component/viewers/threeViewer/internal/renderer.js +++ b/src/ui/component/viewers/threeViewer/internal/renderer.js @@ -1,4 +1,4 @@ -import { WebGLRenderer } from 'three-full'; +import { WebGLRenderer } from 'three-full/sources/renderers/WebGLRenderer'; const ThreeRenderer = ({ antialias, shadowMap, gammaCorrection }) => { const renderer = new WebGLRenderer({ antialias }); diff --git a/src/ui/component/viewers/threeViewer/internal/scene.js b/src/ui/component/viewers/threeViewer/internal/scene.js index ef4b848a7..40979f8f3 100644 --- a/src/ui/component/viewers/threeViewer/internal/scene.js +++ b/src/ui/component/viewers/threeViewer/internal/scene.js @@ -1,15 +1,19 @@ -import * as THREE from 'three-full'; +import { Color } from 'three-full/sources/math/Color'; +import { HemisphereLight } from 'three-full/sources/lights/HemisphereLight'; +import { DirectionalLight } from 'three-full/sources/lights/DirectionalLight'; +import { Scene } from 'three-full/sources/scenes/Scene'; +import { Fog } from 'three-full/sources/scenes/Fog'; const addLights = (scene, color, groundColor) => { // Light color - const lightColor = new THREE.Color(color); + const lightColor = new Color(color); // Main light - const light = new THREE.HemisphereLight(lightColor, groundColor, 0.4); + const light = new HemisphereLight(lightColor, groundColor, 0.4); // Shadow light - const shadowLight = new THREE.DirectionalLight(lightColor, 0.4); + const shadowLight = new DirectionalLight(lightColor, 0.4); shadowLight.position.set(100, 50, 100); // Back light - const backLight = new THREE.DirectionalLight(lightColor, 0.6); + const backLight = new DirectionalLight(lightColor, 0.6); backLight.position.set(-100, 200, 50); // Add lights to scene scene.add(backLight); @@ -17,19 +21,19 @@ const addLights = (scene, color, groundColor) => { scene.add(shadowLight); }; -const Scene = ({ backgroundColor, groundColor, showFog }) => { +const ViewerScene = ({ backgroundColor, groundColor, showFog }) => { // Convert color - const bgColor = new THREE.Color(backgroundColor); + const bgColor = new Color(backgroundColor); // New scene - const scene = new THREE.Scene(); + const scene = new Scene(); // Background color scene.background = bgColor; // Fog effect - scene.fog = showFog === true ? new THREE.Fog(bgColor, 1, 95) : null; + scene.fog = showFog === true ? new Fog(bgColor, 1, 95) : null; // Add basic lights addLights(scene, '#FFFFFF', groundColor); // Return new three scene return scene; }; -export default Scene; +export default ViewerScene; diff --git a/webpack.base.config.js b/webpack.base.config.js index d76cca6c7..74beb686e 100644 --- a/webpack.base.config.js +++ b/webpack.base.config.js @@ -16,7 +16,6 @@ const baseConfig = { rules: [ { test: /\.jsx?$/, - exclude: /node_modules/, loader: 'babel-loader', }, { @@ -48,6 +47,12 @@ const baseConfig = { }, }, }, + { + test: /\.glsl/, + use: { + loader: 'file-loader', + }, + }, ], }, // Allows imports for all directories inside '/ui' diff --git a/yarn.lock b/yarn.lock index 663b2e0ef..f8bc5555f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4776,11 +4776,6 @@ graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1. resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU= -growly@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" - integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE= - handle-thing@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754" @@ -6978,16 +6973,6 @@ node-loader@^0.6.0: resolved "https://registry.yarnpkg.com/node-loader/-/node-loader-0.6.0.tgz#c797ef51095ed5859902b157f6384f6361e05ae8" integrity sha1-x5fvUQle1YWZArFX9jhPY2HgWug= -node-notifier@5.2.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.2.1.tgz#fa313dd08f5517db0e2502e5758d664ac69f9dea" - integrity sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg== - dependencies: - growly "^1.3.0" - semver "^5.4.1" - shellwords "^0.1.1" - which "^1.3.0" - node-pre-gyp@^0.10.0: version "0.10.3" resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc" @@ -8349,6 +8334,14 @@ raw-body@2.3.3: iconv-lite "0.4.23" unpipe "1.0.0" +raw-loader@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-1.0.0.tgz#3f9889e73dadbda9a424bce79809b4133ad46405" + integrity sha512-Uqy5AqELpytJTRxYT4fhltcKPj0TyaEpzJDcGz7DFJi+pQOOi3GjR/DOdxTkTsF+NzhnldIoG6TORaBlInUuqA== + dependencies: + loader-utils "^1.1.0" + schema-utils "^1.0.0" + rc-progress@^2.0.6: version "2.3.0" resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-2.3.0.tgz#cfbd07ff9026c450100980de209a92650e24f313" @@ -9309,11 +9302,6 @@ shebang-regex@^1.0.0: resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3" integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM= -shellwords@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b" - integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww== - signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" @@ -10736,15 +10724,6 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" -webpack-build-notifier@^0.1.23: - version "0.1.30" - resolved "https://registry.yarnpkg.com/webpack-build-notifier/-/webpack-build-notifier-0.1.30.tgz#837e9002d13c1d76bdf954ccafe0b824b38bb789" - integrity sha512-HeZ4Wr8XP7W0kSmPQkZCXARQVIjVFNPyJBdUqkqcE0ySYNjr6vOH3ufHESLPuy5KmMRUjHJdqJ6y3McDfCjJxQ== - dependencies: - ansi-regex "^2.0.0" - node-notifier "5.2.1" - strip-ansi "^3.0.1" - webpack-cli@^3.2.1: version "3.2.3" resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.2.3.tgz#13653549adfd8ccd920ad7be1ef868bacc22e346"