three-render-objects - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/three-render-objects.common.js

@@ -6,2 +6,3 @@ 'use strict';
 var three = require('three');
+var tinycolor = _interopDefault(require('tinycolor2'));
 var ThreeTrackballControls = _interopDefault(require('three-trackballcontrols'));
@@ -50,3 +51,4 @@ var accessorFn = _interopDefault(require('accessor-fn'));
   Raycaster: three.Raycaster,
-  Vector2: three.Vector2
+  Vector2: three.Vector2,
+  Color: three.Color
 };
@@ -58,2 +60,11 @@
     height: { default: window.innerHeight },
+    backgroundColor: {
+      default: '#000000',
+      onChange: function onChange(bckgColor, state) {
+        var alpha = tinycolor(bckgColor).getAlpha();
+        state.renderer.setClearColor(new three$1.Color(bckgColor), alpha);
+      },
+
+      triggerUpdate: false
+    },
     showNavInfo: { default: true },
@@ -92,15 +103,6 @@ objects: { default: [], onChange: function onChange(objs, state) {
           raycaster.setFromCamera(state.mousePos, state.camera);
-          var intersects = raycaster.intersectObjects(state.objects, true).map(function (_ref) {
-            var object = _ref.object;
+          var intersects = raycaster.intersectObjects(state.objects, true);
 
-            var obj = object;
-            // recurse up object chain until finding the top-level object (directly attached to scene)
-            while (obj && obj.parent && obj.parent.type !== 'Scene') {
-              obj = obj.parent;
-            }
-            return obj;
-          });
+          var topObject = intersects.length ? intersects[0].object : null;
 
-          var topObject = intersects.length ? intersects[0] : null;
-
           if (topObject !== state.hoverObj) {
@@ -128,3 +130,3 @@ state.onHover(topObject, state.hoverObj);
   stateInit: {
-    renderer: new three$1.WebGLRenderer(),
+    renderer: new three$1.WebGLRenderer({ alpha: true }),
     scene: new three$1.Scene(),
@@ -189,3 +191,2 @@ camera: new three$1.PerspectiveCamera()
     // Setup renderer, camera and controls
-    state.renderer.setSize(state.width, state.height);
     state.container.appendChild(state.renderer.domElement);
@@ -196,2 +197,3 @@ state.tbControls = new ThreeTrackballControls(state.camera, state.renderer.domElement);
 
+    state.renderer.setSize(state.width, state.height);
     state.camera.position.z = 1000;
@@ -198,0 +200,0 @@ state.camera.far = 50000;

dist/three-render-objects.min.js

@@ -1,2 +0,5 @@
-// Version 0.1.2 three-render-objects - https://github.com/vasturiano/three-render-objects
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("three")):"function"==typeof define&&define.amd?define(["three"],t):e.ThreeRenderObjects=t(e.THREE)}(this,function(e){"use strict";var t="default"in e?e.default:e;!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".scene-nav-info {\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n}\n\n.scene-tooltip {\n  color: lavender;\n  font-size: 18px;\n  transform: translate(-50%, 25px);\n}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: Sans-serif;\n}");var n,q=window.THREE||t,o=n=function(e,t){var r=this,a={NONE:-1,ROTATE:0,ZOOM:1,PAN:2,TOUCH_ROTATE:3,TOUCH_ZOOM_PAN:4};this.object=e,this.domElement=void 0!==t?t:document,this.enabled=!0,this.screen={left:0,top:0,width:0,height:0},this.rotateSpeed=1,this.zoomSpeed=1.2,this.panSpeed=.3,this.noRotate=!1,this.noZoom=!1,this.noPan=!1,this.staticMoving=!1,this.dynamicDampingFactor=.2,this.minDistance=0,this.maxDistance=1/0,this.keys=[65,83,68],this.target=new q.Vector3;var n=new q.Vector3,c=a.NONE,o=a.NONE,i=new q.Vector3,s=new q.Vector2,u=new q.Vector2,p=new q.Vector3,d=0,l=new q.Vector2,h=new q.Vector2,f=0,m=0,v=new q.Vector2,g=new q.Vector2;this.target0=this.target.clone(),this.position0=this.object.position.clone(),this.up0=this.object.up.clone();var y={type:"change"},w={type:"start"},E={type:"end"};this.handleResize=function(){if(this.domElement===document)this.screen.left=0,this.screen.top=0,this.screen.width=window.innerWidth,this.screen.height=window.innerHeight;else{var e=this.domElement.getBoundingClientRect(),t=this.domElement.ownerDocument.documentElement;this.screen.left=e.left+window.pageXOffset-t.clientLeft,this.screen.top=e.top+window.pageYOffset-t.clientTop,this.screen.width=e.width,this.screen.height=e.height}},this.handleEvent=function(e){"function"==typeof this[e.type]&&this[e.type](e)};var b,O,x,j,T,C,L,P,V,A,N,D,R=(b=new q.Vector2,function(e,t){return b.set((e-r.screen.left)/r.screen.width,(t-r.screen.top)/r.screen.height),b}),k=(O=new q.Vector2,function(e,t){return O.set((e-.5*r.screen.width-r.screen.left)/(.5*r.screen.width),(r.screen.height+2*(r.screen.top-t))/r.screen.width),O});function M(e,t){return Array.isArray(e)?-1!==e.indexOf(t):e===t}function S(e){!1!==r.enabled&&(window.removeEventListener("keydown",S),(o=c)===a.NONE&&(M(r.keys[a.ROTATE],e.keyCode)&&!r.noRotate?c=a.ROTATE:M(r.keys[a.ZOOM],e.keyCode)&&!r.noZoom?c=a.ZOOM:M(r.keys[a.PAN],e.keyCode)&&!r.noPan&&(c=a.PAN)))}function Y(e){!1!==r.enabled&&(c=o,window.addEventListener("keydown",S,!1))}function _(e){!1!==r.enabled&&(e.preventDefault(),e.stopPropagation(),c===a.NONE&&(c=e.button),c!==a.ROTATE||r.noRotate?c!==a.ZOOM||r.noZoom?c!==a.PAN||r.noPan||(v.copy(R(e.pageX,e.pageY)),g.copy(v)):(l.copy(R(e.pageX,e.pageY)),h.copy(l)):(u.copy(k(e.pageX,e.pageY)),s.copy(u)),document.addEventListener("mousemove",X,!1),document.addEventListener("mouseup",H,!1),r.dispatchEvent(w))}function X(e){!1!==r.enabled&&(e.preventDefault(),e.stopPropagation(),c!==a.ROTATE||r.noRotate?c!==a.ZOOM||r.noZoom?c!==a.PAN||r.noPan||g.copy(R(e.pageX,e.pageY)):h.copy(R(e.pageX,e.pageY)):(s.copy(u),u.copy(k(e.pageX,e.pageY))))}function H(e){!1!==r.enabled&&(e.preventDefault(),e.stopPropagation(),c=a.NONE,document.removeEventListener("mousemove",X),document.removeEventListener("mouseup",H),r.dispatchEvent(E))}function z(e){if(!1!==r.enabled){switch(e.preventDefault(),e.stopPropagation(),e.deltaMode){case 2:l.y-=.025*e.deltaY;break;case 1:l.y-=.01*e.deltaY;break;default:l.y-=25e-5*e.deltaY}r.dispatchEvent(w),r.dispatchEvent(E)}}function U(e){if(!1!==r.enabled){switch(e.touches.length){case 1:c=a.TOUCH_ROTATE,u.copy(k(e.touches[0].pageX,e.touches[0].pageY)),s.copy(u);break;default:c=a.TOUCH_ZOOM_PAN;var t=e.touches[0].pageX-e.touches[1].pageX,n=e.touches[0].pageY-e.touches[1].pageY;m=f=Math.sqrt(t*t+n*n);var o=(e.touches[0].pageX+e.touches[1].pageX)/2,i=(e.touches[0].pageY+e.touches[1].pageY)/2;v.copy(R(o,i)),g.copy(v)}r.dispatchEvent(w)}}function I(e){if(!1!==r.enabled)switch(e.preventDefault(),e.stopPropagation(),e.touches.length){case 1:s.copy(u),u.copy(k(e.touches[0].pageX,e.touches[0].pageY));break;default:var t=e.touches[0].pageX-e.touches[1].pageX,n=e.touches[0].pageY-e.touches[1].pageY;m=Math.sqrt(t*t+n*n);var o=(e.touches[0].pageX+e.touches[1].pageX)/2,i=(e.touches[0].pageY+e.touches[1].pageY)/2;g.copy(R(o,i))}}function Z(e){if(!1!==r.enabled){switch(e.touches.length){case 0:c=a.NONE;break;case 1:c=a.TOUCH_ROTATE,u.copy(k(e.touches[0].pageX,e.touches[0].pageY)),s.copy(u)}r.dispatchEvent(E)}}function F(e){!1!==r.enabled&&e.preventDefault()}this.rotateCamera=(j=new q.Vector3,T=new q.Quaternion,C=new q.Vector3,L=new q.Vector3,P=new q.Vector3,V=new q.Vector3,function(){V.set(u.x-s.x,u.y-s.y,0),(x=V.length())?(i.copy(r.object.position).sub(r.target),C.copy(i).normalize(),L.copy(r.object.up).normalize(),P.crossVectors(L,C).normalize(),L.setLength(u.y-s.y),P.setLength(u.x-s.x),V.copy(L.add(P)),j.crossVectors(V,i).normalize(),x*=r.rotateSpeed,T.setFromAxisAngle(j,x),i.applyQuaternion(T),r.object.up.applyQuaternion(T),p.copy(j),d=x):!r.staticMoving&&d&&(d*=Math.sqrt(1-r.dynamicDampingFactor),i.copy(r.object.position).sub(r.target),T.setFromAxisAngle(p,d),i.applyQuaternion(T),r.object.up.applyQuaternion(T)),s.copy(u)}),this.zoomCamera=function(){var e;c===a.TOUCH_ZOOM_PAN?(e=f/m,f=m,i.multiplyScalar(e)):(1!==(e=1+(h.y-l.y)*r.zoomSpeed)&&0<e&&i.multiplyScalar(e),r.staticMoving?l.copy(h):l.y+=(h.y-l.y)*this.dynamicDampingFactor)},this.panCamera=(A=new q.Vector2,N=new q.Vector3,D=new q.Vector3,function(){A.copy(g).sub(v),A.lengthSq()&&(A.multiplyScalar(i.length()*r.panSpeed),D.copy(i).cross(r.object.up).setLength(A.x),D.add(N.copy(r.object.up).setLength(A.y)),r.object.position.add(D),r.target.add(D),r.staticMoving?v.copy(g):v.add(A.subVectors(g,v).multiplyScalar(r.dynamicDampingFactor)))}),this.checkDistances=function(){r.noZoom&&r.noPan||(i.lengthSq()>r.maxDistance*r.maxDistance&&(r.object.position.addVectors(r.target,i.setLength(r.maxDistance)),l.copy(h)),i.lengthSq()<r.minDistance*r.minDistance&&(r.object.position.addVectors(r.target,i.setLength(r.minDistance)),l.copy(h)))},this.update=function(){i.subVectors(r.object.position,r.target),r.noRotate||r.rotateCamera(),r.noZoom||r.zoomCamera(),r.noPan||r.panCamera(),r.object.position.addVectors(r.target,i),r.checkDistances(),r.object.lookAt(r.target),1e-6<n.distanceToSquared(r.object.position)&&(r.dispatchEvent(y),n.copy(r.object.position))},this.reset=function(){c=a.NONE,o=a.NONE,r.target.copy(r.target0),r.object.position.copy(r.position0),r.object.up.copy(r.up0),i.subVectors(r.object.position,r.target),r.object.lookAt(r.target),r.dispatchEvent(y),n.copy(r.object.position)},this.dispose=function(){this.domElement.removeEventListener("contextmenu",F,!1),this.domElement.removeEventListener("mousedown",_,!1),this.domElement.removeEventListener("wheel",z,!1),this.domElement.removeEventListener("touchstart",U,!1),this.domElement.removeEventListener("touchend",Z,!1),this.domElement.removeEventListener("touchmove",I,!1),document.removeEventListener("mousemove",X,!1),document.removeEventListener("mouseup",H,!1),window.removeEventListener("keydown",S,!1),window.removeEventListener("keyup",Y,!1)},this.domElement.addEventListener("contextmenu",F,!1),this.domElement.addEventListener("mousedown",_,!1),this.domElement.addEventListener("wheel",z,!1),this.domElement.addEventListener("touchstart",U,!1),this.domElement.addEventListener("touchend",Z,!1),this.domElement.addEventListener("touchmove",I,!1),window.addEventListener("keydown",S,!1),window.addEventListener("keyup",Y,!1),this.handleResize(),this.update()};n.prototype=Object.create(q.EventDispatcher.prototype);"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function i(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function r(e,t){return e(t={exports:{}},t.exports),t.exports}var a=r(function(e,t){e.exports=function(n){function o(e){if(i[e])return i[e].exports;var t=i[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}var i={};return o.m=n,o.c=i,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,n){var o,i,r;i=[e,t],void 0!==(r="function"==typeof(o=function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(t){return t instanceof Function?t:"string"==typeof t?function(e){return e[t]}:function(e){return t}},e.exports=t.default})?o.apply(t,i):o)&&(e.exports=r)}])}),c=i(a),s=(a.accessorFn,r(function(e,t){"undefined"!=typeof self&&self,e.exports=function(n){var o={};function i(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,i),t.l=!0,t.exports}return i.m=n,i.c=o,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=0)}([function(e,t,n){var o,i,r,a;a=function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.stateInit,o=void 0===t?function(){return{}}:t,n=e.props,i=void 0===n?{}:n,r=e.methods,c=void 0===r?{}:r,a=e.aliases,s=void 0===a?{}:a,u=e.init,p=void 0===u?function(){}:u,d=e.update,l=void 0===d?function(){}:d,h=Object.keys(i).map(function(e){return new v(e,i[e])});return function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},r=Object.assign({},o instanceof Function?o():o,{initialised:!1});function a(e){return n(e,t),i(),a}var n=function(e,t){p.call(a,e,r,t),r.initialised=!0},i=(0,f.default)(function(){r.initialised&&l.call(a,r)},1);return h.forEach(function(e){a[e.name]=function(t){var n=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:function(e,t){};return function(e){return arguments.length?(r[t]=e,o.call(a,e,r),n&&i(),a):r[t]}}(e.name,e.triggerUpdate,e.onChange)}),Object.keys(c).forEach(function(i){a[i]=function(){for(var e,t=arguments.length,n=Array(t),o=0;o<t;o++)n[o]=arguments[o];return(e=c[i]).call.apply(e,[a,r].concat(n))}}),Object.entries(s).forEach(function(e){var t=m(e,2),n=t[0],o=t[1];return a[n]=a[o]}),a.resetProps=function(){return h.forEach(function(e){a[e.name](e.defaultVal)}),a},a.resetProps(),r._rerender=i,a}};var o,f=(o=n)&&o.__esModule?o:{default:o},m=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var n=[],o=!0,i=!1,r=void 0;try{for(var a,c=e[Symbol.iterator]();!(o=(a=c.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(e){i=!0,r=e}finally{try{!o&&c.return&&c.return()}finally{if(i)throw r}}return n}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},v=function e(t,n){var o=n.default,i=void 0===o?null:o,r=n.triggerUpdate,a=void 0===r||r,c=n.onChange,s=void 0===c?function(e,t){}:c;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.name=t,this.defaultVal=i,this.triggerUpdate=a,this.onChange=s};e.exports=t.default},i=[e,t,n(1)],void 0===(r="function"==typeof(o=a)?o.apply(t,i):o)||(e.exports=r)},function(e,t){e.exports=function(t,n,o){var i,r,a,c,s;function u(){var e=Date.now()-c;e<n&&0<=e?i=setTimeout(u,n-e):(i=null,o||(s=t.apply(a,r),a=r=null))}null==n&&(n=100);var e=function(){a=this,r=arguments,c=Date.now();var e=o&&!i;return i||(i=setTimeout(u,n)),e&&(s=t.apply(a,r),a=r=null),s};return e.clear=function(){i&&(clearTimeout(i),i=null)},e.flush=function(){i&&(s=t.apply(a,r),a=r=null,clearTimeout(i),i=null)},e}}])})),u=i(s),p=(s.Kapsule,window.THREE?window.THREE:{WebGLRenderer:e.WebGLRenderer,Scene:e.Scene,PerspectiveCamera:e.PerspectiveCamera,AmbientLight:e.AmbientLight,Raycaster:e.Raycaster,Vector2:e.Vector2});return u({props:{width:{default:window.innerWidth},height:{default:window.innerHeight},showNavInfo:{default:!0},objects:{default:[],onChange:function(e,t){(t.prevObjs||[]).forEach(function(e){return t.scene.remove(e)}),(t.prevObjs=e).forEach(function(e){return t.scene.add(e)})},triggerUpdate:!1},enablePointerInteraction:{default:!0,onChange:function(e,t){t.hoverObj=null},triggerUpdate:!1},lineHoverPrecision:{default:1,triggerUpdate:!1},tooltipContent:{triggerUpdate:!1},onHover:{default:function(){},triggerUpdate:!1},onClick:{default:function(){},triggerUpdate:!1}},methods:{tick:function(e){if(e.initialised&&(e.tbControls.update(),e.renderer.render(e.scene,e.camera),e.enablePointerInteraction)){var t=new p.Raycaster;t.linePrecision=e.lineHoverPrecision,t.setFromCamera(e.mousePos,e.camera);var n=t.intersectObjects(e.objects,!0).map(function(e){for(var t=e.object;t&&t.parent&&"Scene"!==t.parent.type;)t=t.parent;return t}),o=n.length?n[0]:null;o!==e.hoverObj&&(e.onHover(o,e.hoverObj),e.toolTipElem.innerHTML=o&&c(e.tooltipContent)(o)||"",e.hoverObj=o)}return this},renderer:function(e){return e.renderer},scene:function(e){return e.scene},camera:function(e){return e.camera}},stateInit:{renderer:new p.WebGLRenderer,scene:new p.Scene,camera:new p.PerspectiveCamera},init:function(e,s){e.innerHTML="",e.appendChild(s.container=document.createElement("div")),s.container.style.position="relative",s.container.appendChild(s.navInfo=document.createElement("div")),s.navInfo.className="scene-nav-info",s.navInfo.textContent="MOVE mouse & press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan",s.toolTipElem=document.createElement("div"),s.toolTipElem.classList.add("scene-tooltip"),s.container.appendChild(s.toolTipElem),s.mousePos=new p.Vector2,s.mousePos.x=-2,s.mousePos.y=-2,s.container.addEventListener("mousemove",function(e){if(s.enablePointerInteraction){var t=(i=s.container,r=i.getBoundingClientRect(),a=window.pageXOffset||document.documentElement.scrollLeft,c=window.pageYOffset||document.documentElement.scrollTop,{top:r.top+c,left:r.left+a}),n=e.pageX-t.left,o=e.pageY-t.top;s.mousePos.x=n/s.width*2-1,s.mousePos.y=-o/s.height*2+1,s.toolTipElem.style.top=o+"px",s.toolTipElem.style.left=n+"px"}var i,r,a,c},!1),s.container.addEventListener("click",function(e){s.hoverObj&&s.onClick(s.hoverObj)},!1),s.renderer.setSize(s.width,s.height),s.container.appendChild(s.renderer.domElement),s.tbControls=new o(s.camera,s.renderer.domElement),s.tbControls.minDistance=.1,s.tbControls.maxDistance=5e4,s.camera.position.z=1e3,s.camera.far=5e4,window.scene=s.scene},update:function(e){e.width&&e.height&&(e.container.style.width=e.width,e.container.style.height=e.height,e.renderer.setSize(e.width,e.height),e.camera.aspect=e.width/e.height,e.camera.updateProjectionMatrix()),e.navInfo.style.display=e.showNavInfo?null:"none"}})});
+// Version 0.1.3 three-render-objects - https://github.com/vasturiano/three-render-objects
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("three")):"function"==typeof define&&define.amd?define(["three"],t):e.ThreeRenderObjects=t(e.THREE)}(this,function(e){"use strict";var t="default"in e?e.default:e;!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".scene-nav-info {\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n}\n\n.scene-tooltip {\n  color: lavender;\n  font-size: 18px;\n  transform: translate(-50%, 25px);\n}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: Sans-serif;\n}");"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function r(e,t){return e(t={exports:{}},t.exports),t.exports}var o,i=r(function(Y){!function(f){var h=/^\s+/,d=/\s+$/,r=0,a=f.round,p=f.min,g=f.max,e=f.random;function l(e,t){if(t=t||{},(e=e||"")instanceof l)return e;if(!(this instanceof l))return new l(e,t);var n=function(e){var t={r:0,g:0,b:0},n=1,r=null,o=null,i=null,a=!1,s=!1;"string"==typeof e&&(e=function(e){e=e.replace(h,"").replace(d,"").toLowerCase();var t,n=!1;if(O[e])e=O[e],n=!0;else if("transparent"==e)return{r:0,g:0,b:0,a:0,format:"name"};if(t=D.rgb.exec(e))return{r:t[1],g:t[2],b:t[3]};if(t=D.rgba.exec(e))return{r:t[1],g:t[2],b:t[3],a:t[4]};if(t=D.hsl.exec(e))return{h:t[1],s:t[2],l:t[3]};if(t=D.hsla.exec(e))return{h:t[1],s:t[2],l:t[3],a:t[4]};if(t=D.hsv.exec(e))return{h:t[1],s:t[2],v:t[3]};if(t=D.hsva.exec(e))return{h:t[1],s:t[2],v:t[3],a:t[4]};if(t=D.hex8.exec(e))return{r:T(t[1]),g:T(t[2]),b:T(t[3]),a:N(t[4]),format:n?"name":"hex8"};if(t=D.hex6.exec(e))return{r:T(t[1]),g:T(t[2]),b:T(t[3]),format:n?"name":"hex"};if(t=D.hex4.exec(e))return{r:T(t[1]+""+t[1]),g:T(t[2]+""+t[2]),b:T(t[3]+""+t[3]),a:N(t[4]+""+t[4]),format:n?"name":"hex8"};if(t=D.hex3.exec(e))return{r:T(t[1]+""+t[1]),g:T(t[2]+""+t[2]),b:T(t[3]+""+t[3]),format:n?"name":"hex"};return!1}(e));"object"==typeof e&&(z(e.r)&&z(e.g)&&z(e.b)?(c=e.r,u=e.g,l=e.b,t={r:255*j(c,255),g:255*j(u,255),b:255*j(l,255)},a=!0,s="%"===String(e.r).substr(-1)?"prgb":"rgb"):z(e.h)&&z(e.s)&&z(e.v)?(r=P(e.s),o=P(e.v),t=function(e,t,n){e=6*j(e,360),t=j(t,100),n=j(n,100);var r=f.floor(e),o=e-r,i=n*(1-t),a=n*(1-o*t),s=n*(1-(1-o)*t),c=r%6;return{r:255*[n,a,i,i,s,n][c],g:255*[s,n,n,a,i,i][c],b:255*[i,i,s,n,n,a][c]}}(e.h,r,o),a=!0,s="hsv"):z(e.h)&&z(e.s)&&z(e.l)&&(r=P(e.s),i=P(e.l),t=function(e,t,n){var r,o,i;function a(e,t,n){return n<0&&(n+=1),1<n&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}if(e=j(e,360),t=j(t,100),n=j(n,100),0===t)r=o=i=n;else{var s=n<.5?n*(1+t):n+t-n*t,c=2*n-s;r=a(c,s,e+1/3),o=a(c,s,e),i=a(c,s,e-1/3)}return{r:255*r,g:255*o,b:255*i}}(e.h,r,i),a=!0,s="hsl"),e.hasOwnProperty("a")&&(n=e.a));var c,u,l;return n=S(n),{ok:a,format:e.format||s,r:p(255,g(t.r,0)),g:p(255,g(t.g,0)),b:p(255,g(t.b,0)),a:n}}(e);this._originalInput=e,this._r=n.r,this._g=n.g,this._b=n.b,this._a=n.a,this._roundA=a(100*this._a)/100,this._format=t.format||n.format,this._gradientType=t.gradientType,this._r<1&&(this._r=a(this._r)),this._g<1&&(this._g=a(this._g)),this._b<1&&(this._b=a(this._b)),this._ok=n.ok,this._tc_id=r++}function o(e,t,n){e=j(e,255),t=j(t,255),n=j(n,255);var r,o,i=g(e,t,n),a=p(e,t,n),s=(i+a)/2;if(i==a)r=o=0;else{var c=i-a;switch(o=.5<s?c/(2-i-a):c/(i+a),i){case e:r=(t-n)/c+(t<n?6:0);break;case t:r=(n-e)/c+2;break;case n:r=(e-t)/c+4}r/=6}return{h:r,s:o,l:s}}function i(e,t,n){e=j(e,255),t=j(t,255),n=j(n,255);var r,o,i=g(e,t,n),a=p(e,t,n),s=i,c=i-a;if(o=0===i?0:c/i,i==a)r=0;else{switch(i){case e:r=(t-n)/c+(t<n?6:0);break;case t:r=(n-e)/c+2;break;case n:r=(e-t)/c+4}r/=6}return{h:r,s:o,v:s}}function t(e,t,n,r){var o=[L(a(e).toString(16)),L(a(t).toString(16)),L(a(n).toString(16))];return r&&o[0].charAt(0)==o[0].charAt(1)&&o[1].charAt(0)==o[1].charAt(1)&&o[2].charAt(0)==o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function s(e,t,n,r){return[L(H(r)),L(a(e).toString(16)),L(a(t).toString(16)),L(a(n).toString(16))].join("")}function n(e,t){t=0===t?0:t||10;var n=l(e).toHsl();return n.s-=t/100,n.s=R(n.s),l(n)}function c(e,t){t=0===t?0:t||10;var n=l(e).toHsl();return n.s+=t/100,n.s=R(n.s),l(n)}function u(e){return l(e).desaturate(100)}function m(e,t){t=0===t?0:t||10;var n=l(e).toHsl();return n.l+=t/100,n.l=R(n.l),l(n)}function b(e,t){t=0===t?0:t||10;var n=l(e).toRgb();return n.r=g(0,p(255,n.r-a(-t/100*255))),n.g=g(0,p(255,n.g-a(-t/100*255))),n.b=g(0,p(255,n.b-a(-t/100*255))),l(n)}function v(e,t){t=0===t?0:t||10;var n=l(e).toHsl();return n.l-=t/100,n.l=R(n.l),l(n)}function y(e,t){var n=l(e).toHsl(),r=(n.h+t)%360;return n.h=r<0?360+r:r,l(n)}function w(e){var t=l(e).toHsl();return t.h=(t.h+180)%360,l(t)}function _(e){var t=l(e).toHsl(),n=t.h;return[l(e),l({h:(n+120)%360,s:t.s,l:t.l}),l({h:(n+240)%360,s:t.s,l:t.l})]}function x(e){var t=l(e).toHsl(),n=t.h;return[l(e),l({h:(n+90)%360,s:t.s,l:t.l}),l({h:(n+180)%360,s:t.s,l:t.l}),l({h:(n+270)%360,s:t.s,l:t.l})]}function E(e){var t=l(e).toHsl(),n=t.h;return[l(e),l({h:(n+72)%360,s:t.s,l:t.l}),l({h:(n+216)%360,s:t.s,l:t.l})]}function A(e,t,n){t=t||6,n=n||30;var r=l(e).toHsl(),o=360/n,i=[l(e)];for(r.h=(r.h-(o*t>>1)+720)%360;--t;)r.h=(r.h+o)%360,i.push(l(r));return i}function k(e,t){t=t||6;for(var n=l(e).toHsv(),r=n.h,o=n.s,i=n.v,a=[],s=1/t;t--;)a.push(l({h:r,s:o,v:i})),i=(i+s)%1;return a}l.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},getLuminance:function(){var e,t,n,r=this.toRgb();return e=r.r/255,t=r.g/255,n=r.b/255,.2126*(e<=.03928?e/12.92:f.pow((e+.055)/1.055,2.4))+.7152*(t<=.03928?t/12.92:f.pow((t+.055)/1.055,2.4))+.0722*(n<=.03928?n/12.92:f.pow((n+.055)/1.055,2.4))},setAlpha:function(e){return this._a=S(e),this._roundA=a(100*this._a)/100,this},toHsv:function(){var e=i(this._r,this._g,this._b);return{h:360*e.h,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=i(this._r,this._g,this._b),t=a(360*e.h),n=a(100*e.s),r=a(100*e.v);return 1==this._a?"hsv("+t+", "+n+"%, "+r+"%)":"hsva("+t+", "+n+"%, "+r+"%, "+this._roundA+")"},toHsl:function(){var e=o(this._r,this._g,this._b);return{h:360*e.h,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=o(this._r,this._g,this._b),t=a(360*e.h),n=a(100*e.s),r=a(100*e.l);return 1==this._a?"hsl("+t+", "+n+"%, "+r+"%)":"hsla("+t+", "+n+"%, "+r+"%, "+this._roundA+")"},toHex:function(e){return t(this._r,this._g,this._b,e)},toHexString:function(e){return"#"+this.toHex(e)},toHex8:function(e){return function(e,t,n,r,o){var i=[L(a(e).toString(16)),L(a(t).toString(16)),L(a(n).toString(16)),L(H(r))];if(o&&i[0].charAt(0)==i[0].charAt(1)&&i[1].charAt(0)==i[1].charAt(1)&&i[2].charAt(0)==i[2].charAt(1)&&i[3].charAt(0)==i[3].charAt(1))return i[0].charAt(0)+i[1].charAt(0)+i[2].charAt(0)+i[3].charAt(0);return i.join("")}(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return"#"+this.toHex8(e)},toRgb:function(){return{r:a(this._r),g:a(this._g),b:a(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+a(this._r)+", "+a(this._g)+", "+a(this._b)+")":"rgba("+a(this._r)+", "+a(this._g)+", "+a(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:a(100*j(this._r,255))+"%",g:a(100*j(this._g,255))+"%",b:a(100*j(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+a(100*j(this._r,255))+"%, "+a(100*j(this._g,255))+"%, "+a(100*j(this._b,255))+"%)":"rgba("+a(100*j(this._r,255))+"%, "+a(100*j(this._g,255))+"%, "+a(100*j(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&(C[t(this._r,this._g,this._b,!0)]||!1)},toFilter:function(e){var t="#"+s(this._r,this._g,this._b,this._a),n=t,r=this._gradientType?"GradientType = 1, ":"";if(e){var o=l(e);n="#"+s(o._r,o._g,o._b,o._a)}return"progid:DXImageTransform.Microsoft.gradient("+r+"startColorstr="+t+",endColorstr="+n+")"},toString:function(e){var t=!!e;e=e||this._format;var n=!1,r=this._a<1&&0<=this._a;return t||!r||"hex"!==e&&"hex6"!==e&&"hex3"!==e&&"hex4"!==e&&"hex8"!==e&&"name"!==e?("rgb"===e&&(n=this.toRgbString()),"prgb"===e&&(n=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(n=this.toHexString()),"hex3"===e&&(n=this.toHexString(!0)),"hex4"===e&&(n=this.toHex8String(!0)),"hex8"===e&&(n=this.toHex8String()),"name"===e&&(n=this.toName()),"hsl"===e&&(n=this.toHslString()),"hsv"===e&&(n=this.toHsvString()),n||this.toHexString()):"name"===e&&0===this._a?this.toName():this.toRgbString()},clone:function(){return l(this.toString())},_applyModification:function(e,t){var n=e.apply(null,[this].concat([].slice.call(t)));return this._r=n._r,this._g=n._g,this._b=n._b,this.setAlpha(n._a),this},lighten:function(){return this._applyModification(m,arguments)},brighten:function(){return this._applyModification(b,arguments)},darken:function(){return this._applyModification(v,arguments)},desaturate:function(){return this._applyModification(n,arguments)},saturate:function(){return this._applyModification(c,arguments)},greyscale:function(){return this._applyModification(u,arguments)},spin:function(){return this._applyModification(y,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(A,arguments)},complement:function(){return this._applyCombination(w,arguments)},monochromatic:function(){return this._applyCombination(k,arguments)},splitcomplement:function(){return this._applyCombination(E,arguments)},triad:function(){return this._applyCombination(_,arguments)},tetrad:function(){return this._applyCombination(x,arguments)}},l.fromRatio=function(e,t){if("object"==typeof e){var n={};for(var r in e)e.hasOwnProperty(r)&&(n[r]="a"===r?e[r]:P(e[r]));e=n}return l(e,t)},l.equals=function(e,t){return!(!e||!t)&&l(e).toRgbString()==l(t).toRgbString()},l.random=function(){return l.fromRatio({r:e(),g:e(),b:e()})},l.mix=function(e,t,n){n=0===n?0:n||50;var r=l(e).toRgb(),o=l(t).toRgb(),i=n/100;return l({r:(o.r-r.r)*i+r.r,g:(o.g-r.g)*i+r.g,b:(o.b-r.b)*i+r.b,a:(o.a-r.a)*i+r.a})},
+// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
+// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
+l.readability=function(e,t){var n=l(e),r=l(t);return(f.max(n.getLuminance(),r.getLuminance())+.05)/(f.min(n.getLuminance(),r.getLuminance())+.05)},l.isReadable=function(e,t,n){var r,o,i=l.readability(e,t);switch(o=!1,(r=function(e){var t,n;t=((e=e||{level:"AA",size:"small"}).level||"AA").toUpperCase(),n=(e.size||"small").toLowerCase(),"AA"!==t&&"AAA"!==t&&(t="AA");"small"!==n&&"large"!==n&&(n="small");return{level:t,size:n}}(n)).level+r.size){case"AAsmall":case"AAAlarge":o=4.5<=i;break;case"AAlarge":o=3<=i;break;case"AAAsmall":o=7<=i}return o},l.mostReadable=function(e,t,n){var r,o,i,a,s=null,c=0;o=(n=n||{}).includeFallbackColors,i=n.level,a=n.size;for(var u=0;u<t.length;u++)c<(r=l.readability(e,t[u]))&&(c=r,s=l(t[u]));return l.isReadable(e,s,{level:i,size:a})||!o?s:(n.includeFallbackColors=!1,l.mostReadable(e,["#fff","#000"],n))};var O=l.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"},C=l.hexNames=function(e){var t={};for(var n in e)e.hasOwnProperty(n)&&(t[e[n]]=n);return t}(O);function S(e){return e=parseFloat(e),(isNaN(e)||e<0||1<e)&&(e=1),e}function j(e,t){var n;"string"==typeof(n=e)&&-1!=n.indexOf(".")&&1===parseFloat(n)&&(e="100%");var r,o="string"==typeof(r=e)&&-1!=r.indexOf("%");return e=p(t,g(0,parseFloat(e))),o&&(e=parseInt(e*t,10)/100),f.abs(e-t)<1e-6?1:e%t/parseFloat(t)}function R(e){return p(1,g(0,e))}function T(e){return parseInt(e,16)}function L(e){return 1==e.length?"0"+e:""+e}function P(e){return e<=1&&(e=100*e+"%"),e}function H(e){return f.round(255*parseFloat(e)).toString(16)}function N(e){return T(e)/255}var M,V,F,D=(V="[\\s|\\(]+("+(M="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)")+")[,|\\s]+("+M+")[,|\\s]+("+M+")\\s*\\)?",F="[\\s|\\(]+("+M+")[,|\\s]+("+M+")[,|\\s]+("+M+")[,|\\s]+("+M+")\\s*\\)?",{CSS_UNIT:new RegExp(M),rgb:new RegExp("rgb"+V),rgba:new RegExp("rgba"+F),hsl:new RegExp("hsl"+V),hsla:new RegExp("hsla"+F),hsv:new RegExp("hsv"+V),hsva:new RegExp("hsva"+F),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/});function z(e){return!!D.CSS_UNIT.exec(e)}Y.exports?Y.exports=l:window.tinycolor=l}(Math)}),Z=window.THREE||t,a=o=function(e,t){var i=this,a={NONE:-1,ROTATE:0,ZOOM:1,PAN:2,TOUCH_ROTATE:3,TOUCH_ZOOM_PAN:4};this.object=e,this.domElement=void 0!==t?t:document,this.enabled=!0,this.screen={left:0,top:0,width:0,height:0},this.rotateSpeed=1,this.zoomSpeed=1.2,this.panSpeed=.3,this.noRotate=!1,this.noZoom=!1,this.noPan=!1,this.staticMoving=!1,this.dynamicDampingFactor=.2,this.minDistance=0,this.maxDistance=1/0,this.keys=[65,83,68],this.target=new Z.Vector3;var n=new Z.Vector3,s=a.NONE,r=a.NONE,o=new Z.Vector3,c=new Z.Vector2,u=new Z.Vector2,l=new Z.Vector3,f=0,h=new Z.Vector2,d=new Z.Vector2,p=0,g=0,m=new Z.Vector2,b=new Z.Vector2;this.target0=this.target.clone(),this.position0=this.object.position.clone(),this.up0=this.object.up.clone();var v={type:"change"},y={type:"start"},w={type:"end"};this.handleResize=function(){if(this.domElement===document)this.screen.left=0,this.screen.top=0,this.screen.width=window.innerWidth,this.screen.height=window.innerHeight;else{var e=this.domElement.getBoundingClientRect(),t=this.domElement.ownerDocument.documentElement;this.screen.left=e.left+window.pageXOffset-t.clientLeft,this.screen.top=e.top+window.pageYOffset-t.clientTop,this.screen.width=e.width,this.screen.height=e.height}},this.handleEvent=function(e){"function"==typeof this[e.type]&&this[e.type](e)};var _,x,E,A,k,O,C,S,j,R,T,L,P=(_=new Z.Vector2,function(e,t){return _.set((e-i.screen.left)/i.screen.width,(t-i.screen.top)/i.screen.height),_}),H=(x=new Z.Vector2,function(e,t){return x.set((e-.5*i.screen.width-i.screen.left)/(.5*i.screen.width),(i.screen.height+2*(i.screen.top-t))/i.screen.width),x});function N(e,t){return Array.isArray(e)?-1!==e.indexOf(t):e===t}function M(e){!1!==i.enabled&&(window.removeEventListener("keydown",M),(r=s)===a.NONE&&(N(i.keys[a.ROTATE],e.keyCode)&&!i.noRotate?s=a.ROTATE:N(i.keys[a.ZOOM],e.keyCode)&&!i.noZoom?s=a.ZOOM:N(i.keys[a.PAN],e.keyCode)&&!i.noPan&&(s=a.PAN)))}function V(e){!1!==i.enabled&&(s=r,window.addEventListener("keydown",M,!1))}function F(e){!1!==i.enabled&&(e.preventDefault(),e.stopPropagation(),s===a.NONE&&(s=e.button),s!==a.ROTATE||i.noRotate?s!==a.ZOOM||i.noZoom?s!==a.PAN||i.noPan||(m.copy(P(e.pageX,e.pageY)),b.copy(m)):(h.copy(P(e.pageX,e.pageY)),d.copy(h)):(u.copy(H(e.pageX,e.pageY)),c.copy(u)),document.addEventListener("mousemove",D,!1),document.addEventListener("mouseup",z,!1),i.dispatchEvent(y))}function D(e){!1!==i.enabled&&(e.preventDefault(),e.stopPropagation(),s!==a.ROTATE||i.noRotate?s!==a.ZOOM||i.noZoom?s!==a.PAN||i.noPan||b.copy(P(e.pageX,e.pageY)):d.copy(P(e.pageX,e.pageY)):(c.copy(u),u.copy(H(e.pageX,e.pageY))))}function z(e){!1!==i.enabled&&(e.preventDefault(),e.stopPropagation(),s=a.NONE,document.removeEventListener("mousemove",D),document.removeEventListener("mouseup",z),i.dispatchEvent(w))}function Y(e){if(!1!==i.enabled){switch(e.preventDefault(),e.stopPropagation(),e.deltaMode){case 2:h.y-=.025*e.deltaY;break;case 1:h.y-=.01*e.deltaY;break;default:h.y-=25e-5*e.deltaY}i.dispatchEvent(y),i.dispatchEvent(w)}}function I(e){if(!1!==i.enabled){switch(e.touches.length){case 1:s=a.TOUCH_ROTATE,u.copy(H(e.touches[0].pageX,e.touches[0].pageY)),c.copy(u);break;default:s=a.TOUCH_ZOOM_PAN;var t=e.touches[0].pageX-e.touches[1].pageX,n=e.touches[0].pageY-e.touches[1].pageY;g=p=Math.sqrt(t*t+n*n);var r=(e.touches[0].pageX+e.touches[1].pageX)/2,o=(e.touches[0].pageY+e.touches[1].pageY)/2;m.copy(P(r,o)),b.copy(m)}i.dispatchEvent(y)}}function X(e){if(!1!==i.enabled)switch(e.preventDefault(),e.stopPropagation(),e.touches.length){case 1:c.copy(u),u.copy(H(e.touches[0].pageX,e.touches[0].pageY));break;default:var t=e.touches[0].pageX-e.touches[1].pageX,n=e.touches[0].pageY-e.touches[1].pageY;g=Math.sqrt(t*t+n*n);var r=(e.touches[0].pageX+e.touches[1].pageX)/2,o=(e.touches[0].pageY+e.touches[1].pageY)/2;b.copy(P(r,o))}}function U(e){if(!1!==i.enabled){switch(e.touches.length){case 0:s=a.NONE;break;case 1:s=a.TOUCH_ROTATE,u.copy(H(e.touches[0].pageX,e.touches[0].pageY)),c.copy(u)}i.dispatchEvent(w)}}function q(e){!1!==i.enabled&&e.preventDefault()}this.rotateCamera=(A=new Z.Vector3,k=new Z.Quaternion,O=new Z.Vector3,C=new Z.Vector3,S=new Z.Vector3,j=new Z.Vector3,function(){j.set(u.x-c.x,u.y-c.y,0),(E=j.length())?(o.copy(i.object.position).sub(i.target),O.copy(o).normalize(),C.copy(i.object.up).normalize(),S.crossVectors(C,O).normalize(),C.setLength(u.y-c.y),S.setLength(u.x-c.x),j.copy(C.add(S)),A.crossVectors(j,o).normalize(),E*=i.rotateSpeed,k.setFromAxisAngle(A,E),o.applyQuaternion(k),i.object.up.applyQuaternion(k),l.copy(A),f=E):!i.staticMoving&&f&&(f*=Math.sqrt(1-i.dynamicDampingFactor),o.copy(i.object.position).sub(i.target),k.setFromAxisAngle(l,f),o.applyQuaternion(k),i.object.up.applyQuaternion(k)),c.copy(u)}),this.zoomCamera=function(){var e;s===a.TOUCH_ZOOM_PAN?(e=p/g,p=g,o.multiplyScalar(e)):(1!==(e=1+(d.y-h.y)*i.zoomSpeed)&&0<e&&o.multiplyScalar(e),i.staticMoving?h.copy(d):h.y+=(d.y-h.y)*this.dynamicDampingFactor)},this.panCamera=(R=new Z.Vector2,T=new Z.Vector3,L=new Z.Vector3,function(){R.copy(b).sub(m),R.lengthSq()&&(R.multiplyScalar(o.length()*i.panSpeed),L.copy(o).cross(i.object.up).setLength(R.x),L.add(T.copy(i.object.up).setLength(R.y)),i.object.position.add(L),i.target.add(L),i.staticMoving?m.copy(b):m.add(R.subVectors(b,m).multiplyScalar(i.dynamicDampingFactor)))}),this.checkDistances=function(){i.noZoom&&i.noPan||(o.lengthSq()>i.maxDistance*i.maxDistance&&(i.object.position.addVectors(i.target,o.setLength(i.maxDistance)),h.copy(d)),o.lengthSq()<i.minDistance*i.minDistance&&(i.object.position.addVectors(i.target,o.setLength(i.minDistance)),h.copy(d)))},this.update=function(){o.subVectors(i.object.position,i.target),i.noRotate||i.rotateCamera(),i.noZoom||i.zoomCamera(),i.noPan||i.panCamera(),i.object.position.addVectors(i.target,o),i.checkDistances(),i.object.lookAt(i.target),1e-6<n.distanceToSquared(i.object.position)&&(i.dispatchEvent(v),n.copy(i.object.position))},this.reset=function(){s=a.NONE,r=a.NONE,i.target.copy(i.target0),i.object.position.copy(i.position0),i.object.up.copy(i.up0),o.subVectors(i.object.position,i.target),i.object.lookAt(i.target),i.dispatchEvent(v),n.copy(i.object.position)},this.dispose=function(){this.domElement.removeEventListener("contextmenu",q,!1),this.domElement.removeEventListener("mousedown",F,!1),this.domElement.removeEventListener("wheel",Y,!1),this.domElement.removeEventListener("touchstart",I,!1),this.domElement.removeEventListener("touchend",U,!1),this.domElement.removeEventListener("touchmove",X,!1),document.removeEventListener("mousemove",D,!1),document.removeEventListener("mouseup",z,!1),window.removeEventListener("keydown",M,!1),window.removeEventListener("keyup",V,!1)},this.domElement.addEventListener("contextmenu",q,!1),this.domElement.addEventListener("mousedown",F,!1),this.domElement.addEventListener("wheel",Y,!1),this.domElement.addEventListener("touchstart",I,!1),this.domElement.addEventListener("touchend",U,!1),this.domElement.addEventListener("touchmove",X,!1),window.addEventListener("keydown",M,!1),window.addEventListener("keyup",V,!1),this.handleResize(),this.update()};o.prototype=Object.create(Z.EventDispatcher.prototype);var s=r(function(e,t){e.exports=function(n){function r(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}var o={};return r.m=n,r.c=o,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,n){var r,o,i;o=[e,t],void 0!==(i="function"==typeof(r=function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(t){return t instanceof Function?t:"string"==typeof t?function(e){return e[t]}:function(e){return t}},e.exports=t.default})?r.apply(t,o):r)&&(e.exports=i)}])}),c=n(s),u=(s.accessorFn,r(function(e,t){"undefined"!=typeof self&&self,e.exports=function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,n){var r,o,i,a;a=function(e,t,n){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.stateInit,r=void 0===t?function(){return{}}:t,n=e.props,o=void 0===n?{}:n,i=e.methods,s=void 0===i?{}:i,a=e.aliases,c=void 0===a?{}:a,u=e.init,l=void 0===u?function(){}:u,f=e.update,h=void 0===f?function(){}:f,d=Object.keys(o).map(function(e){return new m(e,o[e])});return function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},i=Object.assign({},r instanceof Function?r():r,{initialised:!1});function a(e){return n(e,t),o(),a}var n=function(e,t){l.call(a,e,i,t),i.initialised=!0},o=(0,p.default)(function(){i.initialised&&h.call(a,i)},1);return d.forEach(function(e){a[e.name]=function(t){var n=1<arguments.length&&void 0!==arguments[1]&&arguments[1],r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:function(e,t){};return function(e){return arguments.length?(i[t]=e,r.call(a,e,i),n&&o(),a):i[t]}}(e.name,e.triggerUpdate,e.onChange)}),Object.keys(s).forEach(function(o){a[o]=function(){for(var e,t=arguments.length,n=Array(t),r=0;r<t;r++)n[r]=arguments[r];return(e=s[o]).call.apply(e,[a,i].concat(n))}}),Object.entries(c).forEach(function(e){var t=g(e,2),n=t[0],r=t[1];return a[n]=a[r]}),a.resetProps=function(){return d.forEach(function(e){a[e.name](e.defaultVal)}),a},a.resetProps(),i._rerender=o,a}};var r,p=(r=n)&&r.__esModule?r:{default:r},g=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{!r&&s.return&&s.return()}finally{if(o)throw i}}return n}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},m=function e(t,n){var r=n.default,o=void 0===r?null:r,i=n.triggerUpdate,a=void 0===i||i,s=n.onChange,c=void 0===s?function(e,t){}:s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.name=t,this.defaultVal=o,this.triggerUpdate=a,this.onChange=c};e.exports=t.default},o=[e,t,n(1)],void 0===(i="function"==typeof(r=a)?r.apply(t,o):r)||(e.exports=i)},function(e,t){e.exports=function(t,n,r){var o,i,a,s,c;function u(){var e=Date.now()-s;e<n&&0<=e?o=setTimeout(u,n-e):(o=null,r||(c=t.apply(a,i),a=i=null))}null==n&&(n=100);var e=function(){a=this,i=arguments,s=Date.now();var e=r&&!o;return o||(o=setTimeout(u,n)),e&&(c=t.apply(a,i),a=i=null),c};return e.clear=function(){o&&(clearTimeout(o),o=null)},e.flush=function(){o&&(c=t.apply(a,i),a=i=null,clearTimeout(o),o=null)},e}}])})),l=n(u),f=(u.Kapsule,window.THREE?window.THREE:{WebGLRenderer:e.WebGLRenderer,Scene:e.Scene,PerspectiveCamera:e.PerspectiveCamera,AmbientLight:e.AmbientLight,Raycaster:e.Raycaster,Vector2:e.Vector2,Color:e.Color});return l({props:{width:{default:window.innerWidth},height:{default:window.innerHeight},backgroundColor:{default:"#000000",onChange:function(e,t){var n=i(e).getAlpha();t.renderer.setClearColor(new f.Color(e),n)},triggerUpdate:!1},showNavInfo:{default:!0},objects:{default:[],onChange:function(e,t){(t.prevObjs||[]).forEach(function(e){return t.scene.remove(e)}),(t.prevObjs=e).forEach(function(e){return t.scene.add(e)})},triggerUpdate:!1},enablePointerInteraction:{default:!0,onChange:function(e,t){t.hoverObj=null},triggerUpdate:!1},lineHoverPrecision:{default:1,triggerUpdate:!1},tooltipContent:{triggerUpdate:!1},onHover:{default:function(){},triggerUpdate:!1},onClick:{default:function(){},triggerUpdate:!1}},methods:{tick:function(e){if(e.initialised&&(e.tbControls.update(),e.renderer.render(e.scene,e.camera),e.enablePointerInteraction)){var t=new f.Raycaster;t.linePrecision=e.lineHoverPrecision,t.setFromCamera(e.mousePos,e.camera);var n=t.intersectObjects(e.objects,!0),r=n.length?n[0].object:null;r!==e.hoverObj&&(e.onHover(r,e.hoverObj),e.toolTipElem.innerHTML=r&&c(e.tooltipContent)(r)||"",e.hoverObj=r)}return this},renderer:function(e){return e.renderer},scene:function(e){return e.scene},camera:function(e){return e.camera}},stateInit:{renderer:new f.WebGLRenderer({alpha:!0}),scene:new f.Scene,camera:new f.PerspectiveCamera},init:function(e,c){e.innerHTML="",e.appendChild(c.container=document.createElement("div")),c.container.style.position="relative",c.container.appendChild(c.navInfo=document.createElement("div")),c.navInfo.className="scene-nav-info",c.navInfo.textContent="MOVE mouse & press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan",c.toolTipElem=document.createElement("div"),c.toolTipElem.classList.add("scene-tooltip"),c.container.appendChild(c.toolTipElem),c.mousePos=new f.Vector2,c.mousePos.x=-2,c.mousePos.y=-2,c.container.addEventListener("mousemove",function(e){if(c.enablePointerInteraction){var t=(o=c.container,i=o.getBoundingClientRect(),a=window.pageXOffset||document.documentElement.scrollLeft,s=window.pageYOffset||document.documentElement.scrollTop,{top:i.top+s,left:i.left+a}),n=e.pageX-t.left,r=e.pageY-t.top;c.mousePos.x=n/c.width*2-1,c.mousePos.y=-r/c.height*2+1,c.toolTipElem.style.top=r+"px",c.toolTipElem.style.left=n+"px"}var o,i,a,s},!1),c.container.addEventListener("click",function(e){c.hoverObj&&c.onClick(c.hoverObj)},!1),c.container.appendChild(c.renderer.domElement),c.tbControls=new a(c.camera,c.renderer.domElement),c.tbControls.minDistance=.1,c.tbControls.maxDistance=5e4,c.renderer.setSize(c.width,c.height),c.camera.position.z=1e3,c.camera.far=5e4,window.scene=c.scene},update:function(e){e.width&&e.height&&(e.container.style.width=e.width,e.container.style.height=e.height,e.renderer.setSize(e.width,e.height),e.camera.aspect=e.width/e.height,e.camera.updateProjectionMatrix()),e.navInfo.style.display=e.showNavInfo?null:"none"}})});

dist/three-render-objects.module.js

@@ -1,2 +0,3 @@
-import { WebGLRenderer, Scene, PerspectiveCamera, AmbientLight, Raycaster, Vector2 } from 'three';
+import { WebGLRenderer, Scene, PerspectiveCamera, AmbientLight, Raycaster, Vector2, Color } from 'three';
+import tinycolor from 'tinycolor2';
 import ThreeTrackballControls from 'three-trackballcontrols';
@@ -45,3 +46,4 @@ import accessorFn from 'accessor-fn';
   Raycaster: Raycaster,
-  Vector2: Vector2
+  Vector2: Vector2,
+  Color: Color
 };
