Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
timrandall
2,669 PointsCan't get Chrome to run example on local server, Firefox works. Beginner three.js
The 2013 blog by Nick Petit at - http://blog.teamtreehouse.com/the-beginners-guide-to-three-js has example code that won't run for me on local server, tried both python and NPM servers. Have changed the setClearColorHex to setClearColor in the example. I think the loader.load line is the source of the problem Example js code : var loader = new THREE.JSONLoader(); loader.load( "js/logo.js", function(geometry)
There is a demo for the tutorial that works fine on my local server in Chrome, using this code: var loader = new THREE.JSONLoader(); loader.load( 'http://codepen.io/nickpettit/p..., function(geometry)
Have tried loader.load( "http://localhost:8000/js/logo.js" - no good.
Every on-line source just tells me to run a localhost, my terminal shows the local server is running when I use Firefox on the example code but no activity when I try to load localhost:8080 in Chrome. Any help would be appreciated. I would like to locally develop code that works without forcing end user to change settings in current releases of Chrome, Firefox, Safari, and, dare I hope, Edge.
3 Answers
Damien Watson
27,419 PointsHi Tim,
I just downloaded from the first link in your question, unzipped, dropped it in my 'htdocs' folder and it runs on my localhost fine under: http://localhost/threejs_logo_example/
Interesting thing is that the line of code you're talking about doesn't exist. Line ~57 loads the treehouse logo:
loader.load( "models/treehouse_logo.js", function(geometry){ ...
I recommend downloading again, unzip in htdocs and run without modifications. Hope it works out for you, threejs is pretty cool.
timrandall
2,669 PointsThanks for the assistance. Did as you suggested, No change on my end, still works in Firefox and not in Chrome. I see the gray background but no logo. It only works in Chrome if I override the default CORS setting. I'm wondering if my local server is the problem. I bought this computer used, and there was an Apache server and I think the LAMP stack on it in its previous life. Still, the NPM server and Python servers have always performed as expected until now. I have a Mac mini and a Windows 10 laptop I can put servers on to look into this further, but this Linux Mint machine is my preferred development box. I guess I can disconnect this box from the internet and override the CORS setting in Chrome.
Running Linux Mint 17.3 || Chrome Version 55.0.2883.87 (64-bit) The Chrome console log: three.min.js:416 THREE.WebGLRenderer 60 three.min.js:428 DEPRECATED: .setClearColorHex() is being removed. Use .setClearColor() instead. setClearColorHex @ three.min.js:428 three.min.js:217 XMLHttpRequest cannot load file:///home/tim/run/models/treehouse_logo.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. THREE.JSONLoader.loadAjaxJSON @ three.min.js:217 three.min.js:216 THREE.JSONLoader: [models/treehouse_logo.js] seems to be unreachable or file there is empty f.onreadystatechange @ three.min.js:216
Jennifer Nordell
Treehouse TeacherThis is just a thought. I actually have no idea if this will work. But what happens if you set it to require https instead of http and run it all through the https protocol?
timrandall
2,669 PointsIt's working. It was apparently something in the NPM installation. Uninstalled NPM, Updated system, and the python server worked. Installed NPM and now it works too.
Damien Watson
27,419 PointsAwesome, glad you got it up and running. Enjoy. :)
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherOut of curiosity, have you tried clearing your browser cache in Chrome? I wonder if it might be loading in old data before you made your changes. Also, when you try in Chrome are you getting any errors in the console of the developer tools?