'use strict'; var BuoyAnalysisChart3 = { h: 258, w: 498, components: {}, scene: null, renderer: null, camera: null, /** * */ getCamera: function() { var viewAngle = 45; var aspectRatio = BuoyAnalysisChart3.w / BuoyAnalysisChart3.h; var near = 1; var far = 10000; return new THREE.PerspectiveCamera(viewAngle, aspectRatio, near, far); }, /** * */ getLighting: function() { var light1 = new THREE.PointLight('#fff'); light1.position.set(220, 150, -450); var light2 = new THREE.PointLight('#fff'); light2.position.set(220, 150, 500); return [light1, light2]; }, /** * http://threejs.org/docs/#Reference/Extras.Geometries/TextGeometry */ drawLabel: function(msg, size, color) { var options = { height: 1, font: 'roboto', size: size }; var geo = new THREE.TextGeometry(msg, options); var mat = new THREE.MeshBasicMaterial({ color: color }); return new THREE.Mesh(geo, mat); }, /** * */ drawAxes: function(len, rgbX, rgbY, rgbZ) { var vertices = new Float32Array([ 0, 0, 0, len, 0, 0, 0, 0, 0, 0, len, 0, 0, 0, 0, 0, 0, len ]); var colorBuffer = [].concat(rgbX, rgbX, rgbY, rgbY, rgbZ, rgbZ); var colors = new Float32Array(colorBuffer); var geo = new THREE.BufferGeometry(); geo.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); geo.addAttribute('color', new THREE.BufferAttribute(colors, 3)); var mat = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }); return new THREE.LineSegments(geo, mat); }, /** * */ init: function() { BuoyAnalysisChart3.renderer = new THREE.WebGLRenderer({ antialias: true }); BuoyAnalysisChart3.renderer.setSize(BuoyAnalysisChart3.w, BuoyAnalysisChart3.h); BuoyAnalysisChart3.renderer.setClearColor('#fff'); document.getElementById('chart3').appendChild(BuoyAnalysisChart3.renderer.domElement); BuoyAnalysisChart3.scene = new THREE.Scene(); BuoyAnalysisChart3.components.axes = BuoyAnalysisChart3.drawAxes(300, [0.8, 0.8, 0.8], [0.8, 0.8, 0.8], [0.8, 0.8, 0.8]); BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.axes); BuoyAnalysisChart3.components.lighting = BuoyAnalysisChart3.getLighting(); BuoyAnalysisChart3.components.lighting.forEach(function(light) { BuoyAnalysisChart3.scene.add(light); }); BuoyAnalysisChart3.components.lbl2015 = BuoyAnalysisChart3.drawLabel('2015', 20, '#ccc'); BuoyAnalysisChart3.components.lbl2015.position.set(-80, 300, 0); BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.lbl2015); BuoyAnalysisChart3.components.lbl2000 = BuoyAnalysisChart3.drawLabel('2000', 20, '#ccc'); BuoyAnalysisChart3.components.lbl2000.position.set(-80, 150, 0); BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.lbl2000); BuoyAnalysisChart3.components.lbl1982 = BuoyAnalysisChart3.drawLabel('1982', 20, '#ccc'); BuoyAnalysisChart3.components.lbl1982.position.set(-80, -30, 0); BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.lbl1982); BuoyAnalysisChart3.camera = BuoyAnalysisChart3.getCamera(); BuoyAnalysisChart3.camera.up.set(0, 0, 1); BuoyAnalysisChart3.camera.position.set(-207, -267, 367); BuoyAnalysisChart3.controls = new THREE.OrbitControls( BuoyAnalysisChart3.camera, BuoyAnalysisChart3.renderer.domElement ); BuoyAnalysisChart3.controls.target = new THREE.Vector3(200, 100, 0); // controls.minPolarAngle = 50 * Math.PI / 180; // radians // controls.maxPolarAngle = 90 * Math.PI / 180; // radians // controls.minAzimuthAngle = -90 * Math.PI / 180; // radians // controls.maxAzimuthAngle = 0 * Math.PI / 180; // radians }, /** * */ draw: function() { var maxZ = 0; var obj = new THREE.Object3D(); BuoyAnalysisMap.reticle.stations.forEach(function(station, index) { var h; var geo = new THREE.PlaneGeometry(40, 300, 1, BuoyAnalysisData.years.end - BuoyAnalysisData.years.start); for (var year = BuoyAnalysisData.years.start, i = 0; year <= BuoyAnalysisData.years.end; year++, i++) { h = BuoyAnalysisData.stationJson[station]['a' + year][BuoyAnalysisData.property]['y'] * 10 || h; geo.vertices[2 * i].z = h; geo.vertices[2 * i + 1].z = h; if (maxZ < h) { maxZ = h; } if (year === BuoyAnalysisData.years.end) { continue; } if (BuoyAnalysisData.stationJson[station]['a' + year]['wt']['y'] === 0) { geo.faces[2 * i].materialIndex = 1; geo.faces[2 * i + 1].materialIndex = 1; } } var color = BuoyAnalysisMap.stationColorScale(Math.round(BuoyAnalysisData.stationJson[station].lat)); var materials = [ new THREE.MeshLambertMaterial({ color: color, side: THREE.DoubleSide }), new THREE.MeshLambertMaterial({ color: "#f00", transparent: true, opacity: 0, side: THREE.DoubleSide }) ]; var mesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial(materials)); mesh.position.x = -1 * index * 100; mesh.position.y = -150; obj.add(mesh); }); var txt = "Max " + Math.round((maxZ / 10) * 9/5 + 32) + " °F (" + (maxZ / 10) + " °C)"; BuoyAnalysisChart3.scene.remove(BuoyAnalysisChart3.components.lblMaxZC); BuoyAnalysisChart3.components.lblMaxZC = BuoyAnalysisChart3.drawLabel(txt, 12, '#000'); BuoyAnalysisChart3.components.lblMaxZC.position.set(0, -10, maxZ); BuoyAnalysisChart3.components.lblMaxZC.rotation.x = Math.PI / 2; BuoyAnalysisChart3.components.lblMaxZC.rotation.y = -Math.PI / 2; BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.lblMaxZC); obj.rotation.z = Math.PI; obj.position.x = 20; BuoyAnalysisChart3.scene.remove(BuoyAnalysisChart3.components.curves); BuoyAnalysisChart3.components.curves = obj; BuoyAnalysisChart3.scene.add(BuoyAnalysisChart3.components.curves); function animate() { requestAnimationFrame(animate); BuoyAnalysisChart3.renderer.render(BuoyAnalysisChart3.scene, BuoyAnalysisChart3.camera); BuoyAnalysisChart3.controls.update(); }; BuoyAnalysisChart3.controls.update(); animate(); } };