Databases
StackOverflow2013
Postsdbo
POLabel using javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLabel using javascript
    primarykey
    data
    text
    <p>I am using a WebGL project to plot line across the globe. It is using three.js, the plotting is happening properly what I cannot figure out is how to label the points where the plot is starting from and ending to. If possible could some one help me with this? I would be really grateful if someone could help. The codes goes as below:</p> <pre><code>&lt;script&gt; var planetTilt = latlngDeg2rad(23.5); console.log(planetTilt); var planetRadius = 6378; var rotationSpeed = 0; var cloudsScale = 1.02; var height = window.innerHeight; var width = window.innerWidth; var camera, controls, scene, renderer, geometry, meshPlanet, meshClouds; var clock = new THREE.Clock(); var cameraZoomFactor = 6; var displayHelp = false; var curZoom = 100; var markerGeom; var markerMaterial; var stats; function onWindowResize(event) { width = window.innerWidth; height = window.innerHeight; renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); controls.screen.width = width; controls.screen.height = height; camera.radius = (width + height) / 4; } function init() { if (!Detector.webgl) Detector.addGetWebGLMessage(); scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({ clearAlpha: 1, clearColor: 0x000000, antialias: true }); renderer.setSize(width, height); renderer.sortObjects = true; renderer.autoClear = false; renderer.gammaInput = true; renderer.gammaOutput = true; renderer.domElement.style.position = 'absolute'; var container = document.getElementById('container'); container.appendChild(renderer.domElement); camera = new THREE.PerspectiveCamera(25, width / height, 50, 1e7); camera.position.z = planetRadius * cameraZoomFactor; scene.add(camera); controls = new THREE.TrackballControls(camera, renderer.domElement); controls.rotateSpeed = 0.3; controls.noZoom = true; controls.noPan = true; controls.staticMoving = false; controls.dynamicDampingFactor = 0.4; stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.bottom = '0px'; stats.domElement.style.right = '0px'; document.body.appendChild( stats.domElement ); var dirLight = new THREE.DirectionalLight(0xFFFFFF); dirLight.position.set(1, 0, 1) .normalize(); scene.add(dirLight); var camLight = new THREE.DirectionalLight(0xffffff); camera.add(camLight); var ambientLight = new THREE.AmbientLight(0x999999); scene.add(ambientLight); var planet = new cpPlanet({ planet_radius: planetRadius, planet_tilt_rad: planetTilt, planet_cloud_texture: "common/textures/cloud.png", planet_surface_texture: "common/textures/earth_surface.jpg", planet_normals_texture: "common/textures/earth_normals.jpg", planet_specular_texture: "common/textures/earth_specular.jpg", planet_geom_segments: 64, planet_geom_rings: 64, use_surface_shader: true, create_combined_mesh: false }); meshPlanet = planet.surface_mesh; scene.add(meshPlanet); meshClouds = planet.cloud_mesh; scene.add(meshClouds); // markers and tracks var marker_radius = 32; var marker_color = 0xff0000; markerGeom = new THREE.SphereGeometry(marker_radius, 5, 5); markerMaterial = new THREE.MeshPhongMaterial({ ambient: 0x030303, color: marker_color, specular: 0x990000, shininess: 80, shading: THREE.SmoothShading }); // need to update a bunch of stuff when window size changes window.addEventListener('resize', onWindowResize, false); } function animate() { requestAnimationFrame(animate); var delta = clock.getDelta(); meshPlanet.rotation.y += rotationSpeed * rotationSpeed * delta; meshClouds.rotation.y += rotationSpeed * 1.25 * rotationSpeed * delta; controls.update(); TWEEN.update(); stats.update(); renderer.clear(); renderer.render(scene, camera); } function addData(locs) { var index = Math.floor(Math.random() * locs.length) - 1; var start_lat = locs[index].lat; var start_lng = locs[index].lng; var data_size = 1; var start = Math.floor(Math.random() * locs.length) - 1; if (start + data_size &gt; locs.length) { start = locs.length - data_size - 1; } var hue = Math.random(); var i; for (i = start; i &lt; start + data_size; i++) { var obj = locs[i]; if (i != index) { addTrack(25.2697, 55.3095, 28.6667, 77.2167, planetRadius, hue+.5);//delhi addMarker(28.6667, 77.2167, planetRadius); addTrack(25.2697, 55.3095, 35.6833, 51.4167, planetRadius, hue+.5);//terhan addMarker(35.6833, 51.4167, planetRadius); addTrack(25.2697, 55.3095, 51.0000, 9.0000, planetRadius, hue+.5);//germany addMarker(51.0000, 9.0000, planetRadius); addTrack(25.2697, 55.3095, 33.6667, 73.1667, planetRadius, hue+.5);//Islamabad addMarker(33.6667, 73.1667, planetRadius); addTrack(25.2697, 55.3095, 31.2000, 121.5000, planetRadius, hue+.5);//Shanghai, addMarker(31.2000, 121.5000, planetRadius); } } } function zoomToStart() { new TWEEN.Tween({ scale: 1 }) .to({ scale: 100 }, 2500) .easing(TWEEN.Easing.Elastic.InOut) .onUpdate(function () { var true_scale = this.scale / 100; meshPlanet.scale.set(true_scale, true_scale, true_scale); meshClouds.scale.set(true_scale * cloudsScale, true_scale * cloudsScale, true_scale * cloudsScale); }) .start(); } function addMarker(lat, lng, radius) { var marker_mesh = new THREE.Mesh(markerGeom, markerMaterial); var marker_position = latlngPosFromLatLng(lat, lng, radius); marker_mesh.position.x = marker_position.x; marker_mesh.position.y = marker_position.y; marker_mesh.position.z = marker_position.z; marker_mesh.name = "trackmarker"; meshPlanet.add(marker_mesh); } function addTrackLine(spline, hue) { var num_control_points = 32; var i; var colors = []; var geometry = new THREE.Geometry(); var pos; for (i = 0; i &lt; num_control_points; i++) { var index = i / num_control_points; pos = spline.getPoint(index); colors[i] = new THREE.Color(0xffffff); colors[i].setHSV(hue, (1.0 - i / num_control_points), 1.0); geometry.vertices.push(new THREE.Vector3(pos.x, pos.y, pos.z)); } pos = spline.getPoint(1.0); geometry.vertices.push(new THREE.Vector3(pos.x, pos.y, pos.z)); geometry.colors = colors; var material = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 1, linewidth: 2 }); material.vertexColors = true; var line = new THREE.Line(geometry, material); line.name = "trackline"; meshPlanet.add(line); } function addTrack(start_lat, start_lng, end_lat, end_lng, radius, hue) { var num_control_points = 8; var max_altitude = 500 + Math.random() * 1200; var points = []; var i; for (i = 0; i &lt; num_control_points + 1; i++) { var arc_angle = i * 180.0 / num_control_points; var arc_radius = radius + (Math.sin(latlngDeg2rad(arc_angle))) * max_altitude; var latlng = latlngInterPoint(start_lat, start_lng, end_lat, end_lng, i / num_control_points); var pos = latlngPosFromLatLng(latlng.lat, latlng.lng, arc_radius); points.push(new THREE.Vector3(pos.x, pos.y, pos.z)); } var spline = new THREE.SplineCurve3(points); addTrackLine(spline, hue); } /* var deleteMe = []; function newDataCallback(node) { if (node instanceof THREE.Line &amp;&amp; node.name == "trackline") { deleteMe.push(node); } if (node instanceof THREE.Mesh &amp;&amp; node.name == "trackmarker") { deleteMe.push(node); } } */ window.onload = function () { if (!Detector.webgl) { Detector.addGetWebGLMessage(); return; } init(); var num_new_data_adds = 1; for (var i = 0; i &lt; num_new_data_adds; ++i) { addData(locations); } zoomToStart(); animate(); } &lt;/script&gt; </code></pre> <p>The main functions are, the addData, addMarker, addTrack, addTrackline. Can some one help me plot the line with labels? I can't figure out how to label the starting and ending point of these lines.</p> <p>The sample project can be seen here: <a href="http://callum.com/sandbox/webglex/connected_planet/" rel="nofollow">http://callum.com/sandbox/webglex/connected_planet/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLeigh
    1. USuser2409375
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload