Three.js canvas Rendern und Transparenz

Bitte haben Sie einen Blick diese demo mit beiden WebGL aktiviert und deaktiviert.

Beim wechseln zwischen WebGL und canvas Rendern (dies geschieht automatisch als javascript erkennen, ob Sie WebGL oder nicht) die wireframe-only-Bereich (das erste auf der linken Seite) ändern.

Als WebGL aktiviert ist, können Sie auch die Drahtbügel auf der Rückseite der Kugel (der Teil, der verborgen ist, auf der anderen Sphären, wie Sie einen nicht-transparenten material).

Als WebGL deaktiviert ist, können Sie nicht schätzen die Transparenz nicht mehr.

Bereite ich eine demo, und ich möchte Unterstützung bieten, die browser nicht unterstützt WebGL: es ist entscheidend, um die Transparenz, wie meine Idee basiert vollständig auf Sie. Meine Präsentation habe nur einen 6-Gesicht cube, ich denke, sogar die alten CPU ' s sollten keine Probleme haben die Präsentation in transparenten Drahtgitter.

Tut three.js dies unterstützen? Gibt es eine Möglichkeit, ich kann es tun? Wie sollte ich das material so, dass es funktioniert, auch mit canvas Rendern?

Weiter zu beweisen mein Punkt, hier eine zweite demo. Gleiche Problem wie wechseln Sie zwischen WebGL und canvas.

Aktuellen Drahtgitter material ist, erklärt das so:

new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true } ); 

Verhalten sich aber wie erwartet nur in WebGL.

Jsfiddle hier

Vielen Dank für das Lesen!

p.s. Ich bin bereit zu treffen, die alternative zu Three.js wenn Sie dies nicht tun können, was ich brauche. Ich MUSS die Vorbereitung dieser demo, aber ich habe nicht die Mathematik/geometrie Kenntnisse dazu von mir, auch wenn es ist so einfach wie das drehen eines 3d cube.

Mit webgl:

Three.js canvas Rendern und Transparenz
Three.js canvas Rendern und Transparenz

canvas Rendern:

Three.js canvas Rendern und Transparenz
Three.js canvas Rendern und Transparenz

  • Können Sie ein live-Beispiel (jsfiddle.net) Ihren code, und Fragen Sie eine bestimmte Frage? Sind Sie nur conderned über Drahtgitter-Modelle?
  • Vielen Dank für die Veröffentlichung. Es gibt zwei Beispiele verlinkt, die in der Frage und der code zum generieren der wireframe-material ist das einer gepostet. Was meinst du mit " wireframe "Modelle"? Ich brauche zum Rendern nur das Drahtmodell des mesh (die Kanten), nicht die Gesichter, wenn das, was du meinst. Punkt ist, einige Kanten fehlen, mit canvas Rendern, während mit webgl Sie sehen Sie alle. Versuchen Sie einfach die demos mit Safari und Chrome, und du wirst den Unterschied sehen.
  • Ich sehe den Unterschied. Ich wurde gefragt, Sie zu bitten, eine bestimmte Frage zu IHREM code, und der beste Weg das zu tun ist, um eine live-Beispiel von DEINEM code.
  • Für mich wäre es hilfreich, wenn du posten könntest screenshot um zu verdeutlichen, was du meinst. Ich bin mir nicht sicher, was Sie versuchen zu erreichen.
  • Bitte nehmen Sie meine code ist, den man verfasst in den Beispielen. Wenn Sie brauchen, um zu isolieren, die Teil der das problem verursacht betrachten Sie einfach den code, den ich gepostet habe: das ist, wo Sie entscheiden, ob der Drahtbügel wird transparent sein oder nicht.
  • vielen Dank für das Lesen. Bitte siehe update-Antwort für screenshots.
  • hier ist das JSFiddle, wie verlangt. Sie können wechseln, die erste Zeile code, um den Unterschied zu sehen zwischen WebGL und Canvas. jsfiddle.net/DtMQG

InformationsquelleAutor Saturnix | 2013-04-03
Schreibe einen Kommentar