I’m trying to load some 3D models from a remote URL into my page and I’m suddenly getting this error over and over again:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
The models I’m working with are those available from THREE.js’s GIT - here - so they’re all perfectly good legit models that we’ve all been using for years. In other words: they don't contain any unexpected character anywhere.
What’s weird is that during development of this project, I first just downloaded these models (the ".gltf" and ".glb" files) directly to my hard drive and loaded them into my page from there - and my code worked perfectly. But as soon as I uploaded these very same models to a remote server and tried to load them from that URL, I suddenly started getting this error.
Here’s my loading function:
function loadModel(modelFileName) {
console.log("->In 'loadModel()', 'modelFileName' =", modelFileName);
// Load the Object:
gltfLoader.load(modelFileName, function(incomingScene) {
console.log(modelFileName, "' has arrived!!!");
console.log(" =>'incomingScene' = ", incomingScene);
let loadedScene = new THREE.Scene();
loadedScene = incomingScene.scene;
scene.add(loadedScene);
const defaultTransform = new THREE.Matrix4()
.multiply(new THREE.Matrix4().makeScale(0.5, 0.5, 0.5));
loadedScene.applyMatrix4(defaultTransform);
},
// Called when loading is in progresses:
function(xhr) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
function(error) {
console.log("ERROR! -->", error);
});
}
Here’s the URL where one of the models I’m requesting is sitting:
https://ipfs.io/ipfs/QmYqwNYxqmu4z39emTo7h9D62rbwm1esAmbAf2PctAyUvu?filename=Flamingo.glb
(This particular model was actually loading just fine when I ran the app/page the first couple of times - but then it suddenly stopped loading and gave me that error I listed up top. Makes no sense.)
The only output I'm getting from the browser's JS Console regarding all this is from the progress callback bit of the code I posted above, which just says:
Infinity% loaded
Any ideas what’s causing this - and how it can be solved?
==================================================
UPDATE:
here's a screenshot of the NETWORK tab in the my browser:
Related
I'm developing a an application which displays images ( png ) in a layer of an OpenLayer's map. So far so good, it works like a charm. Nonetheless it may happen
that the requested image has to be created on the fly by the server and then a delay of few or more seconds can be observed before the image appears on the client's side. To make the user understand that displaying the image takes some time I use an animation that appears when the request is sent to the server and should disappear when the image is served and displayed (see code below). What I observe though is that the animation never appears exactly as is the service of the image was processed in an asynchronous way. I really would like to know if my interpretation is correct and in such a case which can of event I should trap and only then make the animation disappear.
document.getElementById('loading').style.display='block';
_im_layer_1 = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://'+server+':'+port+'/png/?path="'+_path+'"&si='+_sliceIndex,
projection: _projection_1,
imageExtent: _extent
})
});
console.log("adding the image layer");
_map_1.addLayer(_im_layer_1);
document.getElementById('loading').style.display='none';
I was expecting to listen to the source with
imageStaticSource.on('change', evt => {
console.log('no event, contrary to what I would expect');
});
but it fails contrary to what I expected from the API docs.
So, looking at the code, I've seen there is an imageLoadFunction option for the ol.source.ImageStatic constructor. When not set, this function fallback to a default one. I've created a new one, derived from the default and made some changes to demonstrate how you can get the start of the loading event and then the end of it.
You will find a demo derived from the official sample that should illustrate the process. Try it on you side as the demo does not wait some seconds to return the image, contrary to your use case.
var imageLoadFunction = function(image, src) {
// Where you start showing the loader using a variable
console.time('loader');
image.getImage().addEventListener('load', function() {
// Where you should mention to stop the loader
console.timeEnd('loader');
});
image.getImage().src = src;
};
var imageStaticSource = new ol.source.ImageStatic({
attributions: '© xkcd',
url: 'https://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageLoadFunction: imageLoadFunction,
imageExtent: extent
});
Could anybody help me calling a validation function in can.js?
I'm adding can.jquery.js and can.map.validations.js
and then create such a small example:
var mymap = can.Map.extend({
init: function () {
this.validatePresenceOf('myfield'); // this line reports an error
}
});
when loading page with this script, I get an error in browser:
"Uncaught TypeError: undefined is not a function"
Actually any this.validate* function does not work
After some research I notice that when I put this code under
$(document).ready{}
it works, but if I put it into .js file and load via tag - browser reports an error.
And I'm not going to write all of my js code in the page itself
see here it tells pretty clearly(helped me last time) that you have to use $document.ready() or else it wont work, so try making a new file.js, have $document.ready() contain all your todo-code, and link it up, I hope I am helpful in this regard, if not then bug me up I wont mind at all :) ..
Commenting it late but anyway - it didn't work for me in either case so I just took the sample from http://jsbin.com/jofeq/5/edit?html,js,output - and copied it to my code. Surprisingly it worked after copying - not sure what was wrong on my side.
In that example it looks like this:
var Person = can.Map({
init: function () {
this.validatePresenceOf('firstName');
this.validatePresenceOf('lastName');
}
}, {});
and it works without document.ready tricks or anything else - just included into body tag
I have an OBJ file generated dynamically by a server on a separate domain. It has some materials and texture JPG files.
I load this OBJ file with a simple php proxy (fileProxy.php):
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Headers: Content-Type');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT'); // http://stackoverflow.com/a/7605119/578667
header('Access-Control-Max-Age: 86400');
//Check if this is an image. if So print coorect header.
if (strpos($_REQUEST['fileToProxy'],'jpg') !== false) {
header('Content-Type: image/jpeg');
}
$proxyFile = (isset($_REQUEST['fileToProxy'])? $_REQUEST['fileToProxy'] : null);
if ( isset($proxyFile)){
// the files sent to us aren't properly url encoded
$proxyFile = str_replace(' ', '+', $proxyFile);
$content = file_get_contents($proxyFile);
print($content);
}
else {
echo "ERROR: no file to proxy";
}
?>
Loading the OBJ files works like a charm
BUT, i cant load the JPG textures embeded in the MTL file. Single colored shaders all work fine, but loading images i get errors.
I get the following error in chrome:
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': the cross-origin image at http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fil…est-2.compute.amazonaws.com/3DModels/435639/DonutFullBread.jpg&timtest=115 may not be loaded.
The address of the texture file is fed correctly into my proxy:
http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/3DModels/435639/DonutFullBread.jpg&timtest=115
Now after checking my Network monitor, i realise that the Jpg Image is successfully downloaded and the correct CORS headers are all in place. But webgl/three.js still spits out the errors and does not display my model.
SO this seems like a WEBGL bug. But i get security erros in all browsers.
I have tested this on my localhost and on my server. Same problem.
Any solutions?
UPDATE
Here's how i load the OBJ/MTL files with three.js:
(Only cross domain textures fail)
var loader = new THREE.OBJMTLLoader( manager);
///////////////////LOAD MDOEL////////////////////
loader.load( 'http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=' + obj.file, 'http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=' + obj.material, function ( object ) {
//if loaded, do some stuff here.
}
loadedmodel.add(object);
That's all I do really. The Materials and textures are phrased correctly by the loader.
I dont have to set any materials up.
I just want to put this here for other people.
I had a very similar problem when i was trying to load images from static google map images.
So here is what i did
THREE.ImageUtils.crossOrigin = "anonymous";
Just before the actual texure is being loaded.
Now this got it working and i could load the images without a problem.
I know this is old, but I just spent a few hours troubleshooting the same issue, so I thought I'd post an answer here for any future users that run into this. The solution is quite simple, but unfortunately it is not documented anywhere that I could see. I discovered it by pure dumb luck.
var loader = new THREE.OBJMTLLoader( manager);
loader.crossOrigin = ''; // <-- this is all you need to add!
///////////////////LOAD MDOEL////////////////////
loader.load( 'http://obj_url.com', 'http://mtl_url.com', function ( object ) {
//if loaded, do some stuff here.
}
loadedmodel.add(object);
If it's not clear in the code above, the only thing you need to do is to add the line loader.crossOrigin = ''; after declaring the OBJMTLLoader.
I hope this helps someone in the future!
You need to set the crossorigin property explicitly for the image. Copying from one of my own examples:
images[id].image = new Image();
images[id].image.crossOrigin = "anonymous";
images[id].image.onload = function() {/* WebGL texture load of file here */}
images[id].image.src = "http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/3DModels/435639/DonutFullBread.jpg&timtest=115"
I loaded the image that you have mentioned above, and it works correctly for me in the browser as a texture.
I often joke about my projects blowing up because I forgot a semicolon. Well, this time it is no joke. Someone actually forgot a semicolon in the latest revision of ThreeJS. I dug into MTLLoader.js (which is referenced by OBJMTLLoader.js) and found that this line (near the bottom of the MTLLoader prototype constructor) had a semicolon missing:
materialCreator.crossOrigin = this.crossOrigin
That'll kill any cross-site sharing for all materials. I added the semicolon back in...
materialCreator.crossOrigin = this.crossOrigin;
...and all was well with the world again.
We are having an issue with our web application (JSF 1.2 + Ajax4jsf 1.1 ) .We get the following error
**Message: Permission denied
Line: 27
Char: 222
Code: 0
URI: http://uat.example.com/ABC/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf**
This problem is sporadic and happens 50% of the times.
Happens only on IE8 in all other browsers we do not see this problem.
When this error occurs the whole page blanks out. Howevere a Refresh brings the page back.
We did go through couple of articles regarding IE QUIRK VS standard mode.
Force IE8 Into IE7 Compatiblity Mode
Did not help.
NOTE: This is not cross site scripting issue as the domain where the script (generated by JSF ) is the same domain where our app is installed.
Please let us know if some has solved this issue.
I see a similar problem posted by some one at
http://www.coderanch.com/t/490213/JSF/java/support-IE
Found the fix to the problem.Fixed by modifying ajax4jsf-1.1.0.jar
Root cause: In case of IE-8 the response is being fetched from Ajax object though the response is not read yet. So we added fix for IE by checking the status==200 and readystate=4.
Here is what we did
Open AJAX.js which is under \org\ajax4jsf\framework\ajax\scripts\AJAX.js inside the jar
STEP 1.
Change from:
getResponseText : function(){
return this._request.responseText;
}
TO:
getResponseText : function(){
if (this._request.readyState == 4){
if (this._request.status == 200) {
return this._request.responseText;
}
}
}
STEP 2. Looks for this method and change
FROM:
window.setTimeout(function() {
var isDocOpen=false;
//This functions has few more lines , I have not pasted all code here...
Change TO:
//This is the Fix for IE....The isIE variable is pre defined inside the script.
if (isIE){
if (req.readyState == 4){
if (req.status == 200) {
window.document.open(req.getContentType(),true);
isDocOpen=true;
window.document.write(req.getResponseText());
window.document.close();
}
}
}
else {
//This is the Original code...
//Keep this for all other browsers...
window.document.open(req.getContentType(),true);
isDocOpen=true;
window.document.write(req.getResponseText());
window.document.close();
}
....... Rest of the code should follow as on Original script.
STEP 3:
//COMMENT OUT THIS ORIGINAL CODE. Not sure why this reloading is done for IE
//this was causing IE to send requests...more than once..
//if(isIE){
/ For Ie , scripts on page not activated.
// window.location.reload(false);
//}
Once we made the above change , we used win rar and dropped the Ajax.js file back to ajax4jsf-1.1.0.jar and now IE 8 pains got resolved.
Hope it helps someone out there.
I'm writing an extension for firefox. Using dom.location to keep track of visited search results pages, i'm getting this url http://www.google.com/search?hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=642c18fb4411ca2e . If you click it, the google search results for "hi" should come up. You'll know that from the title bar - because the rest of the page won't load. This happens with any google search. Oddly enough, if you cut part of it off, so say, http://www.google.com/search?hl=en&source=hp&q=hi - it works! But Googling "hi" myself does give me a longish URL - http://www.google.com/#hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=db658cc5049dc510 . I know for a fact that the first time that URL was visited, the page loaded, I did it myself.
Can anyone make reason out of this?
I just tried my experiment again, this time saving the original URL in the location bar. It turns out, dom.location.href is giving a different value. How is this happening?
Original:
http://www.google.com/#hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=642c18fb4411ca2e
dom.location.href
http://www.google.com/search?hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=642c18fb4411ca2e
window.addEventListener("load", function() { myExtension.init(); }, false);
var myExtension = {
init: function() {
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
var messagepane = document.getElementById("messagepane"); // mail
if(messagepane)
messagepane.addEventListener("load", function () { myExtension.onPageLoad(); }, true);
},
onPageLoad: function(aEvent) {
var doc = aEvent.originalTarget; // doc is document that triggered "onload" event
// do something with the loaded page.
// doc.location is a Location object (see below for a link).
// You can use it to make your code executed on certain pages only.
var url = doc.location.href;
if (url.match(/(?:p|q)(?:=)([^%]*)/)) {alert("MATCH" + url);resultsPages.push(url);} else {alert(url);
}
}
This snippet comes directly from Mozilla with the matching and alerts my own. I apologize for not posting the code earlier.
Well, on the "right" page http://www.google.com/#hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=1&cad=b there seems to be a frame with the "wrong" location: frames[0].location == "http://www.google.com/search?hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=1&cad=b". You're probably getting the inner frame's location. I have no idea why, since you didn't post any of your code and just mention some "dom.location", which I never heard of.