Three.js: SVG als Textur?

Erstellt am 12. Feb. 2012 · 5Kommentare · Quelle: mrdoob/three.js

Ich habe diese Frage Nr. 814 wiederholt

Außerdem starte ich auf diese js-Bibliothek: http://code.google.com/p/canvg/, mit der SVG in Canvas in Daten konvertiert werden kann.

Das ist mein 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)
})];

Dies gibt mir den Fehler: "Ursprüngliches Laden von Bildern durch die Richtlinie zur gemeinsamen Nutzung von Ressourcen verweigert."

Welche Möglichkeiten habe ich hier?

Außerdem sollte ich erwähnen, dass WebGL keine Option ist, da ich dies auf Mobilgeräten verwenden werde, die WebGL nicht unterstützen.

Question

Quelle

Dino4674

Hilfreichster Kommentar

Mein Gott ... ich kann nicht glauben, wie dumm.
Dies funktioniert auch unter iOS.

Ich habe ein SVG-Bild, das dieselbe Farbe wie der Hintergrund von WebView hat. Deshalb habe ich es nicht gesehen: D.
Zumindest funktioniert es und jemand kann jetzt lachen, wenn er Folgendes liest: D.

Dino4674 am 12. Feb. 2012

😄28

Alle 5 Kommentare

Ich denke, Sie treffen das gleiche Problem # 1305.

mrdoob am 12. Feb. 2012

Ich habe etwas versucht, das darauf basiert:

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);

Ich habe kein Beispiel dafür gefunden. Kannst du helfen?

Dino4674 am 12. Feb. 2012

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

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

mrdoob am 12. Feb. 2012

👍3

Gut, dass das funktioniert. Schlecht ist, dass es auf dem iPhone nicht funktioniert.
Vielen Dank, ich muss jetzt herausfinden, warum dies unter iOS nicht funktioniert.

Dino4674 am 12. Feb. 2012

Mein Gott ... ich kann nicht glauben, wie dumm.
Dies funktioniert auch unter iOS.

Dino4674 am 12. Feb. 2012

😄28

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Three.js: SVG als Textur?

Hilfreichster Kommentar

Alle 5 Kommentare

Verwandte Themen