canvas ={ // text // SET UP ------------------------------------ const pi = Math.PI const h = 6 const r = 10 const resolution = 100 // number of line segments per curve let background = '36393f' // scene const aspect = 1 const width = Math.min(window.innerWidth,650) const height = width * aspect const scene = new THREE.Scene() // camera const camera = new THREE.PerspectiveCamera(20, width/height, 1, 1000) // field of view, aspect ratio, near, far plane camera.position.set( 15, 55, 55 ) camera.lookAt( 0, 0, 0 ) // renderer const renderer = new THREE.WebGLRenderer({antialias: true}) // most powerful all purpose renderer, with smooth edges renderer.setClearColor('#ffffff') // background color, alt light grey: f6f6f6 renderer.setSize(width, height) // set window size scene.fog = new THREE.Fog( 0xffffff, 60, 115 ); yield renderer.domElement // camera controls const controls = new THREE.OrbitControls(camera, renderer.domElement); // allows mouse to move camera controls.enableZoom = false // disables zoom controls.enablePan = false // disables pan controls.enableRotate = true // determines if camera can rotate // MATERIALS --------------------------------- const matCircle = new THREE.LineBasicMaterial({color: 0x55ffdd, depthWrite:false, transparent: true, opacity:1}) let matLabel = new THREE.SpriteMaterial({depthWrite:false, transparent: true, opacity:1}) // SHAPE ------------------------------------ // extravert and introvert rings let lineList = [] function fC(t, r, z){ return new THREE.Vector3( r*Math.sin(t), z, r*Math.cos(t) ) } for(let i=0; i<2; i++){ const verts = [] for(let j=0; j< resolution+1; j++){ verts.push( fC(2*pi*j/resolution, r, h*(1-2*i) ) ) } const geoCircle = new THREE.BufferGeometry().setFromPoints(verts) const lineCircle = new THREE.Line(geoCircle, matCircle.clone()) lineCircle.material.color.setHex('0x'+lineColor[mutable input[19]][i]) lineList.push(lineCircle) scene.add(lineCircle) } // quadra elipses function fE(t, r, z, angle){ return new THREE.Vector3( r*Math.sin(t), z*Math.cos(t+angle) / Math.cos(pi/4), r*Math.cos(t) ) } for(let i=0; i<4; i++){ const verts = [] for(let j=0; j< resolution+1; j++){ verts.push( fE(2*pi*j/resolution, r, h, (i+.5)*pi/2 ) ) } const geoCircle = new THREE.BufferGeometry().setFromPoints(verts) const lineCircle = new THREE.Line(geoCircle, matCircle.clone()) lineCircle.material.color.setHex('0x'+lineColor[mutable input[19]][2+i]) lineList.push(lineCircle) scene.add(lineCircle) } // compass column for(let i=0; i<8; i++){ const verts = [ new THREE.Vector3(r*Math.cos(pi*(-i+1.5)/4),h*Math.cos(pi/8)/Math.cos(pi/4),r*Math.sin(pi*(-i+1.5)/4)), new THREE.Vector3(r*Math.cos(pi*(-i+1.5)/4),-h*Math.cos(pi/8)/Math.cos(pi/4),r*Math.sin(pi*(-i+1.5)/4)), ] const geoCircle = new THREE.BufferGeometry().setFromPoints(verts) const lineCircle = new THREE.Line(geoCircle, matCircle.clone()) lineCircle.material.color.setHex('0x'+lineColor[mutable input[19]][6+i]) lineList.push(lineCircle) scene.add(lineCircle) } // energy levels for(let i=0; i<4; i++){ const verts = [] for(let j=0; j< resolution+1; j++){ verts.push( fC(2*pi*j/resolution, r, h/Math.cos(pi/4)*Math.cos((i+.5)*pi/4) ) ) } const geoCircle = new THREE.BufferGeometry().setFromPoints(verts) const lineCircle = new THREE.Line(geoCircle, matCircle.clone()) lineCircle.material.color.setHex('0x'+lineColor[mutable input[19]][14+i]) lineList.push(lineCircle) scene.add(lineCircle) } // label positions // information aspect positions let labelPosition = [] for(let i=0; i<2; i++){ for(let j=0; j<4; j++){ labelPosition.push( fC(j*pi/2, r, (1-2*i)*h) ) } } let labelVerts = labelPosition // conjugate aspect positions labelPosition = [] for(let i=0; i<4; i++){ for(let j=0; j<8; j++){ labelPosition.push( fE((j+.5)*pi/4, r, h, (i+.5)*pi/2) ) } } labelVerts = labelVerts.concat(labelPosition) //sprite const rootSprite = new THREE.Group() let bgColor let textColor let labelList = [] let makeLabels = () => { labelList = [] for(let i=0; i<8*5; i++){ const canvas = makeLabel(labels[mutable input[19]][i].text, labels[mutable input[19]][i].text.length*60+60, 30, '#'+labels[mutable input[19]][i].fillColor, '#'+labels[mutable input[19]][i].textColor) const texture = new THREE.CanvasTexture(canvas); texture.minFilter = THREE.LinearFilter; texture.wrapS = THREE.ClampToEdgeWrapping; texture.wrapT = THREE.ClampToEdgeWrapping //const labelMaterial = new THREE.SpriteMaterial({map: texture, transparent: true, opacity:.5}); let labelMaterial = matLabel.clone() labelMaterial.map = texture const labelBaseScale = .03; const label = new THREE.Sprite(labelMaterial); label.position.set( labelVerts[i].x, labelVerts[i].y, labelVerts[i].z ) label.scale.x = canvas.width * labelBaseScale; label.scale.y = canvas.height * labelBaseScale; label.material.opacity = 0 labelList.push(label) scene.add(label) } } ////////////////////////////////////////////////////////////////////////////////////////////// // RENDER LOOP /////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////// var camPos let visible = 0 let inputLast const render = function(){ requestAnimationFrame(render) // adjust scale on resize and stops animation when window is closed to save memory if( inputLast != mutable input){ for( let i=0; i