Würfel drehen lassen Javascript

Shade Of Mine

http://lanrat.com/code/html5-cube
Am einfachsten über -transform:rotate()

Aber die Frage ist ob JS die richtige Wahl hier ist...

PS:
oder natürlich auf einem Canvas selber Zeichnen - dann einfach simple Grafiktutorials ansehen wie das geht

derdefeckter

hallo,

wie würdet ihr sowas denn machen?

also ich steh da komplett auf dem schlauch da ich mich mit js und canvas noch nicht wirklich beschäftigt habe

mfg

EDIT:

oder wie kann ich den würfel noch zum drehen bringen also nur von links nach rechts drehen?

http://lanrat.com/code/html5-cube

derdefeckter schrieb:

aber ich meine eher sowas halt nur mit autorotate

http://www.gwendragon.de/tools/javascript/rotateobj/demo.html

Schau dir mal auf http://www.gwendragon.de/tools/javascript/rotateobj/ die Demo der BETA an.

GwenDragon schrieb:

derdefeckter schrieb:

aber ich meine eher sowas halt nur mit autorotate

http://www.gwendragon.de/tools/javascript/rotateobj/demo.html

Schau dir mal auf http://www.gwendragon.de/tools/javascript/rotateobj/ die Demo der BETA an.

<script>
/** RotateObject (ObjName, AnzPic, PicDir, RotateFaster, Kontrollflag)
@Parameter: 
    ObjName: Zeichenkette
        Name des Objekts (gleich wie id des Bildes)
    AnzPic: Zahl   
        Anzahl der Bilder: mindestens 24
    PicDir: Zeichenkette
        Verzeichnis der Bilder: relative zur HTML-Seite oder als absolute URL
    RotateFaster: Zahl
        Rotatationsgeschwindigkeit: 0.5 bis 20
    Kontrollflag: Zahl 
      1 = Automatische Rotation bei MouseOver
      2 = Kontrolle der Rotationsrichtung über Links für Tastatur 
          bei Mausdrag
  4 = Einmalige Rotation
  1 und 4 lassen sich gleichzeitig nicht nutzen!
**/

new RotateObject('skull2',24,'pic',1,1);<script>

Oder meintest du was anderes? Meintest du automatische Rotation ohne Mausover?

Ansonsten frage mich doch auf http://opera-info.de/forum/thread.php?threadid=21726 weiter. Ich bin als als ehemalige C-Programmiererin viel zu selten hier.

derdefeckter

hallo leude,

also ich such etwas mit dem code(den ich noch poste in dem beitrag) der autorotatet

so denn schieb ich hier mal den code zwischen....

<html>
<head>
<title>Wüfel test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.cube {
    position: absolute;
    top: 100px;
    left: 360px;

}
.face {
    position: absolute;
    width: 200px;
    height: 200px;
    overflow: hidden;
    font-family: monospace;
    font-size: 24px;
}   
.top {
    top: 0;
    left: 89px;
    background: #FFFFFF;
    color: #999;
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
    top: 155px;
    left: 0;
    background: #FFFFFF;
    color: #333;
    -webkit-transform: rotate(15deg) skew(15deg, 15deg);
    -moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.right {
    top: 155px;
    left: 178px;
    background: #FFFFFF;
    color: #666;
    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}
</style>
</head>
<body bgcolor="#000000">
<div class="cube">
<div class="face top">SONSTIGES</div>
<div class="face left">Anschrift!!!</div>
<div class="face right">BILD</div>
</div>
</body>
</html>

mfg ich hoffe ihr helft mir dieen würfel zum drehen zubekommen

mfg

EDIT:
Aber eig möchte ich ja das nur aus diesen 5/6 bildern der Würfel sich dreht also ohne bildsequenzen sondern irgendwie das man das mit 6Bildern(1Bild pro Würfel seite) sich dreht hoffe das geht irgendiwe weil der würfel muss noch Pro seite anklcikar sein

thx

MaBa

Hallo derdefeckter,

mit HTML5 und dem canvas-Element lässt sich die OpenGL-API benutzen (WebGL) um einen rotierenden Würfel darzustellen.

Ich habs mal ausprobiert und im Minefield wird auch alles richtig dargestellt. Bleibt zu hoffen, dass die gängigen Browser die Technologie in naher Zukunft standardmäßig unterstützen.

Der Code für den Würfel umfasst ca. 300 LoC (untexturiert, nur jede Seite eingefärbt), daher wollte ich ihn hier nicht posten.

Viele Grüße,
MaBa

zwutz

MaBa schrieb:

Der Code für den Würfel umfasst ca. 300 LoC (untexturiert, nur jede Seite eingefärbt), daher wollte ich ihn hier nicht posten.

dafür gibts seiten wie paste-it

derdefeckter

Hallo,

also im netz werd ich nicht wirklich schlau ich kriege das einfach nicht hin mit dem drehen des Würfels

also JS ist bei mir echt schwer das noch reinzubekommen im Kopf ich hoffe ihre könnt mir nochmal helfen

mfg

MaBa

Hallo derdefeckter,

hier die WebGL-Version eines drehendes Würfels:

http://paste-it.net/public/h335783/

Allerdings brauchst du die aktuelle Minefield-Version (Ich benutze Version 4.0b4.pre), sowie die zwei Dateien sylvester.js und gUtils.js.

Es gibt übrigens auch ein gutes Tutorial: http://learningwebgl.com/blog/

Viele Grüße,
MaBa

derdefeckter

Hallo,

gibt es auch noch andere möglichkeiten den Würfel zum drehen zubekommen?

mfg

PRIEST

immer noch mit javascript?

Hallo,

es wird keine Copy&Paste - Variante geben, die du - ohne ein paar Anpassungen zu machen - übernehmen kannst. Du hast nun gefühlte 10 Vorschläge wie so ein Würfel funktionieren könnte und solltest dich so langsam für eine entscheiden. Oder du verabschiedest dich von der JS/Canvas-Würfelvision und steigst auf Flash-(Äquivalente) um.

LG

derdefeckter

Hallo,

ja wenn soll das in javascript bleiben

habe mir mittlerweile auch noch eine neue idee ausgedacht also die grad zahlen in der style während eine for schleife immer +1 zuerhöhen dann sollte er sich doch auch drehen oder?

mfg