ben-burlingham
10 years ago
parent
1a30ee84b7
commit
3a1d505d8b
14 changed files with 2285 additions and 55 deletions
@ -0,0 +1,156 @@ |
||||
'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(); |
||||
})(); |
||||
} |
||||
}; |
||||
@ -0,0 +1,8 @@ |
||||
#chart3 { |
||||
border:1px solid #f00; |
||||
height:260px; |
||||
left:20px; |
||||
position:absolute; |
||||
top:640px; |
||||
width:500px; |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue