stl-viewer - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

dist/STLViewer.js

@@ -9,14 +9,12 @@ 'use strict';
 
-var _reactDom = require('react-dom');
+var _propTypes = require('prop-types');
 
-var _reactDom2 = _interopRequireDefault(_reactDom);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Three = require('./Three');
+var _halogenium = require('halogenium');
 
-var _Three2 = _interopRequireDefault(_Three);
+var _Paint = require('./Paint');
 
-var _ScaleLoader = require('halogen/ScaleLoader');
+var _Paint2 = _interopRequireDefault(_Paint);
 
-var _ScaleLoader2 = _interopRequireDefault(_ScaleLoader);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,334 +28,221 @@
 
-var OrbitControls = require('three-orbit-controls')(_Three2.default);
-
 var STLViewer = function (_Component) {
-	_inherits(STLViewer, _Component);
+  _inherits(STLViewer, _Component);
 
-	function STLViewer() {
-		_classCallCheck(this, STLViewer);
+  function STLViewer() {
+    _classCallCheck(this, STLViewer);
 
-		return _possibleConstructorReturn(this, (STLViewer.__proto__ || Object.getPrototypeOf(STLViewer)).apply(this, arguments));
-	}
+    return _possibleConstructorReturn(this, (STLViewer.__proto__ || Object.getPrototypeOf(STLViewer)).apply(this, arguments));
+  }
 
-	_createClass(STLViewer, [{
-		key: 'componentDidMount',
-		value: function componentDidMount() {
-			var _this2 = this;
+  _createClass(STLViewer, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
 
-			var camera = void 0,
-			    scene = void 0,
-			    renderer = void 0,
-			    mesh = void 0,
-			    distance = void 0,
-			    controls = void 0;
-			var _props = this.props,
-			    url = _props.url,
-			    width = _props.width,
-			    height = _props.height,
-			    modelColor = _props.modelColor,
-			    backgroundColor = _props.backgroundColor,
-			    orbitControls = _props.orbitControls;
+      var camera = void 0,
+          scene = void 0,
+          renderer = void 0,
+          mesh = void 0,
+          distance = void 0,
+          controls = void 0;
+      var _props = this.props,
+          url = _props.url,
+          width = _props.width,
+          height = _props.height,
+          modelColor = _props.modelColor,
+          backgroundColor = _props.backgroundColor,
+          orbitControls = _props.orbitControls;
 
-			var xDims = void 0,
-			    yDims = void 0,
-			    zDims = void 0;
-			var component = this;
-			var rotate = this.props.rotate;
+      var xDims = void 0,
+          yDims = void 0,
+          zDims = void 0;
+      var component = this;
+      var rotate = this.props.rotate;
+      var paint = new _Paint2.default(this);
 
-			init();
+      init();
 
-			/**
-    * The init method for the 3D scene
-    * @returns {void}
-    */
-			function init() {
-				//Detector.addGetWebGLMessage();
-				scene = new _Three2.default.Scene();
-				distance = 10000;
-				var directionalLight = new _Three2.default.DirectionalLight(0xffffff);
-				directionalLight.position.x = 0;
-				directionalLight.position.y = 0;
-				directionalLight.position.z = 1;
-				directionalLight.position.normalize();
-				scene.add(directionalLight);
+      /**
+       * The init method for the 3D scene
+       * @returns {void}
+       */
+      function init() {
+        paint.init();
+      }
 
-				var loader = new _Three2.default.STLLoader();
-				loader.crossOrigin = '';
-				loader.load(url, function (geometry) {
+      /**
+       * Animate the scene
+       * @returns {void}
+       */
+      var animate = function animate() {
+        // note: three.js includes requestAnimationFrame shim
+        if (rotate) {
+          requestAnimationFrame(animate);
+        }
+        if (_this2.props.orbitControls) {
+          controls.update();
+        }
+        render();
+      };
 
-					// Calculate mesh noramls for MeshLambertMaterial.
-					geometry.computeFaceNormals();
-					geometry.computeVertexNormals();
+      /**
+       * Render the scene after turning off the rotation
+       * @returns {void}
+       */
+      var orbitRender = function orbitRender() {
+        if (rotate) {
+          rotate = false;
+        }
 
-					// Center the object
-					geometry.center();
+        render();
+      };
 
-					mesh = new _Three2.default.Mesh(geometry, new _Three2.default.MeshLambertMaterial({
-						overdraw: true,
-						color: modelColor
-					}));
-					// Set the object's dimensions
-					geometry.computeBoundingBox();
-					xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
-					yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
-					zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
-					if (rotate) {
-						mesh.rotation.x = 5;
-						mesh.rotation.z = .25;
-					}
-					scene.add(mesh);
+      /**
+       * Render the scene
+       * @returns {void}
+       */
+      var render = function render() {
+        if (mesh && rotate) {
+          mesh.rotation.z += 0.02;
+        }
 
-					// Add the camera
-					camera = new _Three2.default.PerspectiveCamera(30, width / height, 1, distance);
-					camera.position.set(0, 0, Math.max(xDims * 3, yDims * 3, zDims * 3));
+        renderer.render(scene, camera);
+      };
+    }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (JSON.stringify(nextProps) === JSON.stringify(this.props)) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate(nextProps, nextState) {
+      var camera = void 0,
+          scene = void 0,
+          renderer = void 0,
+          mesh = void 0,
+          distance = void 0,
+          controls = void 0;
+      var url = nextProps.url,
+          width = nextProps.width,
+          height = nextProps.height,
+          modelColor = nextProps.modelColor,
+          backgroundColor = nextProps.backgroundColor,
+          orbitControls = nextProps.orbitControls;
 
-					scene.add(camera);
+      var xDims = void 0,
+          yDims = void 0,
+          zDims = void 0;
+      var component = this;
+      var rotate = nextProps.rotate;
 
-					renderer = new _Three2.default.WebGLRenderer(); //new THREE.CanvasRenderer();
-					renderer.setSize(width, height);
-					renderer.setClearColor(backgroundColor, 1);
+      this.props = nextProps;
+      var paint = new _Paint2.default(this);
 
-					// Add controls for mouse interaction
-					if (orbitControls) {
-						controls = new OrbitControls(camera, _reactDom2.default.findDOMNode(component));
-						controls.enableKeys = false;
-						controls.addEventListener('change', orbitRender);
-					}
+      init();
 
-					// Add to the React Component
-					_reactDom2.default.findDOMNode(component).replaceChild(renderer.domElement, _reactDom2.default.findDOMNode(component).firstChild);
+      /**
+       * The init method for the 3D scene
+       * @returns {void}
+       */
+      function init() {
+        paint.init();
+      }
 
-					// Start the animation
-					animate();
-				});
-			}
+      /**
+       * Animate the scene
+       * @returns {void}
+       */
+      var animate = function animate() {
+        // note: three.js includes requestAnimationFrame shim
+        if (rotate) {
+          requestAnimationFrame(animate);
+        }
+        if (nextProps.orbitControls) {
+          controls.update();
+        }
+        render();
+      };
 
-			/**
-    * Animate the scene
-    * @returns {void}
-    */
-			var animate = function animate() {
-				// note: three.js includes requestAnimationFrame shim
-				if (rotate) {
-					requestAnimationFrame(animate);
-				}
-				if (_this2.props.orbitControls) {
-					controls.update();
-				}
-				render();
-			};
+      /**
+       * Render the scene after turning off the rotation
+       * @returns {void}
+       */
+      var orbitRender = function orbitRender() {
+        if (rotate) {
+          rotate = false;
+        }
 
-			/**
-    * Render the scene after turning off the rotation
-    * @returns {void}
-    */
-			var orbitRender = function orbitRender() {
-				if (rotate) {
-					rotate = false;
-				}
+        render();
+      };
 
-				render();
-			};
+      /**
+       * Render the scene
+       * @returns {void}
+       */
+      var render = function render() {
+        if (mesh && rotate) {
+          mesh.rotation.z += 0.02;
+        }
 
-			/**
-    * Render the scene
-    * @returns {void}
-    */
-			var render = function render() {
-				if (mesh && rotate) {
-					mesh.rotation.z += 0.02;
-				}
+        renderer.render(scene, camera);
+      };
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          width = _props2.width,
+          height = _props2.height,
+          modelColor = _props2.modelColor;
 
-				renderer.render(scene, camera);
-			};
-		}
-	}, {
-		key: 'shouldComponentUpdate',
-		value: function shouldComponentUpdate(nextProps, nextState) {
-			if (JSON.stringify(nextProps) === JSON.stringify(this.props)) {
-				return false;
-			}
-			return true;
-		}
-	}, {
-		key: 'componentWillUpdate',
-		value: function componentWillUpdate(nextProps, nextState) {
-			var camera = void 0,
-			    scene = void 0,
-			    renderer = void 0,
-			    mesh = void 0,
-			    distance = void 0,
-			    controls = void 0;
-			var url = nextProps.url,
-			    width = nextProps.width,
-			    height = nextProps.height,
-			    modelColor = nextProps.modelColor,
-			    backgroundColor = nextProps.backgroundColor,
-			    orbitControls = nextProps.orbitControls;
 
-			var xDims = void 0,
-			    yDims = void 0,
-			    zDims = void 0;
-			var component = this;
-			var rotate = nextProps.rotate;
+      return _react2.default.createElement(
+        'div',
+        {
+          className: this.props.className,
+          style: {
+            width: width,
+            height: height,
+            overflow: 'hidden'
+          }
+        },
+        _react2.default.createElement(
+          'div',
+          { style: {
+              height: '100%',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center'
+            } },
+          _react2.default.createElement(_halogenium.ScaleLoader, { color: modelColor, size: '16px' })
+        )
+      );
+    }
+  }]);
 
-			init();
-
-			/**
-    * The init method for the 3D scene
-    * @returns {void}
-    */
-			function init() {
-				//Detector.addGetWebGLMessage();
-				scene = new _Three2.default.Scene();
-				distance = 10000;
-				var directionalLight = new _Three2.default.DirectionalLight(0xffffff);
-				directionalLight.position.x = 0;
-				directionalLight.position.y = 0;
-				directionalLight.position.z = 1;
-				directionalLight.position.normalize();
-				scene.add(directionalLight);
-
-				var loader = new _Three2.default.STLLoader();
-				loader.crossOrigin = '';
-				loader.load(url, function (geometry) {
-
-					// Calculate mesh noramls for MeshLambertMaterial.
-					geometry.computeFaceNormals();
-					geometry.computeVertexNormals();
-
-					// Center the object
-					geometry.center();
-
-					mesh = new _Three2.default.Mesh(geometry, new _Three2.default.MeshLambertMaterial({
-						overdraw: true,
-						color: modelColor
-					}));
-					// Set the object's dimensions
-					geometry.computeBoundingBox();
-					xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
-					yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
-					zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
-					if (rotate) {
-						mesh.rotation.x = 5;
-						mesh.rotation.z = .25;
-					}
-					scene.add(mesh);
-
-					// Add the camera
-					camera = new _Three2.default.PerspectiveCamera(30, width / height, 1, distance);
-					camera.position.set(0, 0, Math.max(xDims * 3, yDims * 3, zDims * 3));
-
-					scene.add(camera);
-
-					renderer = new _Three2.default.WebGLRenderer(); //new THREE.CanvasRenderer();
-					renderer.setSize(width, height);
-					renderer.setClearColor(backgroundColor, 1);
-
-					// Add controls for mouse interaction
-					if (orbitControls) {
-						controls = new OrbitControls(camera, _reactDom2.default.findDOMNode(component));
-						controls.addEventListener('change', orbitRender);
-					}
-
-					// Add to the React Component
-					_reactDom2.default.findDOMNode(component).replaceChild(renderer.domElement, _reactDom2.default.findDOMNode(component).firstChild);
-
-					// Start the animation
-					animate();
-				});
-			}
-
-			/**
-    * Animate the scene
-    * @returns {void}
-    */
-			var animate = function animate() {
-				// note: three.js includes requestAnimationFrame shim
-				if (rotate) {
-					requestAnimationFrame(animate);
-				}
-				if (nextProps.orbitControls) {
-					controls.update();
-				}
-				render();
-			};
-
-			/**
-    * Render the scene after turning off the rotation
-    * @returns {void}
-    */
-			var orbitRender = function orbitRender() {
-				if (rotate) {
-					rotate = false;
-				}
-
-				render();
-			};
-
-			/**
-    * Render the scene
-    * @returns {void}
-    */
-			var render = function render() {
-				if (mesh && rotate) {
-					mesh.rotation.z += 0.02;
-				}
-
-				renderer.render(scene, camera);
-			};
-		}
-	}, {
-		key: 'render',
-		value: function render() {
-			var _props2 = this.props,
-			    width = _props2.width,
-			    height = _props2.height,
-			    modelColor = _props2.modelColor;
-
-
-			return _react2.default.createElement(
-				'div',
-				{
-					className: this.props.className,
-					style: {
-						width: width,
-						height: height,
-						overflow: 'hidden'
-					}
-				},
-				_react2.default.createElement(
-					'div',
-					{ style: {
-							height: '100%',
-							display: 'flex',
-							justifyContent: 'center',
-							alignItems: 'center'
-						} },
-					_react2.default.createElement(_ScaleLoader2.default, { color: modelColor, size: '16px' })
-				)
-			);
-		}
-	}]);
-
-	return STLViewer;
+  return STLViewer;
 }(_react.Component);
 
 STLViewer.propTypes = {
-	className: _react.PropTypes.string,
-	url: _react.PropTypes.string,
-	width: _react.PropTypes.number,
-	height: _react.PropTypes.number,
-	backgroundColor: _react.PropTypes.string,
-	modelColor: _react.PropTypes.string,
-	rotate: _react.PropTypes.bool,
-	orbitControls: _react.PropTypes.bool
+  className: _propTypes2.default.string,
+  url: _propTypes2.default.string,
+  width: _propTypes2.default.number,
+  height: _propTypes2.default.number,
+  backgroundColor: _propTypes2.default.string,
+  modelColor: _propTypes2.default.string,
+  rotate: _propTypes2.default.bool,
+  orbitControls: _propTypes2.default.bool
 };
 STLViewer.defaultProps = {
-	backgroundColor: '#EAEAEA',
-	modelColor: '#B92C2C',
-	height: 400,
-	width: 400,
-	rotate: true,
-	orbitControls: true
+  backgroundColor: '#EAEAEA',
+  modelColor: '#B92C2C',
+  height: 400,
+  width: 400,
+  rotate: true,
+  orbitControls: true
 };
@@ -364,0 +249,0 @@ ;

package.json

 {
   "name": "stl-viewer",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A component for viewing an STL object from a given URL by utilizing Three.js",
@@ -27,3 +27,4 @@ "main": "dist/STLViewer.js",
   "dependencies": {
-    "halogen": "^0.1.10",
+    "halogenium": "^2.2.3",
+    "prop-types": "^15.6.1",
     "three": "^0.72.0",
@@ -33,8 +34,6 @@ "three-orbit-controls": "^72.0.0"
   "peerDependencies": {
-    "react": ">=0.14.0",
-    "react-dom": ">=0.14.0"
+    "react": ">=16.2.0",
+    "react-dom": ">=16.2.0"
   },
   "devDependencies": {
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
     "babel-cli": "^6.3.17",
@@ -58,6 +57,7 @@ "babel-core": "^6.3.15",
     "query-string": "^3.0.0",
-    "react-addons-test-utils": "^0.14.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
-    "redbox-react": "^1.0.1",
+    "redbox-react": "^1.5.0",
     "rimraf": "^2.4.3",
@@ -64,0 +64,0 @@ "webpack": "^1.12.2",

react/containers/App.js

@@ -1,26 +0,26 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import STLViewer from '../../src/STLViewer';
 
-class App extends Component{
-	constructor(props) {
-		super(props)
-		this.state = {
-			color: '#FF0000'
-		}
+class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      color: '#FF0000'
+    }
 
-		this.clickBlue = this.clickBlue.bind(this)
-		this.clickRed = this.clickRed.bind(this)
-	}
+    this.clickBlue = this.clickBlue.bind(this)
+    this.clickRed = this.clickRed.bind(this)
+  }
 
-	clickBlue(e) {
-		e.preventDefault()
-		this.setState({color: '#0000FF'})
-	}
+  clickBlue(e) {
+    e.preventDefault()
+    this.setState({ color: '#0000FF' })
+  }
 
-	clickRed(e) {
-		e.preventDefault()
-		this.setState({color: '#FF0000'})	
-	}
+  clickRed(e) {
+    e.preventDefault()
+    this.setState({ color: '#FF0000' })
+  }
 
-  render(){
+  render() {
     return (
@@ -32,5 +32,5 @@ <div>
       </div>
-    );
-  }
+      );
+}
 };
 export default App;

README.md

@@ -5,2 +5,4 @@ # React STL Viewer
 
+## Looking for contributors
+
 See a <a href="http://chiedolabs.github.io/react-stl-viewer/" target="_blank">live demo here.</a>
@@ -35,2 +37,2 @@
 - Run this in the root of the project folder `python -m SimpleHTTPServer 8000`
-- Visit `http://0.0.0.0:8000` in your browser
+- Visit `http://0.0.0.0:8000` in your browser

src/STLViewer.js

@@ -1,299 +0,177 @@
-import React, { PropTypes, Component } from 'react';
-import ReactDOM  from 'react-dom';
-import THREE from './Three';
-import Loader from 'halogen/ScaleLoader';
-let OrbitControls = require('three-orbit-controls')(THREE);
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'
+import { ScaleLoader } from 'halogenium';
+import Paint from './Paint';
 
 class STLViewer extends Component {
-	static propTypes = {
-		className: PropTypes.string,
-		url: PropTypes.string,
-		width: PropTypes.number,
-		height: PropTypes.number,
-		backgroundColor: PropTypes.string,
-		modelColor: PropTypes.string,
-		rotate: PropTypes.bool,
-		orbitControls: PropTypes.bool,
-	};
+  static propTypes = {
+    className: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    backgroundColor: PropTypes.string,
+    modelColor: PropTypes.string,
+    rotate: PropTypes.bool,
+    orbitControls: PropTypes.bool
+  };
 
-	static defaultProps = {
-		backgroundColor: '#EAEAEA',
-		modelColor: '#B92C2C',
-		height: 400,
-		width: 400,
-		rotate: true,
-		orbitControls: true,
-	};
+  static defaultProps = {
+    backgroundColor: '#EAEAEA',
+    modelColor: '#B92C2C',
+    height: 400,
+    width: 400,
+    rotate: true,
+    orbitControls: true
+  };
 
-	componentDidMount() {
-		let camera, scene, renderer, mesh, distance, controls;
-		const { url, width, height, modelColor, backgroundColor, orbitControls } = this.props;
-		let xDims, yDims, zDims;
-		let component = this;
-		let rotate = this.props.rotate;
+  componentDidMount() {
+    let camera, scene, renderer, mesh, distance, controls;
+    const { url, width, height, modelColor, backgroundColor, orbitControls } = this.props;
+    let xDims, yDims, zDims;
+    let component = this;
+    let rotate = this.props.rotate;
+    let paint = new Paint(this)
 
-		init();
+    init();
 
-		/**
-		 * The init method for the 3D scene
-		 * @returns {void}
-		 */
-		function init() {
-			//Detector.addGetWebGLMessage();
-			scene = new THREE.Scene();
-			distance = 10000;
-			let directionalLight = new THREE.DirectionalLight( 0xffffff );
-			directionalLight.position.x = 0;
-			directionalLight.position.y = 0;
-			directionalLight.position.z = 1;
-			directionalLight.position.normalize();
-			scene.add( directionalLight );
+    /**
+     * The init method for the 3D scene
+     * @returns {void}
+     */
+    function init() {
+      paint.init();
+    }
 
-			let loader = new THREE.STLLoader();
-			loader.crossOrigin = '';
-			loader.load(url, ( geometry ) => {
-				
-				// Calculate mesh noramls for MeshLambertMaterial.
-				geometry.computeFaceNormals();
-				geometry.computeVertexNormals();
+    /**
+     * Animate the scene
+     * @returns {void}
+     */
+    let animate = () => {
+      // note: three.js includes requestAnimationFrame shim
+      if (rotate) {
+        requestAnimationFrame(animate);
+      }
+      if (this.props.orbitControls) {
+        controls.update();
+      }
+      render();
+    };
 
-				// Center the object
-				geometry.center();
+    /**
+     * Render the scene after turning off the rotation
+     * @returns {void}
+     */
+    let orbitRender = () => {
+      if (rotate) {
+        rotate = false;
+      }
 
-				mesh = new THREE.Mesh(
-					geometry,
-					new THREE.MeshLambertMaterial({
-						overdraw:true,
-						color: modelColor,
-					}
-				));
-				// Set the object's dimensions
-				geometry.computeBoundingBox();
-				xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
-				yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
-				zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
-				if(rotate) {
-					mesh.rotation.x = 5;
-					mesh.rotation.z = .25;
-				}
-				scene.add( mesh );
+      render();
+    };
 
-				// Add the camera
-				camera = new THREE.PerspectiveCamera( 30, width / height, 1, distance );
-				camera.position.set(0,0,Math.max(xDims*3,yDims*3,zDims*3));
+    /**
+     * Render the scene
+     * @returns {void}
+     */
+    let render = () => {
+      if (mesh && rotate) {
+        mesh.rotation.z += 0.02;
+      }
 
-				scene.add( camera );
+      renderer.render(scene, camera);
+    };
+  }
 
-				renderer = new THREE.WebGLRenderer(); //new THREE.CanvasRenderer();
-				renderer.setSize( width, height );
-				renderer.setClearColor(backgroundColor, 1);
+  shouldComponentUpdate(nextProps, nextState) {
+    if (JSON.stringify(nextProps) === JSON.stringify(this.props)) {
+      return false
+    }
+    return true
+  }
 
-				// Add controls for mouse interaction
-				if(orbitControls) {
-					controls = new OrbitControls(camera, ReactDOM.findDOMNode(component));
-					controls.enableKeys = false
-					controls.addEventListener( 'change', orbitRender );
-				}
+  componentWillUpdate(nextProps, nextState) {
+    let camera, scene, renderer, mesh, distance, controls;
+    const { url, width, height, modelColor, backgroundColor, orbitControls } = nextProps;
+    let xDims, yDims, zDims;
+    let component = this;
+    let rotate = nextProps.rotate;
 
-				// Add to the React Component
-				ReactDOM.findDOMNode(component).replaceChild( renderer.domElement,
-					ReactDOM.findDOMNode(component).firstChild);
+    this.props = nextProps;
+    let paint = new Paint(this)
 
-				// Start the animation
-				animate();
-			});
-		}
+    init();
 
-		/**
-		 * Animate the scene
-		 * @returns {void}
-		 */
-		let animate = () => {
-			// note: three.js includes requestAnimationFrame shim
-			if(rotate) {
-				requestAnimationFrame( animate );
-			}
-			if(this.props.orbitControls) {
-				controls.update();
-			}
-			render();
-		};
+    /**
+     * The init method for the 3D scene
+     * @returns {void}
+     */
+    function init() {
+      paint.init();
+    }
 
-		/**
-		 * Render the scene after turning off the rotation
-		 * @returns {void}
-		 */
-		let orbitRender = () => {
-			if(rotate) {
-				rotate = false;
-			}
+    /**
+     * Animate the scene
+     * @returns {void}
+     */
+    let animate = () => {
+      // note: three.js includes requestAnimationFrame shim
+      if (rotate) {
+        requestAnimationFrame(animate);
+      }
+      if (nextProps.orbitControls) {
+        controls.update();
+      }
+      render();
+    };
 
-			render();
-		};
+    /**
+     * Render the scene after turning off the rotation
+     * @returns {void}
+     */
+    let orbitRender = () => {
+      if (rotate) {
+        rotate = false;
+      }
 
+      render();
+    };
 
-		/**
-		 * Render the scene
-		 * @returns {void}
-		 */
-		let render = () => {
-			if (mesh && rotate) {
-				mesh.rotation.z += 0.02;
-			}
+    /**
+     * Render the scene
+     * @returns {void}
+     */
+    let render = () => {
+      if (mesh && rotate) {
+        mesh.rotation.z += 0.02;
+      }
 
-			renderer.render( scene, camera );
-		};
-	}
+      renderer.render(scene, camera);
+    };
+  }
 
-	shouldComponentUpdate(nextProps, nextState) {
-		if( JSON.stringify(nextProps) === JSON.stringify(this.props)){
-			return false
-		}
-		return true
-	}
+  render() {
+    const { width, height, modelColor } = this.props;
 
-	componentWillUpdate(nextProps, nextState) {
-		let camera, scene, renderer, mesh, distance, controls;
-		const { url, width, height, modelColor, backgroundColor, orbitControls } = nextProps;
-		let xDims, yDims, zDims;
-		let component = this;
-		let rotate = nextProps.rotate;
-
-		init();
-
-		/**
-		 * The init method for the 3D scene
-		 * @returns {void}
-		 */
-		function init() {
-			//Detector.addGetWebGLMessage();
-			scene = new THREE.Scene();
-			distance = 10000;
-			let directionalLight = new THREE.DirectionalLight( 0xffffff );
-			directionalLight.position.x = 0;
-			directionalLight.position.y = 0;
-			directionalLight.position.z = 1;
-			directionalLight.position.normalize();
-			scene.add( directionalLight );
-
-			let loader = new THREE.STLLoader();
-			loader.crossOrigin = '';
-			loader.load(url, ( geometry ) => {
-				
-				// Calculate mesh noramls for MeshLambertMaterial.
-				geometry.computeFaceNormals();
-				geometry.computeVertexNormals();
-
-				// Center the object
-				geometry.center();
-
-				mesh = new THREE.Mesh(
-					geometry,
-					new THREE.MeshLambertMaterial({
-						overdraw:true,
-						color: modelColor,
-					}
-				));
-				// Set the object's dimensions
-				geometry.computeBoundingBox();
-				xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
-				yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
-				zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
-				if(rotate) {
-					mesh.rotation.x = 5;
-					mesh.rotation.z = .25;
-				}
-				scene.add( mesh );
-
-				// Add the camera
-				camera = new THREE.PerspectiveCamera( 30, width / height, 1, distance );
-				camera.position.set(0,0,Math.max(xDims*3,yDims*3,zDims*3));
-
-				scene.add( camera );
-
-				renderer = new THREE.WebGLRenderer(); //new THREE.CanvasRenderer();
-				renderer.setSize( width, height );
-				renderer.setClearColor(backgroundColor, 1);
-
-				// Add controls for mouse interaction
-				if(orbitControls) {
-					controls = new OrbitControls(camera, ReactDOM.findDOMNode(component));
-					controls.addEventListener( 'change', orbitRender );
-				}
-
-				// Add to the React Component
-				ReactDOM.findDOMNode(component).replaceChild( renderer.domElement,
-					ReactDOM.findDOMNode(component).firstChild);
-
-				// Start the animation
-				animate();
-			});
-		}
-
-		/**
-		 * Animate the scene
-		 * @returns {void}
-		 */
-		let animate = () => {
-			// note: three.js includes requestAnimationFrame shim
-			if(rotate) {
-				requestAnimationFrame( animate );
-			}
-			if(nextProps.orbitControls) {
-				controls.update();
-			}
-			render();
-		};
-
-		/**
-		 * Render the scene after turning off the rotation
-		 * @returns {void}
-		 */
-		let orbitRender = () => {
-			if(rotate) {
-				rotate = false;
-			}
-
-			render();
-		};
-
-
-		/**
-		 * Render the scene
-		 * @returns {void}
-		 */
-		let render = () => {
-			if (mesh && rotate) {
-				mesh.rotation.z += 0.02;
-			}
-
-			renderer.render( scene, camera );
-		};
-	}
-
-	render() {
-		const {width, height, modelColor} = this.props;
-
-		return(
-			<div
-				className={this.props.className}
-				style={{
-					width: width,
-					height: height,
-					overflow: 'hidden',
-				}}
-			>
-				<div style={{
-					height: '100%',
-					display: 'flex',
-					justifyContent: 'center',
-					alignItems: 'center',
-				}} >
-					<Loader color={modelColor} size="16px" />
-				</div>
-			</div>
-		);
-	};
+    return(
+      <div
+        className={this.props.className}
+        style={{
+        width: width,
+        height: height,
+        overflow: 'hidden',
+        }}
+      >
+        <div style={{
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          }} >
+          <ScaleLoader color={modelColor} size="16px" />
+        </div>
+      </div>
+      );
 };
+};
 
 module.exports = STLViewer;

No alert changes

Improved metrics

Dev dependency count

28

decreased by-3.45%

Number of package files

22

increased by4.76%

Lines of code

3577

increased by2.26%

Number of lines in readme file

37

increased by8.82%

Worsened metrics

Total package byte prevSize

6611401

decreased by-0.06%

Dependency count

6

increased by20%

Dependency changes

• + Addedhalogenium@^2.2.3

• + Addedprop-types@^15.6.1

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.5(transitive)

• + Added@babel/core@7.26.7(transitive)

• + Added@babel/generator@7.26.5(transitive)

• + Added@babel/helper-annotate-as-pure@7.25.9(transitive)

• + Added@babel/helper-compilation-targets@7.26.5(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.26.5(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.7(transitive)

• + Added@babel/parser@7.26.7(transitive)

• + Added@babel/plugin-syntax-jsx@7.25.9(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.26.7(transitive)

• + Added@babel/types@7.26.7(transitive)

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.4(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001697(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@2.3.2(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addedelectron-to-chromium@1.5.94(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhalogenium@2.3.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedis-what@3.14.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedmemoize-one@5.2.1(transitive)

• + Addedmerge-anything@2.4.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedscheduler@0.19.1(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedstyled-components@4.4.1(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedupdate-browserslist-db@1.1.2(transitive)

• + Addedyallist@3.1.1(transitive)

• - Removedhalogen@^0.1.10

• - Removedhalogen@0.1.10(transitive)

• - Removedreact-kit@0.1.14(transitive)