├── .DS_Store
├── .babelrc
├── .gitignore
├── .gitmodules
├── .idea
    ├── misc.xml
    ├── modules.xml
    ├── npm-react-component-starter.iml
    ├── vcs.xml
    └── workspace.xml
├── README.md
├── build
    └── index.js
├── package-lock.json
├── package.json
├── src
    ├── OBJViewer.js
    ├── STLViewer.js
    └── index.js
└── webpack.config.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bohdanbirdie/react-stl-obj-viewer/90b4ceaa71f70126b61fd8be77bce4d3abeaf7f5/.DS_Store


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["env", "es2015", "stage-0", "react"],
3 |   "plugins": [
4 |     "transform-object-rest-spread",
5 |     "transform-react-jsx"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | node_modules/
3 | example/
4 | 


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "example"]
2 | 	path = example
3 | 	url = https://github.com/bohdanbirdie/stl-obj-demo.git
4 | 


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="JSX" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/npm-react-component-starter.iml" filepath="$PROJECT_DIR$/.idea/npm-react-component-starter.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/npm-react-component-starter.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <project version="4">
  3 |   <component name="ChangeListManager">
  4 |     <list default="true" id="f9ecb487-0c11-4921-8d70-17c4ebaf3f15" name="Default" comment="">
  5 |       <change beforePath="$PROJECT_DIR$/README.md" afterPath="$PROJECT_DIR$/README.md" />
  6 |       <change beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
  7 |     </list>
  8 |     <ignored path="$PROJECT_DIR$/build/" />
  9 |     <ignored path="$PROJECT_DIR$/.tmp/" />
 10 |     <ignored path="$PROJECT_DIR$/temp/" />
 11 |     <ignored path="$PROJECT_DIR$/tmp/" />
 12 |     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
 13 |     <option name="TRACKING_ENABLED" value="true" />
 14 |     <option name="SHOW_DIALOG" value="false" />
 15 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 16 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 17 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 18 |   </component>
 19 |   <component name="FileEditorManager">
 20 |     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
 21 |       <file leaf-file-name="package.json" pinned="false" current-in-tab="false">
 22 |         <entry file="file://$PROJECT_DIR$/package.json">
 23 |           <provider selected="true" editor-type-id="text-editor">
 24 |             <state relative-caret-position="30">
 25 |               <caret line="2" column="19" lean-forward="false" selection-start-line="2" selection-start-column="19" selection-end-line="2" selection-end-column="19" />
 26 |               <folding />
 27 |             </state>
 28 |           </provider>
 29 |         </entry>
 30 |       </file>
 31 |       <file leaf-file-name=".gitignore" pinned="false" current-in-tab="false">
 32 |         <entry file="file://$PROJECT_DIR$/.gitignore">
 33 |           <provider selected="true" editor-type-id="text-editor">
 34 |             <state relative-caret-position="30">
 35 |               <caret line="2" column="8" lean-forward="false" selection-start-line="2" selection-start-column="8" selection-end-line="2" selection-end-column="8" />
 36 |               <folding />
 37 |             </state>
 38 |           </provider>
 39 |         </entry>
 40 |       </file>
 41 |       <file leaf-file-name="README.md" pinned="false" current-in-tab="true">
 42 |         <entry file="file://$PROJECT_DIR$/README.md">
 43 |           <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
 44 |             <state split_layout="SPLIT">
 45 |               <first_editor relative-caret-position="210">
 46 |                 <caret line="14" column="24" lean-forward="true" selection-start-line="14" selection-start-column="24" selection-end-line="14" selection-end-column="24" />
 47 |                 <folding />
 48 |               </first_editor>
 49 |               <second_editor />
 50 |             </state>
 51 |           </provider>
 52 |         </entry>
 53 |       </file>
 54 |       <file leaf-file-name="OBJViewer.js" pinned="false" current-in-tab="false">
 55 |         <entry file="file://$PROJECT_DIR$/src/OBJViewer.js">
 56 |           <provider selected="true" editor-type-id="text-editor">
 57 |             <state relative-caret-position="210">
 58 |               <caret line="20" column="8" lean-forward="false" selection-start-line="20" selection-start-column="8" selection-end-line="21" selection-end-column="40" />
 59 |               <folding />
 60 |             </state>
 61 |           </provider>
 62 |         </entry>
 63 |       </file>
 64 |       <file leaf-file-name="STLViewer.js" pinned="false" current-in-tab="false">
 65 |         <entry file="file://$PROJECT_DIR$/src/STLViewer.js">
 66 |           <provider selected="true" editor-type-id="text-editor">
 67 |             <state relative-caret-position="1185">
 68 |               <caret line="85" column="15" lean-forward="false" selection-start-line="85" selection-start-column="15" selection-end-line="85" selection-end-column="15" />
 69 |               <folding />
 70 |             </state>
 71 |           </provider>
 72 |         </entry>
 73 |       </file>
 74 |     </leaf>
 75 |   </component>
 76 |   <component name="FindInProjectRecents">
 77 |     <findStrings>
 78 |       <find>solid =</find>
 79 |       <find>SOLID</find>
 80 |       <find>rotate</find>
 81 |       <find>orbitRender</find>
 82 |       <find>home</find>
 83 |       <find>orbitControls</find>
 84 |       <find>serv</find>
 85 |       <find>solid</find>
 86 |       <find>webg</find>
 87 |       <find>onSceneRendered</find>
 88 |       <find>console</find>
 89 |     </findStrings>
 90 |   </component>
 91 |   <component name="Git.Settings">
 92 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
 93 |   </component>
 94 |   <component name="IdeDocumentHistory">
 95 |     <option name="CHANGED_PATHS">
 96 |       <list>
 97 |         <option value="$PROJECT_DIR$/src/index.js" />
 98 |         <option value="$PROJECT_DIR$/.babelrc" />
 99 |         <option value="$PROJECT_DIR$/test-app/node_modules/npm-react-component-starter/node_modules/three-stl-loader/index.js" />
