THREEJS - Mesh disappears after loading image - vue.js

I want to add an image to my Sphere. I have looked up so many versions of loading an image but it seams like my version should be correct. After commenting out map: new THREE.TextureLoader().load('earth.jpg'),, the sphere is visible but when trying to load the image, it disappears.
this.sphere = new THREE.Mesh(
new THREE.SphereGeometry(this.radius, this.segments, this.segments),
new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('earth.jpg'),
side: THREE.BackSide
}))

Related

Exporting mapbox maps into pdf using phantomjs doesnt load featurelayer and geoJson layer

I am using mapbox v1.6.1
to show up
var mapboxMap = L.mapbox.map(mapName, 'examples.map-20v6611k',{tileLayer:{noWrap:true},zoomControl:false,zoomAnimation:false,fadeAnimation:false,inertia:false}).setView([23.8, -11], 1);
a choropleth map and
var statesLayer = L.geoJson(localData, {
style: getStyle,
onEachFeature: onEachFeature
}).addTo(mapboxMap);
a normal map with markers
var featureLayer = L.mapbox.featureLayer(mapPlotData).addTo(mapboxMap);
These two layers are not showing up when i export the webpage to pdf using phantomJS
Increasing the timeout doesnt work as well.
I appreciate any help on this!

why does ImageResizer is rotating automaticlly image photographed vertical and show it horizontal

Hello i Have uploaded image using ImageResizer
using this code
var instructions = new ImageResizer.Instructions
{
Width = Convert.ToInt32(Newwidth),
Height = Convert.ToInt32(Newheiht),
Format = "jpg",
Mode = ImageResizer.FitMode.Crop,
Scale = ImageResizer.ScaleMode.Both,
};
File.InputStream.Seek(0, SeekOrigin.Begin);
ImageResizer.ImageJob i = new ImageResizer.ImageJob(File, Filepath, instructions);
i.CreateParentDirectory = false;
i.Build();
i have tried using
AutoRotate = true
i still got the image rotated to horizontall
i also tried Rotate=90
the pic was rotated and lost the proportion here is how it looks like after rotate
the resized roteted picture changed it to width=296 height=437 instead of height=296 width=437
the image was taken vertically using samsung galaxy 3 buy when resized it and upload it it show horizonally
here is the original photo taken:
here is how it shown after uploaded:
You haven't posted the diagnostics page, which lists which plugins are installed.
The most likely cause is that you didn't <add name="AutoRotate" /> or new AutoRotate().Install(Config.Current) to install the AutoRotate plugin, and therefore &autorotate=true had no effect.
It's also possible that there's a new form of image metadata that we can't detect yet, but that seems less likely.
Try Autorotate property "True"; It worked for me.
&autorotate=true

Soundcloud custom widget : change container background color w/o waveform.js?

