I am trying to learn ThreeCSG.js, the javascript Constructive Solid Geometry front-end to Three.js. I thought I would start by copying a minimal example from the web. I tried to save a local copy of Chandler Prall's amazing little javascript Constructive Solid Geometry example using ThreeCSG.js from the site
https://stemkoski.github.io/Three.js/CSG.html
When I made a local copy of the page (using Chrome's Save as webpage, complete command), I found that the checkerboard texture file was missing. I got the following javascript console error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
with the full path name of the (missing) jpg file. When I manually downloaded the jpg file and put it where Chrome was looking for the jpg file, I got a different error:
The cross-origin image at file:///C:/tmp/images/checkerboard.jpg may not be loaded.
My browser is Chrome 43.0.2357.134, Windows 7 64. I ran into similar problems with IE. Thinking it might be a bug/feature of three.js, I tried the most recent version of three.min.js, but got syntax errors. (The example uses an older version of threecsg.js, and the API has changed.)
What am I doing wrong?
It does not download the image directory so notable to load that and throws the error here in code
var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
you need to download that image and use any webserver to render the html page as it is making ajax request to render that image
The Problem you are facing is called CORS.
You need to configure your browser according to this github wiki article:
How to run things locally
Pasting links without further information is bad practise, but the settings depend on what browser you are using.
Another solution is to run it on a local server, how to do so is also explained in the second link.
If you are using Chrome and it's just for testing, there is a Chrome extension that will Allow-Control-Allow-Origin
The main problem is you are fetching the file locally. The file need to be fetched from the server. So the best choice is use some IDE like net beans and execute it as a Web Application
Related
For a school project I am trying to create a face recognition tool. To create this I used this tutorial.
The code runs fine in Visual Studio code with live server (running live server is a key but I can't figure out why this is so important)
But now I'm trying to put my work on a real server (server is granted to us by school). But when I upload all the files to my school server the console says it couldn't find the right models. The link the console tries to fetch the files from seems right so I'm confused and can't figure out what the problem is.
Code that loads the models:
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
faceapi.nets.faceLandmark68Net.loadFromUri('./models'),
faceapi.nets.faceRecognitionNet.loadFromUri('./models'),
faceapi.nets.faceExpressionNet.loadFromUri('./models'),
]).then(startVideo)
Server build-up:
Console error log:
Have another check that the file path you have provided is correct. For example, it may work locally with just ('./models'). But check if the school server requires you to provide the root file path. Let me know if this works.
I would recommend a generic approach to this issue, for didacting reasons.
You can to use ProcMon from Microsoft SysUtils. It can monitor any application for file system activity like reading directories or files. I recommend to use it to check where your application is actually reading from and where those paths are pointing to.
My app creates an excel file, server side, from a database extraction.
A post request sends parameters to the server that the server then uses to query the database.
The server uses these parameters to extract data convert the data to an excel file (xlsx), then saves the file with a certain file-name as per the parameters sent to the server.
The server responds to the post request by sending the file-name to the browser.
The browser then creates a link using the filename and other predefined parameters to download the file by the following instructions:
var link = 'http://host-name/path-to-file/excel-file.xlxs'; // the link that is created by the js in the browser
window.location = link; // the file is downloaded
This works in chrome, firefox, opera and safari, in these browsers, the file downloads no problem.
However; when running in Microsoft-edge, the file is not downloaded and this appears in the page.
Someone was facing similar issue in some versions of IE and had to set Cache-Control header to make the download working properly:
response.Cache.SetCacheability(HttpCacheability.Private);
Source
The issue here is that this method of downloading files is not actually downloading the file. I was using javascript to instruct the browser to open the excel file, window.location = link;. Which tells the browser, go to a that link, and open whatever you find at that address. Which is normally an HTML file or something else transpiled into HTML. This can in some cases be also be a .pdf or the sort of file that modern web-browsers are able to interpret and run.
Now, the reason this was mostly working is; browsers like chrome and firefox are smart enough to know that they cannot interpret and display excel files, so instead, they download them. Pretty smart right. However; microsoft-edge is not so clever as its more proven compatriots. It tries to interpret and run the file, which of course it cannot. What this then leads to; is a grand display of nonsense; as you can see from screen-grab in my question above.
My problem here was actually a deeper rooted issue of technology mismatch. I had since migrated to using a more modern stack, replacing my plain node.js server with express. Moving the front-end out of a cross-origin tomcat java-container application-server model (which was causing most of my headaches on a daily bases since I was coding javascript) to a same-origin environment using webpack along with express.
And as you might know, using webpack brings a whole new dimension to the front-end that was not available before when we were using the 'old approach' to web-dev.
Most of the improvements in using webpack came from its ability to bring 'node.js' to the front end.
It has made my life as a dev 150% easier and the type of problem as described in my question above is now a thing of the past. javascript for the win! The moral for me here is that sometimes that aren't any quick fixes, and you just have to do things properly.
There is a simple asp.net page with all the resource stored locally. I use jq1.7.2 and bootstrap in this page.
All works fine but a wired png request.
When the page is loaded, I got this error message:
But I searched the whole project without finding any key words as transp_bg.png or api.cld.me.
With chrome debugging, I have the network request infomation as:
Where is this request from? And how could I delete it?
Page is loaded slowly as much time is wasted on requesting this png.
there are 2 too me known possibilities:
you have some tracking tool that is runing on the server it self.
That is a dynamic placeholder from some part of a framework.
But as the request takes long my gues its a trafic tracking tool.
Clean your browser cache "I recommend you use Firefox Web Developer"
Check for jquery have doubled or incompatibility issues with Bootstrap "for example old version of jquery"
Look be not getting an image URL as may be collecting information to the browser that that error. Download it.
If set photographic paper of the image is strange. Put the same icon image above
I have a PhoneGap application in which I need to download certain images for offline usage and show those inside an iframe. Is this possible and do I need something like CorHTTPD (https://github.com/floatinghotpot/cordova-httpd) to serve the assets locally?
I have been trying to store the files on file system but when I try to show those (even without being inside iframe), those doesn't show. They seem to be loaded (can be seen in network console in remote debugging), though, but (of course) without any headers.
After spending more and more time on this and settings GapDebug correctly to remote debug my application, I was finally able to solve my problem by giving
{responseType: "arraybuffer"}
to AngularJS's $http.get method as config parameter as described here. Now I am able to get the images to ArrayBuffer correctly and from there to base64 encode them to be added inside HTML stored offline. Suitable solution for my case at least..
During a normal browsing session I want to edit a specific javascript file before the browser receives since once it gets there it's impossible to edit. Is there are any tool for this? For what I need it I can't just save it and edit it on my disk.
I'm ready to learn how to program it myself but if anyone can point out more or less what I have to do I'd be very grateful. I'd have to intercept the packets until I have the whole file while blocking the browser from receiving it any part of it, then edit it manually and forward it to the same port.
I don't think I can do this by just using pcap, I've read a bit about scapy but I'm not sure if it can help me either.
Thanks in advance.
You'd need to implement some sort of proxy, or hook into an existing one, and intercept the file as it's being downloaded and replace it.
Not trivial for a beginner, but a good learning project.
If you are happy to, rather then editing a file, replace it with a local one, then I would* use Charles and its Map To Local function.
Actually, "did". This helped me debug a problem with a browser and a JS file I couldn't edit yesterday.
You can probably achieve whatever it is you are wanting to do by using the firefox firebug plugin, chrome's development tools or the firefox greasemonkey plugin.
Or you could enter the files domain into your hosts file and point that domain to your local machine (running a web server), edit & save that javascript file locally and serve it from your own web server.