stl-viewer - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

dist/STLViewer.js

@@ -29,2 +29,4 @@ 'use strict';
 
+var OrbitControls = require('three-orbit-controls')(_Three2.default);
+
 var STLViewer = function (_Component) {
@@ -42,2 +44,4 @@ _inherits(STLViewer, _Component);
     value: function componentDidMount() {
+      var _this2 = this;
+
       var camera = undefined,
@@ -47,3 +51,4 @@ scene = undefined,
           mesh = undefined,
-          distance = undefined;
+          distance = undefined,
+          controls = undefined;
       var _props = this.props;
@@ -55,2 +60,4 @@ var url = _props.url;
       var backgroundColor = _props.backgroundColor;
+      var rotate = _props.rotate;
+      var orbitControls = _props.orbitControls;
 
@@ -97,5 +104,6 @@ var xDims = undefined,
           zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
-
-          mesh.rotation.x = 5;
-          mesh.rotation.z = .25;
+          if (rotate) {
+            mesh.rotation.x = 5;
+            mesh.rotation.z = .25;
+          }
           scene.add(mesh);
@@ -113,2 +121,8 @@
 
+          // Add controls for mouse interaction
+          if (orbitControls) {
+            controls = new OrbitControls(camera, _reactDom2.default.findDOMNode(component));
+            controls.addEventListener('change', render);
+          }
+
           // Add to the React Component
@@ -126,7 +140,12 @@ _reactDom2.default.findDOMNode(component).replaceChild(renderer.domElement, _reactDom2.default.findDOMNode(component).firstChild);
        */
-      function animate() {
+      var animate = function animate() {
         // note: three.js includes requestAnimationFrame shim
-        requestAnimationFrame(animate);
+        if (_this2.props.rotate) {
+          requestAnimationFrame(animate);
+        }
+        if (_this2.props.orbitControls) {
+          controls.update();
+        }
         render();
-      }
+      };
 
@@ -137,4 +156,4 @@ /**
        */
-      function render() {
-        if (mesh) {
+      var render = function render() {
+        if (mesh && _this2.props.rotate) {
           mesh.rotation.z += 0.02;
@@ -144,3 +163,3 @@ }
         renderer.render(scene, camera);
-      }
+      };
     }
@@ -179,3 +198,5 @@ }, {
   backgroundColor: _react.PropTypes.string,
-  modelColor: _react.PropTypes.string
+  modelColor: _react.PropTypes.string,
+  rotate: _react.PropTypes.bool,
+  orbitControls: _react.PropTypes.bool
 };
@@ -186,3 +207,5 @@ STLViewer.defaultProps = {
   height: 400,
-  width: 400
+  width: 400,
+  rotate: true,
+  orbitControls: true
 };
@@ -189,0 +212,0 @@ ;

package.json

 {
   "name": "stl-viewer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A component for viewing an STL object from a given URL.",
@@ -23,3 +23,4 @@ "main": "dist/STLViewer.js",
     "halogen": "^0.1.10",
-    "three": "^0.72.0"
+    "three": "^0.72.0",
+    "three-orbit-controls": "^72.0.0"
   },
@@ -26,0 +27,0 @@ "peerDependencies": {

react/containers/App.js

 import React, {Component} from 'react';
 import STLViewer from '../../src/STLViewer';
-import qs from 'query-string';
 
 class App extends Component{
 
-  constructor(props){
-    super(props);
-
-    let query = qs.parse(location.search);
-
-    this.state = {
-      url: query.url || 'http://localhost:4001/static/bottle.stl',
-    };
-  }
-
   render(){
-    const { url  } = this.state;
-
     return (
       <div>
-        <STLViewer url={url} />
-        <div><a href="http://localhost:4001">Example A</a></div>
-        <div><a href="http://localhost:4001/?url=http://localhost:4001/static/crazy-thing.stl">Example B</a></div>
+        <STLViewer url="http://localhost:4001/static/crazy-thing.stl" />
+        <STLViewer url="http://localhost:4001/static/bottle.stl" rotate={false} />
       </div>
@@ -26,0 +12,0 @@ );

README.md

@@ -14,6 +14,10 @@ # STL Viewer
 	
-	<STLViewer url='http://www.example.com/example-url.stl'
-    width={150} height={150}
-    modelColor='#005B83'
+	<STLViewer
+    url='http://www.example.com/example-url.stl'
+    width={400}
+    height={400}
+    modelColor='#B92C2C'
     backgroundColor='#EAEAEA'
+    rotate={true}
+    orbitControls={true}
   />

src/STLViewer.js

@@ -5,2 +5,3 @@ import React, { PropTypes, Component } from 'react';
 import Loader from 'halogen/ScaleLoader';
+var OrbitControls = require('three-orbit-controls')(THREE);
 
@@ -15,2 +16,4 @@ class STLViewer extends Component {
     modelColor: PropTypes.string,
+    rotate: PropTypes.bool,
+    orbitControls: PropTypes.bool,
   };
@@ -23,7 +26,9 @@
     width: 400,
+    rotate: true,
+    orbitControls: true,
   };
 
   componentDidMount() {
-    let camera, scene, renderer, mesh, distance;
-    let { url, width, height, modelColor, backgroundColor } = this.props;
+    let camera, scene, renderer, mesh, distance, controls;
+    let { url, width, height, modelColor, backgroundColor, rotate, orbitControls } = this.props;
     let xDims, yDims, zDims;
@@ -70,5 +75,6 @@ let component = this;
         zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
-
-        mesh.rotation.x = 5;
-        mesh.rotation.z = .25;
+        if(rotate) {
+          mesh.rotation.x = 5;
+          mesh.rotation.z = .25;
+        }
         scene.add( mesh );
@@ -86,2 +92,8 @@
 
+        // Add controls for mouse interaction
+        if(orbitControls) {
+          controls = new OrbitControls(camera, ReactDOM.findDOMNode(component));
+          controls.addEventListener( 'change', render );
+        }
+
         // Add to the React Component
@@ -100,7 +112,12 @@ ReactDOM.findDOMNode(component).replaceChild( renderer.domElement,
      */
-    function animate() {
+    let animate = () => {
       // note: three.js includes requestAnimationFrame shim
-      requestAnimationFrame( animate );
+      if(this.props.rotate) {
+        requestAnimationFrame( animate );
+      }
+      if(this.props.orbitControls) {
+        controls.update();
+      }
       render();
-    }
+    };
 
@@ -111,4 +128,4 @@ /**
      */
-    function render() {
-      if (mesh) {
+    let render = () => {
+      if (mesh && this.props.rotate) {
         mesh.rotation.z += 0.02;
@@ -118,3 +135,3 @@ }
       renderer.render( scene, camera );
-    }
+    };
   }
@@ -121,0 +138,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1673066

increased by0.07%

Lines of code

969

increased by2.98%

Number of lines in readme file

23

increased by21.05%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedthree-orbit-controls@^72.0.0

• + Addedthree-orbit-controls@72.0.0(transitive)