100 |         <option value="$PROJECT_DIR$/test-app/.gitignore" />
101 |         <option value="$PROJECT_DIR$/test-app/package.json" />
102 |         <option value="$PROJECT_DIR$/test-app/build/index.html" />
103 |         <option value="$PROJECT_DIR$/index.html" />
104 |         <option value="$PROJECT_DIR$/src/OBJViewer.js" />
105 |         <option value="$PROJECT_DIR$/src/STLViewer.js" />
106 |         <option value="$PROJECT_DIR$/test-app/src/App.js" />
107 |         <option value="$PROJECT_DIR$/.gitignore" />
108 |         <option value="$PROJECT_DIR$/package.json" />
109 |         <option value="$PROJECT_DIR$/README.md" />
110 |       </list>
111 |     </option>
112 |   </component>
113 |   <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
114 |   <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER">
115 |     <package-json value="$PROJECT_DIR$/package.json" />
116 |   </component>
117 |   <component name="JsGulpfileManager">
118 |     <detection-done>true</detection-done>
119 |     <sorting>DEFINITION_ORDER</sorting>
120 |   </component>
121 |   <component name="NodeModulesDirectoryManager">
122 |     <handled-path value="$PROJECT_DIR$/node_modules" />
123 |   </component>
124 |   <component name="ProjectFrameBounds" fullScreen="true">
125 |     <option name="y" value="22" />
126 |     <option name="width" value="1166" />
127 |     <option name="height" value="982" />
128 |   </component>
129 |   <component name="ProjectView">
130 |     <navigator currentView="ProjectPane" proportions="" version="1">
131 |       <flattenPackages />
132 |       <showMembers />
133 |       <showModules />
134 |       <showLibraryContents />
135 |       <hideEmptyPackages />
136 |       <abbreviatePackageNames />
137 |       <autoscrollToSource />
138 |       <autoscrollFromSource />
139 |       <sortByType />
140 |       <manualOrder />
141 |       <foldersAlwaysOnTop value="true" />
142 |     </navigator>
143 |     <panes>
144 |       <pane id="Scope" />
145 |       <pane id="ProjectPane">
146 |         <subPane>
147 |           <expand>
148 |             <path>
149 |               <item name="react-stl-obj-viewer" type="b2602c69:ProjectViewProjectNode" />
150 |               <item name="react-stl-obj-viewer" type="462c0819:PsiDirectoryNode" />
151 |             </path>
152 |           </expand>
153 |           <select />
154 |         </subPane>
155 |       </pane>
156 |       <pane id="Scratches" />
157 |     </panes>
158 |   </component>
159 |   <component name="PropertiesComponent">
160 |     <property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
161 |     <property name="nodejs_interpreter_path.stuck_in_default_project" value="/usr/local/bin/node" />
162 |     <property name="WebServerToolWindowFactoryState" value="false" />
163 |     <property name="HbShouldOpenHtmlAsHb" value="" />
164 |   </component>
165 |   <component name="RecentsManager">
166 |     <key name="CopyFile.RECENT_KEYS">
167 |       <recent name="$PROJECT_DIR$/src" />
168 |     </key>
169 |   </component>
170 |   <component name="RunDashboard">
171 |     <option name="ruleStates">
172 |       <list>
173 |         <RuleState>
174 |           <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
175 |         </RuleState>
176 |         <RuleState>
177 |           <option name="name" value="StatusDashboardGroupingRule" />
178 |         </RuleState>
179 |       </list>
180 |     </option>
181 |   </component>
182 |   <component name="ShelveChangesManager" show_recycled="false">
183 |     <option name="remove_strategy" value="false" />
184 |   </component>
185 |   <component name="SvnConfiguration">
186 |     <configuration>$USER_HOME$/.subversion</configuration>
187 |   </component>
188 |   <component name="TaskManager">
189 |     <task active="true" id="Default" summary="Default task">
190 |       <changelist id="f9ecb487-0c11-4921-8d70-17c4ebaf3f15" name="Default" comment="" />
191 |       <created>1519204916884</created>
192 |       <option name="number" value="Default" />
193 |       <option name="presentableId" value="Default" />
194 |       <updated>1519204916884</updated>
195 |       <workItem from="1519204918712" duration="7545000" />
196 |       <workItem from="1519291129740" duration="1910000" />
197 |       <workItem from="1519308761248" duration="1010000" />
198 |     </task>
199 |     <servers />
200 |   </component>
201 |   <component name="TimeTrackingManager">
202 |     <option name="totallyTimeSpent" value="12622000" />
203 |   </component>
204 |   <component name="ToolWindowManager">
205 |     <frame x="0" y="0" width="1680" height="1050" extended-state="0" />
206 |     <editor active="true" />
207 |     <layout>
208 |       <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24954791" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
209 |       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
210 |       <window_info id="Docker" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
211 |       <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
212 |       <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
213 |       <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
214 |       <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
215 |       <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
216 |       <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
217 |       <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
218 |       <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
219 |       <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
220 |       <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
221 |       <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
222 |       <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
223 |       <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
224 |       <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
225 |       <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
226 |     </layout>
227 |   </component>
228 |   <component name="TypeScriptGeneratedFilesManager">
229 |     <option name="version" value="1" />
230 |   </component>
231 |   <component name="VcsContentAnnotationSettings">
232 |     <option name="myLimit" value="2678400000" />
233 |   </component>
234 |   <component name="XDebuggerManager">
235 |     <breakpoint-manager>
236 |       <option name="time" value="1" />
237 |     </breakpoint-manager>
238 |     <watches-manager />
239 |   </component>
240 |   <component name="editorHistoryManager">
241 |     <entry file="file://$PROJECT_DIR$/src/components/MyComponent.js" />
242 |     <entry file="file://$PROJECT_DIR$/src/index.js">
243 |       <provider selected="true" editor-type-id="text-editor">
244 |         <state relative-caret-position="60">
245 |           <caret line="4" column="4" lean-forward="false" selection-start-line="4" selection-start-column="4" selection-end-line="5" selection-end-column="13" />
246 |         </state>
247 |       </provider>
248 |     </entry>
249 |     <entry file="file://$PROJECT_DIR$/test-app/node_modules/npm-react-component-starter/node_modules/three-stl-loader/index.js" />
250 |     <entry file="file://$PROJECT_DIR$/node_modules/three-stl-loader/index.js">
251 |       <provider selected="true" editor-type-id="text-editor">
252 |         <state relative-caret-position="612">
253 |           <caret line="144" column="28" lean-forward="false" selection-start-line="144" selection-start-column="28" selection-end-line="144" selection-end-column="28" />
254 |         </state>
255 |       </provider>
256 |     </entry>
257 |     <entry file="file://$PROJECT_DIR$/.babelrc">
258 |       <provider selected="true" editor-type-id="text-editor">
259 |         <state relative-caret-position="15">
260 |           <caret line="1" column="22" lean-forward="false" selection-start-line="1" selection-start-column="22" selection-end-line="1" selection-end-column="22" />
261 |         </state>
262 |       </provider>
263 |     </entry>
264 |     <entry file="file://$PROJECT_DIR$/README.md">
265 |       <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
266 |         <state split_layout="SPLIT">
267 |           <first_editor relative-caret-position="210">
268 |             <caret line="14" column="34" lean-forward="false" selection-start-line="14" selection-start-column="34" selection-end-line="14" selection-end-column="34" />
269 |           </first_editor>
270 |           <second_editor />
271 |         </state>
272 |       </provider>
273 |     </entry>
274 |     <entry file="file://$PROJECT_DIR$/test-app/build/index.html" />
275 |     <entry file="file://$PROJECT_DIR$/index.html" />
276 |     <entry file="file://$PROJECT_DIR$/build/index.js">
277 |       <provider selected="true" editor-type-id="text-editor">
278 |         <state relative-caret-position="319">
279 |           <caret line="70965" column="37" lean-forward="false" selection-start-line="70965" selection-start-column="32" selection-end-line="70965" selection-end-column="37" />
280 |         </state>
281 |       </provider>
282 |     </entry>
283 |     <entry file="file://$PROJECT_DIR$/src/OBJViewer.js">
284 |       <provider selected="true" editor-type-id="text-editor">
285 |         <state relative-caret-position="184">
286 |           <caret line="96" column="58" lean-forward="false" selection-start-line="96" selection-start-column="44" selection-end-line="96" selection-end-column="58" />
287 |           <folding />
288 |         </state>
289 |       </provider>
290 |     </entry>
291 |     <entry file="file://$PROJECT_DIR$/test-app/src/App.js" />
292 |     <entry file="file://$PROJECT_DIR$/src/STLViewer.js">
293 |       <provider selected="true" editor-type-id="text-editor">
294 |         <state relative-caret-position="-219">
295 |           <caret line="85" column="15" lean-forward="false" selection-start-line="85" selection-start-column="15" selection-end-line="85" selection-end-column="15" />
296 |           <folding />
297 |         </state>
298 |       </provider>
299 |     </entry>
300 |     <entry file="file://$PROJECT_DIR$/test-app/package.json" />
301 |     <entry file="file://$PROJECT_DIR$/test-app/.gitignore" />
302 |     <entry file="file://$PROJECT_DIR$/package.json">
303 |       <provider selected="true" editor-type-id="text-editor">
304 |         <state relative-caret-position="90">
305 |           <caret line="6" column="22" lean-forward="true" selection-start-line="6" selection-start-column="22" selection-end-line="6" selection-end-column="22" />
306 |           <folding />
307 |         </state>
308 |       </provider>
309 |     </entry>
310 |     <entry file="file://$PROJECT_DIR$/src/components/MyComponent.js" />
311 |     <entry file="file://$PROJECT_DIR$/src/index.js">
312 |       <provider selected="true" editor-type-id="text-editor">
313 |         <state relative-caret-position="60">
314 |           <caret line="4" column="4" lean-forward="false" selection-start-line="4" selection-start-column="4" selection-end-line="5" selection-end-column="13" />
315 |         </state>
316 |       </provider>
317 |     </entry>
318 |     <entry file="file://$PROJECT_DIR$/test-app/node_modules/npm-react-component-starter/node_modules/three-stl-loader/index.js" />
319 |     <entry file="file://$PROJECT_DIR$/node_modules/three-stl-loader/index.js">
320 |       <provider selected="true" editor-type-id="text-editor">
321 |         <state relative-caret-position="612">
322 |           <caret line="144" column="28" lean-forward="false" selection-start-line="144" selection-start-column="28" selection-end-line="144" selection-end-column="28" />
323 |         </state>
324 |       </provider>
325 |     </entry>
326 |     <entry file="file://$PROJECT_DIR$/test-app/src/App.js" />
327 |     <entry file="file://$PROJECT_DIR$/.babelrc">
328 |       <provider selected="true" editor-type-id="text-editor">
329 |         <state relative-caret-position="15">
330 |           <caret line="1" column="22" lean-forward="false" selection-start-line="1" selection-start-column="22" selection-end-line="1" selection-end-column="22" />
331 |         </state>
332 |       </provider>
333 |     </entry>
334 |     <entry file="file://$PROJECT_DIR$/build/index.js">
335 |       <provider selected="true" editor-type-id="text-editor">
336 |         <state relative-caret-position="1145520">
337 |           <caret line="70959" column="27" lean-forward="false" selection-start-line="70959" selection-start-column="20" selection-end-line="70959" selection-end-column="27" />
338 |         </state>
339 |       </provider>
340 |     </entry>
341 |     <entry file="file://$PROJECT_DIR$/package.json">
342 |       <provider selected="true" editor-type-id="text-editor">
343 |         <state relative-caret-position="90">
344 |           <caret line="6" column="22" lean-forward="false" selection-start-line="6" selection-start-column="22" selection-end-line="6" selection-end-column="22" />
345 |           <folding />
346 |         </state>
347 |       </provider>
348 |     </entry>
349 |     <entry file="file://$PROJECT_DIR$/src/STLViewer.js">
350 |       <provider selected="true" editor-type-id="text-editor">
351 |         <state relative-caret-position="426">
352 |           <caret line="90" column="65" lean-forward="false" selection-start-line="90" selection-start-column="65" selection-end-line="90" selection-end-column="65" />
353 |           <folding />
354 |         </state>
355 |       </provider>
356 |     </entry>
357 |     <entry file="file://$PROJECT_DIR$/README.md">
358 |       <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
359 |         <state split_layout="SPLIT">
360 |           <first_editor relative-caret-position="210">
361 |             <caret line="14" column="34" lean-forward="false" selection-start-line="14" selection-start-column="34" selection-end-line="14" selection-end-column="34" />
362 |           </first_editor>
363 |           <second_editor />
364 |         </state>
365 |       </provider>
366 |     </entry>
367 |     <entry file="file://$PROJECT_DIR$/test-app/.gitignore" />
368 |     <entry file="file://$PROJECT_DIR$/test-app/package.json" />
369 |     <entry file="file://$PROJECT_DIR$/test-app/build/index.html" />
370 |     <entry file="file://$PROJECT_DIR$/index.html" />
371 |     <entry file="file://$PROJECT_DIR$/src/OBJViewer.js">
372 |       <provider selected="true" editor-type-id="text-editor">
373 |         <state relative-caret-position="91">
374 |           <caret line="97" column="16" lean-forward="false" selection-start-line="97" selection-start-column="16" selection-end-line="97" selection-end-column="65" />
375 |           <folding />
376 |         </state>
377 |       </provider>
378 |     </entry>
379 |     <entry file="file://$PROJECT_DIR$/test-app/.gitignore" />
380 |     <entry file="file://$PROJECT_DIR$/test-app/package.json" />
381 |     <entry file="file://$PROJECT_DIR$/index.html" />
382 |     <entry file="file://$PROJECT_DIR$/test-app/src/App.js" />
383 |     <entry file="file://$PROJECT_DIR$/test-app/build/index.html" />
384 |     <entry file="file://$PROJECT_DIR$/src/components/MyComponent.js" />
385 |     <entry file="file://$PROJECT_DIR$/src/index.js">
386 |       <provider selected="true" editor-type-id="text-editor">
387 |         <state relative-caret-position="60">
388 |           <caret line="4" column="4" lean-forward="false" selection-start-line="4" selection-start-column="4" selection-end-line="5" selection-end-column="13" />
389 |         </state>
390 |       </provider>
391 |     </entry>
392 |     <entry file="file://$PROJECT_DIR$/test-app/node_modules/npm-react-component-starter/node_modules/three-stl-loader/index.js" />
393 |     <entry file="file://$PROJECT_DIR$/node_modules/three-stl-loader/index.js">
394 |       <provider selected="true" editor-type-id="text-editor">
395 |         <state relative-caret-position="612">
396 |           <caret line="144" column="28" lean-forward="false" selection-start-line="144" selection-start-column="28" selection-end-line="144" selection-end-column="28" />
397 |         </state>
398 |       </provider>
399 |     </entry>
400 |     <entry file="file://$PROJECT_DIR$/.babelrc">
401 |       <provider selected="true" editor-type-id="text-editor">
402 |         <state relative-caret-position="15">
403 |           <caret line="1" column="22" lean-forward="false" selection-start-line="1" selection-start-column="22" selection-end-line="1" selection-end-column="22" />
404 |         </state>
405 |       </provider>
406 |     </entry>
407 |     <entry file="file://$PROJECT_DIR$/test-app/build/index.html" />
408 |     <entry file="file://$PROJECT_DIR$/index.html" />
409 |     <entry file="file://$PROJECT_DIR$/test-app/package.json" />
410 |     <entry file="file://$PROJECT_DIR$/src/STLViewer.js">
411 |       <provider selected="true" editor-type-id="text-editor">
412 |         <state relative-caret-position="1185">
413 |           <caret line="85" column="15" lean-forward="false" selection-start-line="85" selection-start-column="15" selection-end-line="85" selection-end-column="15" />
414 |           <folding />
415 |         </state>
416 |       </provider>
417 |     </entry>
418 |     <entry file="file://$PROJECT_DIR$/test-app/.gitignore" />
419 |     <entry file="file://$PROJECT_DIR$/build/index.js">
420 |       <provider selected="true" editor-type-id="text-editor">
421 |         <state relative-caret-position="-273">
422 |           <caret line="49775" column="31" lean-forward="false" selection-start-line="49775" selection-start-column="16" selection-end-line="49775" selection-end-column="31" />
423 |         </state>
424 |       </provider>
425 |     </entry>
426 |     <entry file="file://$PROJECT_DIR$/test-app/src/App.js" />
427 |     <entry file="file://$PROJECT_DIR$/src/OBJViewer.js">
428 |       <provider selected="true" editor-type-id="text-editor">
429 |         <state relative-caret-position="210">
430 |           <caret line="20" column="8" lean-forward="false" selection-start-line="20" selection-start-column="8" selection-end-line="21" selection-end-column="40" />
431 |           <folding />
432 |         </state>
433 |       </provider>
434 |     </entry>
435 |     <entry file="file://$PROJECT_DIR$/.gitignore">
436 |       <provider selected="true" editor-type-id="text-editor">
437 |         <state relative-caret-position="30">
438 |           <caret line="2" column="8" lean-forward="false" selection-start-line="2" selection-start-column="8" selection-end-line="2" selection-end-column="8" />
439 |           <folding />
440 |         </state>
441 |       </provider>
442 |     </entry>
443 |     <entry file="file://$PROJECT_DIR$/package.json">
444 |       <provider selected="true" editor-type-id="text-editor">
445 |         <state relative-caret-position="30">
446 |           <caret line="2" column="19" lean-forward="false" selection-start-line="2" selection-start-column="19" selection-end-line="2" selection-end-column="19" />
447 |           <folding />
448 |         </state>
449 |       </provider>
450 |     </entry>
451 |     <entry file="file://$PROJECT_DIR$/README.md">
452 |       <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
453 |         <state split_layout="SPLIT">
454 |           <first_editor relative-caret-position="210">
455 |             <caret line="14" column="24" lean-forward="true" selection-start-line="14" selection-start-column="24" selection-end-line="14" selection-end-column="24" />
456 |             <folding />
457 |           </first_editor>
458 |           <second_editor />
459 |         </state>
460 |       </provider>
461 |     </entry>
462 |   </component>
463 | </project>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-stl-obj-viewer
 2 | 
 3 | React components to view STL and OBJ models.
 4 | Based on THREE.js and [react-stl-viewer](https://github.com/chiedolabs/react-stl-viewer)
 5 | 
 6 | ### [Live Demo](https://bohdanbirdie.github.io/stl-obj-demo/).
 7 | 
 8 | #### [Example](https://github.com/bohdanbirdie/stl-obj-demo/tree/master).
 9 | 
10 | ## How to use
11 | 1. Install the app
12 |     - via npm ```npm install react-stl-obj-viewer --save```
13 |     - via yarn ```yarn add react-stl-obj-viewer```
14 | 
15 | 2. Use OBJ or STL loader
16 | 
17 |     ```import {OBJViewer, STLViewer} from 'npm-react-component-starter';```
18 | 3. Pass props to viewers:
19 | 
20 | ```
21 | static propTypes = {
22 |         className: PropTypes.string, // Class name for viewer wrapper
23 |         url: PropTypes.string,       // Url for STL or OBJ model
24 |         file: PropTypes.object,      // File object of STL or OBJ model, 
25 |                                      // when passed *url* prop will be ingonred
26 |         width: PropTypes.number,     // Width of rendered area 
27 |         height: PropTypes.number,    // Height of rendered area
28 |         backgroundColor: PropTypes.string, // Scene background color 
29 |         modelColor: PropTypes.string,// Model color(textures unsupported)
30 |         sceneClassName: PropTypes.string, // Class name for rendered canvas scene
31 |         onSceneRendered: PropTypes.func,  // Callback for rendered scene ready
32 |     };
33 | ```
34 | Default props
35 | ```
36 | static defaultProps = {
37 |         backgroundColor: '#EAEAEA',
38 |         modelColor: '#B92C2C',
39 |         height: 400,
40 |         width: 400,
41 |         sceneClassName: '',
42 |     };
43 | ```
44 | 
45 | ## Convert scene to screenshot
46 | 
47 | Simply get your element _(canvas scene)_ by any selector and call `.toDataURL("image/png")` on it.
48 | ___
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-stl-obj-viewer",
 3 |   "version": "1.2.0",
 4 |   "description": "React components to view STL and OBJ models.",
 5 |   "main": "build/index.js",
 6 |   "peerDependencies": {
 7 |     "react": "^16.0.0"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git@github.com:bohdanbirdie/react-stl-obj-viewer.git"
12 |   },
13 |   "bugs": {
14 |     "url": "git@github.com:bohdanbirdie/react-stl-obj-viewer.git"
15 |   },
16 |   "scripts": {
17 |     "start": "webpack --watch",
18 |     "build": "webpack",
19 |     "test": "echo \"Error: no test specified\" && exit 1"
20 |   },
21 |   "keywords": [
22 |     "react-component",
23 |     "react",
24 |     "webpack",
25 |     "npm"
26 |   ],
27 |   "author": "Bohdan Birdie",
28 |   "license": "ISC",
29 |   "devDependencies": {
30 |     "babel-cli": "^6.26.0",
31 |     "babel-core": "^6.26.0",
32 |     "babel-loader": "^7.1.2",
33 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
34 |     "babel-plugin-transform-react-jsx": "^6.24.1",
35 |     "babel-preset-env": "^1.6.0",
36 |     "babel-preset-es2015": "^6.3.13",
37 |     "babel-preset-react": "^6.3.13",
38 |     "babel-preset-stage-0": "^6.3.13",
39 |     "css-loader": "^0.28.7",
40 |     "file-loader": "^1.1.3",
41 |     "node-sass": "^4.11.0",
42 |     "sass-loader": "^6.0.6",
43 |     "style-loader": "^0.18.2",
44 |     "url-loader": "^1.1.2"
45 |   },
46 |   "dependencies": {
47 |     "prop-types": "^15.6.2",
48 |     "react": "^16.7.0",
49 |     "react-dom": "^16.7.0",
50 |     "react-spinners": "^0.5.1",
51 |     "three": "^0.100.0",
52 |     "three-addons": "^1.2.0",
53 |     "three-orbit-controls": "^82.1.0",
54 |     "three-stl-loader": "git+https://github.com/bohdanbirdie/three-stl-loader.git",
55 |     "webpack": "^3.6.0"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/OBJViewer.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import PropTypes from 'prop-types'
  3 | import ReactDOM from 'react-dom';
  4 | import * as THREE from 'three';
  5 | import OrbitControlsModule from 'three-orbit-controls'
  6 | import {OBJLoader} from 'three-addons';
  7 | import {ScaleLoader} from 'react-spinners';
  8 | 
  9 | const OrbitControls = OrbitControlsModule(THREE);
 10 | 
 11 | class OBJViewer extends Component {
 12 |     static propTypes = {
 13 |         className: PropTypes.string,
 14 |         url: PropTypes.string,
 15 |         file: PropTypes.object,
 16 |         width: PropTypes.number,
 17 |         height: PropTypes.number,
 18 |         backgroundColor: PropTypes.string,
 19 |         modelColor: PropTypes.string,
 20 |         sceneClassName: PropTypes.string,
 21 |         onSceneRendered: PropTypes.func,
 22 |     };
 23 | 
 24 |     static defaultProps = {
 25 |         backgroundColor: '#EAEAEA',
 26 |         modelColor: '#B92C2C',
 27 |         height: 400,
 28 |         width: 400,
 29 |         orbitControls: true,
 30 |         sceneClassName: '',
 31 |     };
 32 | 
 33 |     constructor(props) {
 34 |         super(props);
 35 | 
 36 |     }
 37 | 
 38 |     componentDidMount() {
 39 |         this.renderModel(this.props)
 40 |     }
 41 | 
 42 |     componentDidUpdate(nextProps) {
 43 |         this.renderModel(nextProps)
 44 |     }
 45 | 
 46 |     renderModel(props) {
 47 |         let camera, scene, renderer, controls;
 48 |         const {url, file, width, height, modelColor, backgroundColor, orbitControls, onSceneRendered, sceneClassName} = props;
 49 |         let xDims, yDims, zDims;
 50 | 
 51 |         camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
 52 |         scene = new THREE.Scene();
 53 | 
 54 |         const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
 55 |         directionalLight.position.x = 0;
 56 |         directionalLight.position.y = 1;
 57 |         directionalLight.position.z = 0;
 58 |         directionalLight.position.normalize();
 59 |         scene.add(directionalLight);
 60 | 
 61 |         const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
 62 | 
 63 |         scene.add(ambientLight);
 64 |         scene.add(camera);
 65 | 
 66 |         const loader = new OBJLoader();
 67 | 
 68 | 
 69 |         const onProgress = function (xhr) {
 70 |             if (xhr.lengthComputable) {
 71 |                 // var percentComplete = xhr.loaded / xhr.total * 100;
 72 |             }
 73 |         };
 74 | 
 75 |         const onLoad = (object) => {
 76 |             const bbox = new THREE.Box3().setFromObject(object);
 77 | 
 78 |             xDims = bbox.max.x - bbox.min.x;
 79 |             yDims = bbox.max.y - bbox.min.y;
 80 |             zDims = bbox.max.z - bbox.min.z;
 81 |             camera.position.set(0, 0, Math.max(xDims * 3, yDims * 3, zDims * 3));
 82 | 
 83 |             object.traverse(function (child) {
 84 |                 if (child.isMesh) {
 85 |                     child.material.color.setStyle(modelColor);
 86 |                 }
 87 |             });
 88 | 
 89 |             object.position.y = -95;
 90 |             scene.add(object);
 91 | 
 92 |             renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true, antialias: true});
 93 |             renderer.setPixelRatio(window.devicePixelRatio);
 94 |             renderer.setClearColor(backgroundColor, 1);
 95 |             renderer.setSize(width, height);
 96 |             renderer.domElement.className = sceneClassName;
 97 | 
 98 |             if (orbitControls) {
 99 |                 controls = new OrbitControls(camera, ReactDOM.findDOMNode(this));
100 |                 controls.enableKeys = false;
101 |                 controls.addEventListener('change', orbitRender);
102 |             }
103 | 
104 | 
105 |             ReactDOM.findDOMNode(this).replaceChild(renderer.domElement,
106 |                 ReactDOM.findDOMNode(this).firstChild);
107 | 
108 | 
109 |             render();
110 | 
111 |             if (typeof onSceneRendered === "function") {
112 |                 onSceneRendered(ReactDOM.findDOMNode(renderer.domElement))
113 |             }
114 |         };
115 | 
116 |         const onError = function (xhr) {
117 |         };
118 | 
119 | 
120 |         if (file) {
121 |             const reader = new FileReader();
122 | 
123 |             reader.onload = function (evt) {
124 |                 if (evt.target.readyState != 2) return;
125 |                 if (evt.target.error) {
126 |                     alert('Error while reading file');
127 |                     return;
128 |                 }
129 | 
130 |                 onLoad(loader.parse(evt.target.result))
131 | 
132 |             };
133 | 
134 |             reader.readAsText(file);
135 |         } else {
136 |             loader.load(url, onLoad, onProgress, onError);
137 |         }
138 | 
139 | 
140 |         const render = () => {
141 |             renderer.render(scene, camera);
142 |         };
143 | 
144 |         const orbitRender = () => {
145 |             render();
146 |         };
147 |     }
148 | 
149 |     componentDidUpdate() {
150 |         this.setState({allowUpdate: true})
151 |     }
152 | 
153 |     shouldComponentUpdate(nextProps, nextState) {
154 |         if (JSON.stringify(nextProps) === JSON.stringify(this.props)) {
155 |             return false
156 |         }
157 |         return true
158 |     }
159 | 
160 |     componentDidCatch(error, info) {
161 |         console.log(error, info)
162 |     }
163 | 
164 |     render() {
165 |         return (
166 |             <div
167 |                 className={this.props.className}
168 |                 style={{
169 |                     width: this.props.width,
170 |                     height: this.props.height,
171 |                     overflow: 'hidden',
172 |                 }}
173 |             >
174 |                 <div style={{
175 |                     height: '100%',
176 |                     display: 'flex',
177 |                     justifyContent: 'center',
178 |                     alignItems: 'center',
179 |                 }}>
180 |                     <ScaleLoader
181 |                         color={'#123abc'}
182 |                         loading={true}
183 |                     />
184 |                 </div>
185 |             </div>
186 |         );
187 |     };
188 | };
189 | 
190 | module.exports = OBJViewer;
191 | 