Is there any way to change the sc-waveform container background from #efefef without having to load the waveform.js library? I have enough libraries loading already and the conainer bg conflicts with our site background color
I am experiencing the same issue and have had this problem before ( Overlay visible areas of transparent black silhouette PNG with pattern using CSS3 or JS ).
Here is an example with your waveform: http://jsfiddle.net/eLmmA/3/
$(function() {
var canvas = document.createElement('canvas');
canvas.width = 1800; // must match
canvas.height = 280; // must match
var canvas_context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img, 0, 0);
canvas_context.globalCompositeOperation = "destination-in";
canvas_context.drawImage(msk, 0, 0);
canvas_context.globalCompositeOperation = "source-over";
};
msk.src = 'WAVEFORM_IMAGE.EXT';
}
img.src = 'OVERLAY_IMAGE.EXT';
document.body.appendChild(canvas);
});
I think I understand what you mean. You want to change the color of the waveform background, the gray stuff around the waveform:
The problem here is that waveforms you get from SoundCloud API are represented as partly transparent PNG images, where waveform itself is transparent and the chrome around it is gray (#efefef) color.
So, unless the library you want to use for waveform customisation is using HTML5 canvas, you won't be able to use change the color of that chrome (so no, not possible with either HTML5 Widget API or Custom Player API). And you have to use waveform.js or the likes (or modify the waveform image on canvas yourself).
You could try to experiment with newest CSS filters (webkit only for now) and SVG filters, and possibly some MS IE filters for older IE versions, but I am not sure you'd manage to just change the color.

How to set Background of a Button without flicker?

I am trying to change the Background of a button to an image source. I want to load that image in memory when we navigate to the page so that it doesn't flicker the first time it shows.
On Windows Phone, I was able to create the image source as such:
StreamResourceInfo resourceInfo = Application.GetResourceStream(uri);
BitmapImage bitmapSource = new BitmapImage();
// Avoid flicker by not delay-loading.
bitmapSource.CreateOptions = BitmapCreateOptions.None;
bitmapSource.SetSource(resourceInfo.Stream);
imageSource = bitmapSource;
I tried something similar in my Windows 8 Store app:
BitmapImage bitmapSource = new BitmapImage();
bitmapSource.CreateOptions = BitmapCreateOptions.None;
bitmapSource.UriSource = uri;
imageSource = bitmapSource;
but the same problem occurs. The button already has a different image as the Background, and on a certain event I would like it to change to the new background. But when I change the source, a noticeable flicker is observed. I'm assuming this is because the image is not yet in memory, as the issue goes away the second time the image source is modified.
Anyone know a solution? I need to somehow force the loading of this image.
Thanks!
If you use the SetSourceAsync method on the BitmapImage and await it before you attach it to the image source you should not see the flicker:-
// Ensure the stream is disposed once the image is loaded
using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
// Set the image source to the selected bitmap
BitmapImage bitmapImage = new BitmapImage();
await bitmapImage.SetSourceAsync(fileStream);
imageSource = bitmapImage;
}
The MSDN docs have some more info on this
Thanks Ross, but what I ended up doing instead is I preloaded the half dozen or so bitmaps I needed by using similar code to what you had above, except from resource of course. I did this asynchronously when the page loaded, and then when I set the ImageSource on the button background, I used the already preloaded bitmaps. That way I know I'm not allocated a new chunk of memory for every instance of the bitmap.

Leaflet markers do not open popup on click

I just started using Leaflet and Marker Clusterer to organize the markers.
Problem #1: When an unclustered marker is clicked, no popup appears.
Problem #2: When a cluster is clicked several times, all the markers within that cluster appears, and when one of this marker is clicked, its popup appears! However, after closing the popup by clicking on the map, clicking on any of these clustered markers do not open any popups!
If I only have 3 unclustered markers, the popup works fine. However, as more markers are added, once a cluster forms, clicking on the marker within any cluster will not cause the popup to open!
Initializing markerclusterer
markers = new L.MarkerClusterGroup();
map.addLayer(markers);
All markers added to markercluster markers
A loop calls on the render function to create the marker and add it to the markerclusterer's array markers. (ignore the backbone.js code)
ListingMarkerView = Backbone.View.extend({
template: _.template( $('#tpl_ListingMarkerView').html() ),
render: function() {
// Create marker
var content = this.template( this.model.toJSON() );
var marker = new L.marker(
[this.model.get('lat'), this.model.get('lng')],
{content: content});
marker.bindPopup(content);
// Add to markerclusterer
markers.addLayer(marker);
}
});
Without markerclusterer
If I add the marker directly to map instead of the markerclusterer array markers, the popups work fine, so I guess the problem has something to do with markerclusterer.
Did I do something wrong that resulted in such behavior of the popups? All help appreciated, thanks!
From what little I know of the cluster marker group, you should do this:
var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
// Current marker is ev.layer
// Do stuff
});
To add an event handler to the cluster layer instead, do this:
markerGroup.on('clusterclick', function(ev) {
// Current cluster is ev.layer
// Child markers for this cluster are a.layer.getAllChildMarkers()
// Do stuff
});
Oh, and read the github README carefully, it's all in there...
Make sure you have the right versions of everything in your Leaflet + Clusterer stack (Js and Css). Compare against the examples in the Clusterer Github repo.