0

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?

R. Strickland
  • 141
  • 4
  • My original problem seems to be related to this one:http://stackoverflow.com/questions/21151026/three-js-cant-load-texture-locally . – R. Strickland Jul 19 '15 at 00:11
  • For reference, here is the url of the texture I want to load: https://stemkoski.github.io/Three.js/images/checkerboard.jpg – R. Strickland Jul 19 '15 at 00:20

4 Answers4

0

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

abs
  • 801
  • 6
  • 15
  • I already tried downloading a local copy and putting it the images directory. My initial problem seems to be related to permissions: – R. Strickland Jul 19 '15 at 00:09
0

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.

Falk Thiele
  • 4,424
  • 2
  • 17
  • 44
0

If you are using Chrome and it's just for testing, there is a Chrome extension that will Allow-Control-Allow-Origin

2pha
  • 9,798
  • 2
  • 29
  • 43
0

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

Jenifer Venitta
  • 47
  • 2