31:T449,function createAGrid(opts){ const config = opts || { height: 500, width: 500, linesHeight: 10, linesWidth: 10, color: 0xDD006C }; const material = new THREE.LineBasicMaterial({ color: config.color, opacity: 0.2 }); const stepw = 2* config.width/config.linesWidth; const steph = 2 * config.height/config.linesHeight; const gridGeo = new THREE.Geometry(); const gridObject = new THREE.Object3D(); gridGeo.vertices.push(new THREE.Vector3(config.height,100,0)); gridGeo.vertices.push(new THREE.Vector3(-config.height,100,0)); for(var i=-config.width;i<=config.width;i+=stepw){ gridGeo.vertices.push(new THREE.Vector3(-config.height,i,0)); gridGeo.vertices.push(new THREE.Vector3(config.height,i,0)); } for(var i=-config.height;i<=config.height;i+=steph){ gridGeo.vertices.push(new THREE.Vector3(i,-config.width,0)); gridGeo.vertices.push(new THREE.Vector3(i,config.width,0)); } const line = new THREE.Line(gridGeo,material,THREE.LinePiece); gridObject.add(line); return gridObject; }32:T559,floorGeometry_facecolors_lines = { var result = { faceColors:[], lines:{}, floorGeometry:new THREE.PlaneGeometry(graphDimensions.w,graphDimensions.d,10,2405) } const faceColors = result.faceColors; const lines = result.lines; const floorGeometry = result.floorGeometry; for(var i=0;i EPS // using small-angle approximation cos(x/2) = 1 - x^2 / 8 if ( lastPosition.distanceToSquared( this.object.position ) > EPS || 8 * (1 - lastQuaternion.dot(this.object.quaternion)) > EPS ) { this.dispatchEvent( changeEvent ); lastPosition.copy( this.object.position ); lastQuaternion.copy (this.object.quaternion ); } }; this.reset = function () { state = STATE.NONE; this.target.copy( this.target0 ); this.object.position.copy( this.position0 ); this.object.zoom = this.zoom0; this.object.updateProjectionMatrix(); this.dispatchEvent( changeEvent ); this.update(); }; this.getPolarAngle = function () { return phi; }; this.getAzimuthalAngle = function () { return theta }; function getAutoRotationAngle() { return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; } function getZoomScale() { return Math.pow( 0.95, scope.zoomSpeed ); } function onMouseDown( event ) { if ( scope.enabled === false ) return; event.preventDefault(); if ( event.button === scope.mouseButtons.ORBIT ) { if ( scope.noRotate === true ) return; state = STATE.ROTATE; rotateStart.set( event.clientX, event.clientY ); } else if ( event.button === scope.mouseButtons.ZOOM ) { if ( scope.noZoom === true ) return; state = STATE.DOLLY; dollyStart.set( event.clientX, event.clientY ); } else if ( event.button === scope.mouseButtons.PAN ) { if ( scope.noPan === true ) return; state = STATE.PAN; panStart.set( event.clientX, event.clientY ); } if ( state !== STATE.NONE ) { document.addEventListener( 'mousemove', onMouseMove, false ); document.addEventListener( 'mouseup', onMouseUp, false ); scope.dispatchEvent( startEvent ); } } function onMouseMove( event ) { if ( scope.enabled === false ) return; event.preventDefault(); var element = scope.domElement === document ? scope.domElement.body : scope.domElement; if ( state === STATE.ROTATE ) { if ( scope.noRotate === true ) return; rotateEnd.set( event.clientX, event.clientY ); rotateDelta.subVectors( rotateEnd, rotateStart ); // rotating across whole screen goes 360 degrees around scope.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); // rotating up and down along whole screen attempts to go 360, but limited to 180 scope.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); rotateStart.copy( rotateEnd ); } else if ( state === STATE.DOLLY ) { if ( scope.noZoom === true ) return; dollyEnd.set( event.clientX, event.clientY ); dollyDelta.subVectors( dollyEnd, dollyStart ); if ( dollyDelta.y > 0 ) { scope.dollyIn(); } else if ( dollyDelta.y < 0 ) { scope.dollyOut(); } dollyStart.copy( dollyEnd ); } else if ( state === STATE.PAN ) { if ( scope.noPan === true ) return; panEnd.set( event.clientX, event.clientY ); panDelta.subVectors( panEnd, panStart ); scope.pan( panDelta.x, panDelta.y ); panStart.copy( panEnd ); } if ( state !== STATE.NONE ) scope.update(); } function onMouseUp( /* event */ ) { if ( scope.enabled === false ) return; document.removeEventListener( 'mousemove', onMouseMove, false ); document.removeEventListener( 'mouseup', onMouseUp, false ); scope.dispatchEvent( endEvent ); state = STATE.NONE; } function onMouseWheel( event ) { if ( scope.enabled === false || scope.noZoom === true || state !== STATE.NONE ) return; event.preventDefault(); event.stopPropagation(); var delta = 0; if ( event.wheelDelta !== undefined ) { // WebKit / Opera / Explorer 9 delta = event.wheelDelta; } else if ( event.detail !== undefined ) { // Firefox delta = - event.detail; } if ( delta > 0 ) { scope.dollyOut(); } else if ( delta < 0 ) { scope.dollyIn(); } scope.update(); scope.dispatchEvent( startEvent ); scope.dispatchEvent( endEvent ); } function onKeyDown( event ) { if ( scope.enabled === false || scope.noKeys === true || scope.noPan === true ) return; switch ( event.keyCode ) { case scope.keys.UP: scope.pan( 0, scope.keyPanSpeed ); scope.update(); break; case scope.keys.BOTTOM: scope.pan( 0, - scope.keyPanSpeed ); scope.update(); break; case scope.keys.LEFT: scope.pan( scope.keyPanSpeed, 0 ); scope.update(); break; case scope.keys.RIGHT: scope.pan( - scope.keyPanSpeed, 0 ); scope.update(); break; } } function touchstart( event ) { if ( scope.enabled === false ) return; switch ( event.touches.length ) { case 1: // one-fingered touch: rotate if ( scope.noRotate === true ) return; state = STATE.TOUCH_ROTATE; rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); break; case 2: // two-fingered touch: dolly if ( scope.noZoom === true ) return; state = STATE.TOUCH_DOLLY; var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; var distance = Math.sqrt( dx * dx + dy * dy ); dollyStart.set( 0, distance ); break; case 3: // three-fingered touch: pan if ( scope.noPan === true ) return; state = STATE.TOUCH_PAN; panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); break; default: state = STATE.NONE; } if ( state !== STATE.NONE ) scope.dispatchEvent( startEvent ); } function touchmove( event ) { if ( scope.enabled === false ) return; event.preventDefault(); event.stopPropagation(); var element = scope.domElement === document ? scope.domElement.body : scope.domElement; switch ( event.touches.length ) { case 1: // one-fingered touch: rotate if ( scope.noRotate === true ) return; if ( state !== STATE.TOUCH_ROTATE ) return; rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); rotateDelta.subVectors( rotateEnd, rotateStart ); // rotating across whole screen goes 360 degrees around scope.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); // rotating up and down along whole screen attempts to go 360, but limited to 180 scope.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); rotateStart.copy( rotateEnd ); scope.update(); break; case 2: // two-fingered touch: dolly if ( scope.noZoom === true ) return; if ( state !== STATE.TOUCH_DOLLY ) return; var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; var distance = Math.sqrt( dx * dx + dy * dy ); dollyEnd.set( 0, distance ); dollyDelta.subVectors( dollyEnd, dollyStart ); if ( dollyDelta.y > 0 ) { scope.dollyOut(); } else if ( dollyDelta.y < 0 ) { scope.dollyIn(); } dollyStart.copy( dollyEnd ); scope.update(); break; case 3: // three-fingered touch: pan if ( scope.noPan === true ) return; if ( state !== STATE.TOUCH_PAN ) return; panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); panDelta.subVectors( panEnd, panStart ); scope.pan( panDelta.x, panDelta.y ); panStart.copy( panEnd ); scope.update(); break; default: state = STATE.NONE; } } function touchend( /* event */ ) { if ( scope.enabled === false ) return; scope.dispatchEvent( endEvent ); state = STATE.NONE; } this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false ); this.domElement.addEventListener( 'mousedown', onMouseDown, false ); this.domElement.addEventListener( 'mousewheel', onMouseWheel, false ); this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox this.domElement.addEventListener( 'touchstart', touchstart, false ); this.domElement.addEventListener( 'touchend', touchend, false ); this.domElement.addEventListener( 'touchmove', touchmove, false ); window.addEventListener( 'keydown', onKeyDown, false ); // force an update at start this.update(); }; THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype ); THREE.OrbitControls.prototype.constructor = THREE.OrbitControls; return THREE; }34:Tdc7,/** * @author mrdoob / http://mrdoob.com/ */ Stats = { const Stats = function () { var startTime = Date.now(), prevTime = startTime; var ms = 0, msMin = Infinity, msMax = 0; var fps = 0, fpsMin = Infinity, fpsMax = 0; var frames = 0, mode = 0; var container = document.createElement( 'div' ); container.id = 'stats'; container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false ); container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer'; var fpsDiv = document.createElement( 'div' ); fpsDiv.id = 'fps'; fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002'; container.appendChild( fpsDiv ); var fpsText = document.createElement( 'div' ); fpsText.id = 'fpsText'; fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; fpsText.innerHTML = 'FPS'; fpsDiv.appendChild( fpsText ); var fpsGraph = document.createElement( 'div' ); fpsGraph.id = 'fpsGraph'; fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff'; fpsDiv.appendChild( fpsGraph ); while ( fpsGraph.children.length < 74 ) { var bar = document.createElement( 'span' ); bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113'; fpsGraph.appendChild( bar ); } var msDiv = document.createElement( 'div' ); msDiv.id = 'ms'; msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none'; container.appendChild( msDiv ); var msText = document.createElement( 'div' ); msText.id = 'msText'; msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; msText.innerHTML = 'MS'; msDiv.appendChild( msText ); var msGraph = document.createElement( 'div' ); msGraph.id = 'msGraph'; msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0'; msDiv.appendChild( msGraph ); while ( msGraph.children.length < 74 ) { var bar = document.createElement( 'span' ); bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131'; msGraph.appendChild( bar ); } var setMode = function ( value ) { mode = value; switch ( mode ) { case 0: fpsDiv.style.display = 'block'; msDiv.style.display = 'none'; break; case 1: fpsDiv.style.display = 'none'; msDiv.style.display = 'block'; break; } }; var updateGraph = function ( dom, value ) { var child = dom.appendChild( dom.firstChild ); child.style.height = value + 'px'; }; return { REVISION: 12, domElement: container, setMode: setMode, begin: function () { startTime = Date.now(); }, end: function () { var time = Date.now(); ms = time - startTime; msMin = Math.min( msMin, ms ); msMax = Math.max( msMax, ms ); msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')'; updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) ); frames ++; if ( time > prevTime + 1000 ) { fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) ); fpsMin = Math.min( fpsMin, fps ); fpsMax = Math.max( fpsMax, fps ); fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')'; updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) ); prevTime = time; frames = 0; } return time; }, update: function () { startTime = this.end(); } } }; return Stats; }35:[] 2f:{"title":"3d Area chart - three.js","cells":[{"id":0,"value":"md`# 3d Area chart - three.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`Ported from [bocoup.com](https://bocoup.com/blog/learning-three-js-with-real-world-challenges-that-have-already-been-solved)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`# scene\n
\n
\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"stats.domElement","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"area = {\n render();\n yield glRenderer.domElement\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`# Config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"windowWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"windowHeight = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`## THREE Global Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"graphDimensions = Object.assign({\n w:1000,\n d:2405,\n h:800\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`## Init`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"vFOVRadians = 2 * Math.atan(windowWidth/2*1500) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"fov=40","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"startPosition = new THREE.Vector3(0,0,3000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"camera ={\n const cam = new THREE.PerspectiveCamera(fov,windowWidth/windowHeight,1,30000);\n cam.position.set(startPosition.x,startPosition.y,startPosition.z);\n return cam;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"controls = {\n const con = new THREE.OrbitControls(camera,glRenderer.domElement);\n con.damping = 0.2;\n con.addEventListener('change',render);\n return con;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"light = {\n const lght = new THREE.DirectionalLight( 0xffffff) ;\n lght.position.set( 0, 0, 1 );\n return lght;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"canvas = {\n const cnvts = document.createElement('canvas') ;\n cnvts.width = 128;\n cnvts.height = 128;\n return cnvts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"context = canvas.getContext('2d')","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`Grid Init ...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"boundingGrid = {\n const bg = new THREE.Object3D()\n bg.add(newGridXY);\n bg.add(newGridYZ);\n bg.add(newGridXZ);\n return bg;\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"glScene = {\n const scene = new THREE.Scene();\n scene.add(light);\n scene.add(boundingGrid)\n for(const line in lines){\n if(line =='-500'){\n const graphLine = new THREE.Line(lines[line],blacklineMat) \n }else{\n var graphLine = new THREE.Line(lines[line],lineMat)\n }\n graphLine.rotation.x = - Math.PI/2;\n graphLine.position.y = -graphDimensions.h/2;\n graphLine.rotation.z = Math.PI/2;\n scene.add(graphLine);\n }\n scene.add(floor);\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"depth = graphDimensions.w/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"widthDim = graphDimensions.d/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"height = graphDimensions.h/2","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"a =data.labels.y.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"b =data.labels.x.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"c =data.labels.z.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"newGridXY = {\n const grid = createAGrid({\n height:widthDim,\n width:height,\n linesHeight:b,\n linesWidth:a,\n //color:0xcccccc\n color:'blue'\n });\n grid.position.z = -depth;\n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"newGridYZ = {\n const grid = createAGrid({\n height:widthDim,\n width:depth,\n linesHeight:b,\n linesWidth:c,\n color:'red'\n });\n grid.rotation.x = Math.PI/2;\n grid.position.y = -height;\n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"newGridXZ = {\n const grid = createAGrid({\n height:depth,\n width:height,\n linesHeight:c,\n linesWidth:a,\n color:'green'\n });\n grid.position.x =widthDim;\n grid.rotation.y = Math.PI/2;\n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"glRenderer = { \n const glr = new THREE.WebGLRenderer();\n glr.setPixelRatio(window.devicePixelRatio);\n glr.setClearColor(0xf0f0f0);\n glr.setSize(windowWidth,windowHeight);\n return glr;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"window.devicePixelRatio","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"stats = {\n const st = new Stats();\n st.domElement.style.position = 'absolute';\n st.domElement.style.bottom = '10px';\n st.domElement.style.left= '10px';\n return st;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"function animate(){\n requestAnimationFrame(animate) ;\n controls.update()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"render = function(){\n camera.lookAt(glScene.position);\n glRenderer.render(glScene,camera);\n stats.update();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"data = Object.assign({\n labels: {\n \ty: [\"2%\", \"4%\", \"6%\", \"8%\"],\n x: ['', \"\\'14\",\"\\'13\",\"\\'12\",\"\\'11\",\"\\'10\",\"\\'09\",\"\\'08\",\"\\'07\",\"\\'06\",\"\\'05\"],\n z: [\"1-month\",\"3-month\",\"6-month\",\"1-year\",\"2-year\",\"3-year\",\"5-year\",\"7-year\",\"10-year\", \"20-year\",\"30-year\"]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"realData = {\nreturn fetch('https://raw.githubusercontent.com/deathbearbrown/learning-three-js-blogpost/master/js/2005-2015.json')\n .then(d=> d.json())\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`## Grid Stuff`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"function labelAxis(width,data,direction){\n const separator = 2 * width/data.length;\n const p = {\n \n x:0,y:0,z:0 \n }\n const dobj = new THREE.Object3D();\n for( let i=0;i