'use strict'; var BuoyAnalysisChart3 = { h: 258, w: 498, /** * */ buildCamera: 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 pointLight = new THREE.PointLight('#fff'); pointLight.position.x = 50; pointLight.position.y = 40; pointLight.position.z = 40; return [pointLight]; }, /** * */ draw: function() { var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize( BuoyAnalysisChart3.w, BuoyAnalysisChart3.h ); renderer.setClearColor('#fff'); document.getElementById('chart3').appendChild( renderer.domElement ); var scene = new THREE.Scene(); var mat = new THREE.LineBasicMaterial({ linewidth: 3, color: '#f0f' }); var axisHelper = new THREE.AxisHelper(500); scene.add(axisHelper); BuoyAnalysisChart3.getLighting().forEach(function(light) { scene.add(light); }); var obj = new THREE.Object3D(); BuoyAnalysisMap.reticle.stations.forEach(function(station, index) { if (index > 0) { return; } var h, geo, mat, mesh; // Ribbons. Colorize stations. var width = 40; var height = 300; var width_segments = 1; var height_segments = BuoyAnalysisData.years.end - BuoyAnalysisData.years.start; var geo = new THREE.PlaneGeometry(width, height, width_segments, height_segments); for (var year = BuoyAnalysisData.years.start, i = 0; year <= BuoyAnalysisData.years.end; year++, i++) { h = BuoyAnalysisData.stationJson[station]['a' + year]['wt']['y'] * 10; // if (h === 0) { // continue; // } // geo = new THREE.PlaneGeometry(30, 30, 1); // mat = new THREE.MeshLambertMaterial( {color: 'rgb(100, 100, 0)'} ); // mesh = new THREE.Mesh( geo, mat ); // geo.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0, 0 ) ); // mesh.position.set((year - BuoyAnalysisData.years.start) * 32, index * 32, h); // obj.add(mesh); geo.vertices[2 * i].z = h; geo.vertices[2 * i + 1].z = h; } // for(var i = 0; i < plane.vertices.length / 2; i++) { // plane.vertices[2 * i].z = Math.pow(2, i / 20); // plane.vertices[2 * i + 1].z = Math.pow(2, i / 20); // } var mesh = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({color: 0xccffcc})); mesh.material.side = THREE.DoubleSide; // mesh.doubleSided = true; // mesh.rotation.y = Math.PI/2-0.5; mesh.position.y = index * 100 + height / 2; obj.add(mesh); }); obj.position.set(150, 0, 0); scene.add(obj); var camX = -20; var camY = -300; var camZ = 150; var tgtX = 425; var tgtY = 300; var tgtZ = -20; // var geoCam = new THREE.BoxGeometry(10, 10, 10); // var matCam = new THREE.MeshLambertMaterial( {color: '#f0f'} ); // var boxCam = new THREE.Mesh( geoCam, matCam ); // boxCam.position.set(camX, camY, camZ); // scene.add(boxCam); // var geoTgt = new THREE.BoxGeometry(10, 10, 10); // var matTgt = new THREE.MeshLambertMaterial( {color: '#0ff'} ); // var boxTgt = new THREE.Mesh( geoTgt, matTgt ); // boxTgt.position.set(tgtX, tgtY, tgtZ); // scene.add(boxTgt); var camera = BuoyAnalysisChart3.buildCamera(); camera.up.set( 0, 0, 1 ); camera.position.set(camX, camY, camZ); var controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.target = new THREE.Vector3(tgtX, tgtY, tgtZ); // // Range is 0 to Math.PI radians. // controls.minPolarAngle = 50 * Math.PI / 180; // radians // controls.maxPolarAngle = 90 * Math.PI / 180; // radians // // How far you can orbit horizontally, upper and lower limits. // // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ]. // controls.minAzimuthAngle = -90 * Math.PI / 180; // radians // controls.maxAzimuthAngle = 0 * Math.PI / 180; // radians controls.update(); (function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); controls.update(); })(); } };