I am facing very weird problem. I am running two threejs apps(same codebase only change in ui) in samsung note3. One app is running perfectly but in the other one webgl is not working Detector.webgl is return false.
ThreeJS version: r79.
this.renderer = new THREE.WebGLRenderer({
antialias: true
});
Above code is giving this error:
TypeError: Cannot call method 'getExtension' of null
at get (file:///android_asset/www/grid-assets/js/three.js:28022:20)
at new THREE.WebGLRenderer (file:///android_asset/www/grid-assets/js/three.js:25056:13)
Any help would be highly appreciated.
Thanks
When WebGLRenderer is instantiated, WebGLExtensions is called to get various texture filtering support. The gl object which exists in any webGL enabled browser when a canvas object is created. Three.js calls something like:
gl = canvas.getContext('webgl');
In your case, gl is returning Null. Since your error is not: "getContext is undefined", we know you have a good canvas. The problem is that it did not return a webGL context to the gl property when THREE.WebGLExtensions is called. So for some reason the browser is not providing Three.js with webGL access.
This could be a number of things. It may be the timing of objects loading onto a page, or something halting webGL access in the browser such as a hanging process. It's tough to say. I would check that you have the latest Android and android browser too. I would compare your working app with the failing app to try to identify a point of failure. Also reboot the device and have your failing app be the first thing you open to help rule out external processes causing webGL to fail.
Related
It looks like Vuepress is made for public docs, but we decided to add client and server security to protect some of the doc pages. But unfortunately although oidc-client (https://github.com/IdentityModel/oidc-client-js/wiki) works during dev, it throws exception when build.
I get ReferenceError: window is not defined and when I try to trick the compiler with const window = window || { location: {} }; I get TypeError: Cannot read property 'getItem' of undefined
Any idea how to make this work?
This was driving me nuts also. I discovered the component I was trying to add was looking at window.location in its code - this was triggering the error.
My understanding is that the build process has not access to Browser things like window etc.
As soon as I removed the window.location bit from my code things built just fine and all is well.
I'm implementing file picking and upload with moxie FileInput and XmlHttpRequest polyfills. I'm only using the HTML5 and HTML4 runtimes.
In IE8 & 9 I get NOT_FOUND_ERROR from the html4 xhr runtime when trying to send the file picked from the FileInput.
simple example of code:
https://gist.github.com/derrickwilliams/7390bd8e33aec336c0f8
The error is throw after calling xhr.send(formData);
Any help is greatly appreciated.
Problem:
My app uses angular and ui-router. The view, where the FileInput is rendered, get destroyed after moving to the next state where the XHR request is actually made. It seems that is only a problem with html4 runtime.
Solution:
I used the container option to have the FileInput render outside of the element that is destroyed during state transition.
I am developing a web based 3D WebGL application using Three.js. I am trying to load a "Blender" model JS file using the following code:
var loader = new THREE.JSONLoader();
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "../build/MySampleModel.js", addModelToScene );
// addModelToScene function is called back after model has loaded
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshFaceMaterial( materials );
meshObj = new THREE.Mesh( geometry, material );
meshObj.scale.set(10,10,10);
meshObj.add( android );
}
When I tested this in Chrome browsers, it does NOT load the model and it gives the following error:
THREE.WebGLRenderer 59dev three.min.js:417
XMLHttpRequest cannot load file:///Users/xxxx/Desktop//THREE_JS_3DWEB/Dev/three.js-dev/build/MySampleModel.js. Cross origin requests are only supported for HTTP. three.min.js:211
THREE.JSONLoader: [../build/HouseModel.js] seems to be unreachable or file there is empty three.min.js:210
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 three.min.js:211
I am not running any local server in my machine. Is it necessary to have a local server running to load Blender model JS file in a Three.js based project?
(When I try running Three.js example file called "webgl_loader_json_blender.html" which uses loading of blender models, in Eclipse with a local apache server running, it is able to load the blender file properly when I'm running "webgl_loader_json_blender.html" in Chrome browser.)
I'm not an expert, but yours seems to be a problem with the browsers' "same origin policy" security restriction. Check this link from the three.js repository: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
I've experienced that it is easier to load local models using Mozilla Firefox instead Chrome.
So the answer is no, server is not required to load a model.
Good luck!
I have some canvas code that works great in safari and chrome, but fails in firefox.
The firefox console reads:
[17:44:13.372] uncaught exception: [Exception... "Operation is not supported" code: "9" nsresult: "0x80530009 (NotSupportedError)" location: "http://REDACTED.js Line: 703"]
Firebug gives the slightly-more-useful-to-humans:
Operation is not supported
var data = ctx.getImageData(x,y,1,1);
I am indeed calling .getImageData on line 703.
I have read that similar errors have been reported with regards to origin policies. This project is hosted on a web server (not local), and I haven't loaded any images from a different domain and put them on the canvas. In fact, I get the error even if the canvas is blank.
The webkit-based browsers give me the pixel data as asked, what can be done about firefox? Thanks.
Don't pass NaN to .getImageData.
I am trying to show an animated image while data is loading into a gridview after a button click. It works great on localhost, but when I deploy it, it doesn't. I have searched through posts, and I have not made any of what seem to be the most common mistakes ... ie. putting the updateprogress inside the updatepanel, etc. However, I am using a masterpage - but the masterpage doesn't have a scriptmanager on it. I noticed the following difference in my view source pages when I compare production to localhost .. Can anyone help me understand why the JavaScript to make this work might not be showing up in production?
On localhost (where it works) I see this at the bottom of the page:
[CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":null,"displayAfter":500,"dynamicLayout":true}, null, null, $get("ctl00_ContentPlaceHolder1_UpdateProgress1"));
});
In production (where it does NOT work), this is all I see:
Sys.Application.initialize();
I was having really hard time after converting my project from VS2008 to VS2010. The UpdateProgress stopped working suddenly, which was fine in VS2008. Spending a whole afternoon to search the answer and experimenting this and that, finally I found what went wrong from Scott Gu's posting.
It was an automatically generated web.config entry 'xhtmlConformance mode="Legacy"'.
After disabling this, it started to work again. May be not the case for you but just for guys struggling with the same problem.
Happy coding
This may not be your ideal solution, but you could show() or hide() your animated image just using javascript. Using the following javascript functions (and getting rid of the UpdateProgress control) should do the trick.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
function beginRequest(sender, args) {
document.getElementById('myImageElement').style.display = 'block';
}
function endRequest(sender, args) {
document.getElementById('myImageElement').style.display = 'none';
}
Keep in mind this will happen for every postback, you may need to use the sender parameter to deduce which element called the postback and only perform the display when the correct updatepanel is hit. These events are fired at the beginning and end (respectively) of each UpdatePanel postback. Good luck.