Three.js: SVG as texture?

Created on 12 Feb 2012  ·  5Comments  ·  Source: mrdoob/three.js

I red this question #814

And also I run onto this js library: http://code.google.com/p/canvg/ which can do SVG to canvas to data conversion.

This is my code:

var imageCanvas2 = document.createElement("canvas");
canvg(imageCanvas2, 'images/46.svg');
var imag = imageCanvas2.toDataURL('image/png');   // --> here is the converted image data

var cubeMaterial = [new THREE.MeshBasicMaterial({
    map : THREE.ImageUtils.loadTexture(imag)
})];

This gives me error: "Cross-origin image load denied by Cross-Origin Resource Sharing policy."

What are my options here?

Also I should mention that WebGL is not an option since I will be using this on mobile devices which don't support WebGL.

Question

Most helpful comment

My god... I can't believe how stupid.
This works on iOS also.

I have an SVG image which is the same color as WebView's background so that is why I didin't saw it :D
At least it works and someone can laugh now when reads this :D

All 5 comments

I think you're hitting this same issue #1305.

I tried something based on that:

var imageCanvas2 = document.createElement("canvas");
canvg(imageCanvas2, 'images/46.svg');
var imag = imageCanvas2.toDataURL('image/png');

var texture = new THREE.Texture(imag);
texture.needsUpdate = true;

//Now I have to make material from this so I could apply it to Mesh:

var cubeMaterial = new THREE.MeshBasicMaterial({
    map : texture  /////something like this. This throws errors.
});

cube = new THREE.Mesh(geometry, cubeMaterial);

I didn't find example of this. Can you help?

var imageCanvas2 = document.createElement("canvas");
canvg(imageCanvas2, 'images/46.svg');

var texture = new THREE.Texture(imageCanvas2);
texture.needsUpdate = true;

Well, good thing is that this works. Bad thing is that it doesn't work on iPhone.
Thank you, I'll have to figure now why isn't this working on iOS.

My god... I can't believe how stupid.
This works on iOS also.

I have an SVG image which is the same color as WebView's background so that is why I didin't saw it :D
At least it works and someone can laugh now when reads this :D

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bingomanatee picture bingomanatee  ·  4Comments

JohannesDeml picture JohannesDeml  ·  3Comments

WestLangley picture WestLangley  ·  5Comments

cnsdato picture cnsdato  ·  4Comments

atul-mourya picture atul-mourya  ·  4Comments