Dessin 3d en Toile avec HTML+JS

Est-il un cadre et de moteurs qui offrent la possibilité de dessiner des images en 3d sur la Toile?

J'ai l'intention de dessiner des primitives (différentes formes) situé dans un plan:

    var dist = 2;
var hexHalfW = 35;
var lengthX = 20;
var hexR = Math.sqrt(lengthX*lengthX+hexHalfW*hexHalfW);//40.31128874
var hexDiag = 2*hexR;
var hexHeight = hexDiag;
var hexWidth = 2*hexHalfW;
function DrawHex(ctx, x, y)
{               
var cx = x*(hexWidth + dist) - y*(hexWidth + dist)/2;
var cy = y*(hexR + lengthX + dist);
ctx.beginPath();
ctx.moveTo(cx, cy-hexR);
ctx.lineTo(cx+hexHalfW, cy-hexR+lengthX);
ctx.lineTo(cx+hexHalfW, cy+hexR-lengthX);
ctx.lineTo(cx, cy+hexR);
ctx.lineTo(cx-hexHalfW, cy+hexR-lengthX);
ctx.lineTo(cx-hexHalfW, cy-hexR+lengthX);
ctx.lineTo(cx, cy-hexR);
ctx.fill();
}
function draw()
{
var canvas = document.getElementById('tutorial');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
//Pick Hexagon color, this one will be blue
ctx.fillStyle = "rgb(0, 0, 255)";   DrawHex(ctx, 1, 1);
ctx.fillStyle = "rgb(0, 0, 225)";   DrawHex(ctx, 3, 1);
ctx.fillStyle = "rgb(0, 0, 195)";   DrawHex(ctx, 4, 1);
ctx.fillStyle = "rgb(0, 0, 165)";   DrawHex(ctx, 6, 1);
ctx.fillStyle = "rgb(0, 255, 0)";   DrawHex(ctx, 3, 2);
ctx.fillStyle = "rgb(0, 225, 0)";   DrawHex(ctx, 4, 2);
ctx.fillStyle = "rgb(0, 195, 0)";   DrawHex(ctx, 5, 2);
}
}

Je voudrais attirer ces primitives dans "point de vue": plus proche des formes (dans le bas de l'écran) sera plus grande, des formes de "loin" (en haut de l'écran) doit être plus petit...

À cette fin les formes de coordonnées doit être recalculé.

Le deviner, j'ai pu trouver certaines des formules qui permet de recalculer les coordonnées et écrire une des fonctions... mais, probablement, il y a quelques moteurs déjà fait?

Veuillez en informer.

Toutes les pensées sont les bienvenus!

InformationsquelleAutor Budda | 2010-10-21
  1. 5

    Vous voudrez peut-être regarder à mrdoob de l'three.js:

    http://github.com/mrdoob/three.js/

    InformationsquelleAutor michiakig
  2. 15

    Quel que soit le cadre que vous avez choisi, vous devez apprendre à encapsuler vos données dans des objets.

    - Vue simple démo -

    Hexagone

    //Hexagon
function Hexagon(ctx, color, pos, size, scale) {
this.color = color;
this.ctx = ctx;
this.x = pos[0];
this.y = pos[1];
this.z = pos[2] || 0; //scale
this.width = size.width;
this.height = size.height;
}

    Hexagone.tirage

    //Hexagon.draw
Hexagon.prototype.draw = function (x, y) {
if (x == null || y == null) {
x = this.x;
y = this.y; 
}
var width  = this.width  + (this.width  * this.z), //scaled width
height = this.height + (this.height * this.z), //scaled height
cx  = x * (width + dist) - y * (width + dist) / 2,
cy  = y * (3/4 * height + dist),
ctx = this.ctx;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.moveTo(cx, cy - height/2);
ctx.lineTo(cx + width/2, cy - height/4);
ctx.lineTo(cx + width/2, cy + height/4);
ctx.lineTo(cx, cy + height/2);
ctx.lineTo(cx - width/2, cy + height/4);
ctx.lineTo(cx - width/2, cy - height/4);
ctx.lineTo(cx, cy - height/2);  
ctx.fill();
};

    Utilisation

    var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
var dist = 2;
//Create Hexagons
var size = { 
width:  70, 
height: 80 
};
var hexes = [
new Hexagon(ctx, "rgb(0, 0, 255)", [1, 1], size),
new Hexagon(ctx, "rgb(0, 0, 225)", [3, 1], size),
new Hexagon(ctx, "rgb(0, 0, 195)", [4, 1], size),
new Hexagon(ctx, "rgb(0, 0, 165)", [6, 1], size),
new Hexagon(ctx, "rgb(0, 225, 0)", [3, 2], size),
new Hexagon(ctx, "rgb(0, 225, 0)", [4, 2], size),
new Hexagon(ctx, "rgb(0, 195, 0)", [5, 2], size)
];
function draw() {
for (var i = hexes.length; i--;) {
hexes[i].draw();
}
}
    • galambalazs: votre suggestion n'est pas liée à la question. Mais vous avez raison à 100%! Ne prenez pas mon code près de votre coeur... c'est un prototype seulement... Pour être honnête, je suis en train d'apprendre comment travailler avec des objets/classes en JS. Mais Certainement, je vais utiliser 'Hex' classe 🙂
    InformationsquelleAutor gblazex