Chris 2pha Brown. Drupal developer Brisbane Australia

Chris Brown

Drupal, Javascript, Three.js, 3D

website blog
image for Using Three.js with jsfiddle

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 one 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.

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.

Add a comment

<b>, <i> and <code> tags are allowed.