@@ -53,2 +55,11 @@
     height: { default: window.innerHeight },
+    backgroundColor: {
+      default: '#000000',
+      onChange: function onChange(bckgColor, state) {
+        var alpha = tinycolor(bckgColor).getAlpha();
+        state.renderer.setClearColor(new three.Color(bckgColor), alpha);
+      },
+
+      triggerUpdate: false
+    },
     showNavInfo: { default: true },
@@ -87,15 +98,6 @@ objects: { default: [], onChange: function onChange(objs, state) {
           raycaster.setFromCamera(state.mousePos, state.camera);
-          var intersects = raycaster.intersectObjects(state.objects, true).map(function (_ref) {
-            var object = _ref.object;
+          var intersects = raycaster.intersectObjects(state.objects, true);
 
-            var obj = object;
-            // recurse up object chain until finding the top-level object (directly attached to scene)
-            while (obj && obj.parent && obj.parent.type !== 'Scene') {
-              obj = obj.parent;
-            }
-            return obj;
-          });
+          var topObject = intersects.length ? intersects[0].object : null;
 
-          var topObject = intersects.length ? intersects[0] : null;
-
           if (topObject !== state.hoverObj) {
@@ -123,3 +125,3 @@ state.onHover(topObject, state.hoverObj);
   stateInit: {
-    renderer: new three.WebGLRenderer(),
+    renderer: new three.WebGLRenderer({ alpha: true }),
     scene: new three.Scene(),
@@ -184,3 +186,2 @@ camera: new three.PerspectiveCamera()
     // Setup renderer, camera and controls
-    state.renderer.setSize(state.width, state.height);
     state.container.appendChild(state.renderer.domElement);
@@ -191,2 +192,3 @@ state.tbControls = new ThreeTrackballControls(state.camera, state.renderer.domElement);
 
+    state.renderer.setSize(state.width, state.height);
     state.camera.position.z = 1000;
@@ -193,0 +195,0 @@ state.camera.far = 50000;

package.json

 {
   "name": "three-render-objects",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Easy way to render ThreeJS objects with built-in interaction defaults",
@@ -38,3 +38,4 @@ "unpkg": "dist/three-render-objects.min.js",
     "kapsule": "^1.9.0",
-    "three-trackballcontrols": "^0.0.7"
+    "three-trackballcontrols": "^0.0.7",
+    "tinycolor2": "^1.4.1"
   },
@@ -41,0 +42,0 @@ "peerDependencies": {

src/three-render-objects.js

@@ -7,3 +7,4 @@ import {
   Raycaster,
-  Vector2
+  Vector2,
+  Color
 } from 'three';
@@ -19,5 +20,8 @@
   Raycaster,
-  Vector2
+  Vector2,
+  Color
 };
 
+import tinycolor from 'tinycolor2';
+
 import ThreeTrackballControls from 'three-trackballcontrols';
@@ -32,2 +36,10 @@
     height: { default: window.innerHeight },
+    backgroundColor: {
+      default: '#000000',
+      onChange(bckgColor, state) {
+        const alpha = tinycolor(bckgColor).getAlpha();
+        state.renderer.setClearColor(new three.Color(bckgColor), alpha);
+      },
+      triggerUpdate: false
+    },
     showNavInfo: { default: true },
@@ -58,11 +70,5 @@ objects: { default: [], onChange(objs, state) {
           raycaster.setFromCamera(state.mousePos, state.camera);
-          const intersects = raycaster.intersectObjects(state.objects, true)
-            .map(({ object }) => {
-              let obj = object;
-              // recurse up object chain until finding the top-level object (directly attached to scene)
-              while(obj && obj.parent && obj.parent.type !== 'Scene') { obj = obj.parent; }
-              return obj;
-            });
+          const intersects = raycaster.intersectObjects(state.objects, true);
 
-          const topObject = intersects.length ? intersects[0] : null;
+          const topObject = intersects.length ? intersects[0].object : null;
 
@@ -85,3 +91,3 @@ if (topObject !== state.hoverObj) {
   stateInit: {
-    renderer: new three.WebGLRenderer(),
+    renderer: new three.WebGLRenderer({ alpha: true }),
     scene: new three.Scene(),
@@ -146,3 +152,2 @@ camera: new three.PerspectiveCamera()
     // Setup renderer, camera and controls
-    state.renderer.setSize(state.width, state.height);
     state.container.appendChild(state.renderer.domElement);
@@ -153,2 +158,3 @@ state.tbControls = new ThreeTrackballControls(state.camera, state.renderer.domElement);
 
+    state.renderer.setSize(state.width, state.height);
     state.camera.position.z = 1000;
@@ -155,0 +161,0 @@ state.camera.far = 50000;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

390655

increased by51.18%

Lines of code

2287

increased by93.65%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedtinycolor2@^1.4.1

• + Addedtinycolor2@1.6.0(transitive)