--------------------------------------------------------------------------------
/src/STLViewer.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import PropTypes from 'prop-types'
  3 | import ReactDOM from 'react-dom';
  4 | import * as THREE from 'three';
  5 | import STLLoaderModule from 'three-stl-loader'
  6 | import OrbitControlsModule from 'three-orbit-controls'
  7 | import {ScaleLoader} from 'react-spinners';
  8 | 
  9 | const STLLoader = STLLoaderModule(THREE);
 10 | const OrbitControls = OrbitControlsModule(THREE);
 11 | 
 12 | class STLViewer extends Component {
 13 |     static propTypes = {
 14 |         className: PropTypes.string,
 15 |         url: PropTypes.string,
 16 |         file: PropTypes.object,
 17 |         width: PropTypes.number,
 18 |         height: PropTypes.number,
 19 |         backgroundColor: PropTypes.string,
 20 |         modelColor: PropTypes.string,
 21 |         sceneClassName: PropTypes.string,
 22 |         onSceneRendered: PropTypes.func,
 23 |     };
 24 | 
 25 |     static defaultProps = {
 26 |         backgroundColor: '#EAEAEA',
 27 |         modelColor: '#B92C2C',
 28 |         height: 400,
 29 |         width: 400,
 30 |         rotate: true,
 31 |         orbitControls: true,
 32 |         sceneClassName: '',
 33 |     };
 34 | 
 35 |     componentDidMount() {
 36 |         this.renderModel(this.props);
 37 |     }
 38 | 
 39 |     renderModel(props) {
 40 |         let camera, scene, renderer, mesh, distance, controls;
 41 |         const {url, file, width, height, modelColor, backgroundColor, orbitControls, sceneClassName, onSceneRendered} = props;
 42 |         let xDims, yDims, zDims;
 43 |         let component = this;
 44 | 
 45 | 
 46 |         scene = new THREE.Scene();
 47 |         distance = 10000;
 48 |         const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
 49 |         directionalLight.position.x = 0;
 50 |         directionalLight.position.y = 1;
 51 |         directionalLight.position.z = 0;
 52 |         directionalLight.position.normalize();
 53 |         scene.add(directionalLight);
 54 | 
 55 |         const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
 56 |         scene.add(ambientLight);
 57 | 
 58 |         const onLoad = geometry => {
 59 |             geometry.computeFaceNormals();
 60 |             geometry.computeVertexNormals();
 61 |             geometry.center();
 62 | 
 63 |             mesh = new THREE.Mesh(
 64 |                 geometry,
 65 |                 new THREE.MeshLambertMaterial({
 66 |                         overdraw: true,
 67 |                         color: modelColor,
 68 |                     }
 69 |                 ));
 70 | 
 71 |             geometry.computeBoundingBox();
 72 |             xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
 73 |             yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
 74 |             zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
 75 | 
 76 |             scene.add(mesh);
 77 | 
 78 |             camera = new THREE.PerspectiveCamera(30, width / height, 1, distance);
 79 |             camera.position.set(0, 0, Math.max(xDims * 3, yDims * 3, zDims * 3));
 80 | 
 81 |             scene.add(camera);
 82 | 
 83 |             renderer = new THREE.WebGLRenderer({
 84 |                 preserveDrawingBuffer: true,
 85 |                 antialias: true
 86 |             });
 87 |             renderer.setSize(width, height);
 88 |             renderer.setClearColor(backgroundColor, 1);
 89 |             renderer.domElement.className = sceneClassName;
 90 | 
 91 | 
 92 |             if (orbitControls) {
 93 |                 controls = new OrbitControls(camera, ReactDOM.findDOMNode(component));
 94 |                 controls.enableKeys = false;
 95 |                 controls.addEventListener('change', orbitRender);
 96 |             }
 97 | 
 98 |             ReactDOM.findDOMNode(this).replaceChild(renderer.domElement,
 99 |                 ReactDOM.findDOMNode(this).firstChild);
100 | 
101 |             render();
102 | 
103 |             if (typeof onSceneRendered === "function") {
104 |                 onSceneRendered(ReactDOM.findDOMNode(renderer.domElement))
105 |             }
106 |         };
107 | 
108 |         const onProgress = (xhr) => {
109 |             if (xhr.lengthComputable) {
110 |                 let percentComplete = xhr.loaded / xhr.total * 100;
111 |             }
112 |         };
113 | 
114 |         const loader = new STLLoader();
115 | 
116 |         if (file) {
117 |             loader.loadFile(file, onLoad, onProgress);
118 |         } else {
119 |             loader.load(url, onLoad, onProgress);
120 |         }
121 | 
122 |         const render = () => {
123 |             renderer.render(scene, camera);
124 |         };
125 | 
126 |         const orbitRender = () => {
127 |             render();
128 |         };
129 |     }
130 | 
131 |     shouldComponentUpdate(nextProps, nextState) {
132 |         if (JSON.stringify(nextProps) === JSON.stringify(this.props)) {
133 |             return false
134 |         }
135 |         return true
136 |     }
137 | 
138 |     componentDidUpdate(nextProps, nextState) {
139 |         this.renderModel(nextProps);
140 |     }
141 | 
142 |     componentDidCatch(error, info) {
143 |         console.log(error, info)
144 |     }
145 | 
146 |     render() {
147 |         return (
148 |             <div
149 |                 className={this.props.className}
150 |                 style={{
151 |                     width: this.props.width,
152 |                     height: this.props.height,
153 |                     overflow: 'hidden',
154 |                 }}
155 |             >
156 |                 <div style={{
157 |                     height: '100%',
158 |                     display: 'flex',
159 |                     justifyContent: 'center',
160 |                     alignItems: 'center',
161 |                 }}>
162 |                     <ScaleLoader
163 |                         color={'#123abc'}
164 |                         loading={true}
165 |                     />
166 |                 </div>
167 |             </div>
168 |         );
169 |     };
170 | };
171 | 
172 | module.exports = STLViewer;
173 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import OBJViewer from './OBJViewer';
2 | import STLViewer from './STLViewer';
3 | 
4 | export {
5 |     OBJViewer,
6 |     STLViewer
7 | }
8 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | module.exports = {
 3 |   entry: './src/index.js',
 4 |   output: {
 5 |     path: path.resolve(__dirname, 'build'),
 6 |     filename: 'index.js',
 7 |     libraryTarget: 'commonjs2'
 8 |   },
 9 |   module: {
10 |     loaders: [
11 |       {
12 |         test: /\.jsx?$/,
13 |         include: path.resolve(__dirname, 'src'),
14 |         exclude: /(node_modules|bower_components|build)/,
15 |         loader: 'babel-loader'
16 |       },
17 |       {
18 |           test: /\.scss$/,
19 |           loaders: ['style-loader', 'css-loader', 'sass-loader']
20 |       },
21 |       {
22 |         test: /\.(jpg|png|gif)$/,
23 |         loader: 'url-loader',
24 |         options: {
25 |           limit: 25000,
26 |         },
27 |       },
28 |     ],
29 |   },
30 |   externals: {
31 |     'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
32 |   }
33 | };
34 | 


--------------------------------------------------------------------------------