Using Three.js with jsfiddle

Using Three.js in a fiddle on the site jsfiddle.net is really quite easy but I keep coming across people having trouble with it. So here are a couple of tips when trying to set up a Three.js scene in a fiddle

Including the Three.js source

When creating a fiddle to use Three.js the most important part is including the Three.js library itself. You can select to include Three.js from the "Framework and Extensions" section but this will probably not be the latest version of Three.js. To include the latest version it is best to include it from the github repository itself, so you want to enter the path in the "External resources" section. But directly including the github path will result in an error, even with the github raw path. What you need to do is include the path from rawgit.com/, which is rawgit.com/mrdoob/three.js/master/build/three.min.js.
Now you have Three.js included in the page correctly, you can start creating your 3D scene. If you prefer to work from a base, I have created on here.

Here is how the base looks.

Using images in materials

When using images in Three.js materials in a fiddle you will probably come across the CORS (Cross-Origin Resource Sharing) problem.
A way to get around this problem is to add the image DataURL as a variable, the same as if you call toDataURL() on a canvas element.
You can get an images DataURL DatURL.net
Here is an example that uses a variable with image data as the source for the THREE.ImageUtils.loadTexture() function.

Here is an example of using image data as a texture in a fiddle.

Update:
Instead of using a dataURL and the ImageUtils class, you could use the ImageLoader class and set the 'crossOrigin' property to an empty string.

Comments

THANK YOU for posting this. It's frustrating when you want to identify a problem but aren't necessarily an expert in jsfiddle. I wish the jsfiddle three.js library was more current than revision 54. T_T

Add new comment

You must have Javascript enabled to use this form.