Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
WorldCube
Auteur Message
Répondre en citant
Message WorldCube 
Salut à tous Mr. Green


J'ai développé une petite librairie, elle se nomme "WorldCube".
Celle-ci permet de créer des cubes sur votre page et de les gérer avec jquery.



Pour intégrer la librairie, il suffit d'intégrer ceci sur votre page :


Lien pastebin : https://pastebin.com/raw/c9HqpMPk
Code:
/*
  Copyright 2017 WorldCube By Flammrock

  Permission is hereby granted, free of charge,
  to any person obtaining a copy of this software
  and associated documentation files (the "Software"),
  to deal in the Software without restriction,
  including without limitation the rights to use, copy,
  modify, merge, publish, distribute, sublicense,
  and/or sell copies of the Software, and to
  permit persons to whom the Software is furnished
  to do so, subject to the following conditions:

  The above copyright notice and this permission notice
  shall be included in all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY
  OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
  LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
  EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
  FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR
  THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

var utils = {
  hexToRgbA: function(hex,a) {
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+a+')';
    }
    utils.rgbToRgbA(hex);
  },
  rgbToRgbA: function(rgb,a) {
    var c = rgb.replace(/rgb/i, "rgba");
    if (c!=rgb) {
      c = c.replace(/\)/i,','+a+')');
      return c;
    }
    //throw new Error('Bad Color');
  }
};

$('head').append(
  '<style id="baseOfAnim">'+
    '@keyframes rotateX {'+
      '0% {transform: translate(-50%,-50%) rotateY(0deg);}'+
      '100% {transform: translate(-50%,-50%) rotateY(360deg);}'+
    '}'+

    '@keyframes rotateY {'+
      '0% {transform: translate(-50%,-50%) rotateX(0deg);}'+
      '100% {transform: translate(-50%,-50%) rotateX(360deg);}'+
    '}'+

    '@keyframes rotateXY {'+
      '0% {transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg);}'+
      '100% {transform: translate(-50%,-50%) rotateY(360deg) rotateX(360deg);}'+
    '}'+

    '.rotateX {'+
      'animation: rotateX 5s linear infinite;'+
    '}'+
    '.rotateY {'+
      'animation: rotateY 5s linear infinite;'+
    '}'+
    '.rotateXY {'+
      'animation: rotateXY 5s linear infinite;'+
    '}'+

  '</style>'
)


var colorConsole = {
  _1: [
      'background: #96E9FF',
      'color: white',
      'display: block',
      'font-size: 15px'
  ].join(';'),
  _2: [
      'background: #68DFFF',
      'color: white',
      'display: block',
      'font-size: 15px'
  ].join(';'),
  _3: [
      'background: #00C9FF',
      'color: white',
      'display: block',
      'font-size: 15px'
  ].join(';'),
};
console.log('%c  %c  %c  WorldCube | Div | By Flammrock  %c  %c  ',colorConsole._1,colorConsole._2,colorConsole._3,colorConsole._2,colorConsole._1);


var worldCube = function(s) {
  this.worldCubeId = s.id || 'worldCube';
  this.positionMode = s.positionMode || 'fixed';
  this.top = s.top || '0px';
  if (s.inside) {
    this.parentId = '#'+s.inside;
  } else {
    this.parentId='body';
  }
  this.nbCube = 0;
  this.cube = {};
  this.create();
};

worldCube.prototype.create = function () {
  if (!document.getElementById(this.worldCubeId)) {
    $('head').append(
      '<style>'+
        '#'+this.worldCubeId+' {'+
          'position: '+this.positionMode+';'+
          'left: 0;'+
          'top: '+this.top+';'+
          'width: 100%;'+
          'height: 100%;'+
          'perspective: 1000px;'+
        '}'+
        '#camera_'+this.worldCubeId+' {'+
          'position: absolute;'+
          'top:0;'+
          'left:0;'+
          'transform-style: preserve-3d;'+
        '}'+
      '</style>'
    );
    $(this.parentId).append(
      '<div id="'+this.worldCubeId+'"><div id="camera_'+this.worldCubeId+'"></div>'+
      '</div>'
    );
    this.camera.parent = this;
  }
};
worldCube.prototype.addCube = function (s) {
  this.id = s.id || 'cube_'+this.nbCube;
  this.nbCube++;
  s.id=this.id;
  s.parent=this;
  this.cube[this.id] = new cube(s);
};


worldCube.prototype.camera = {
  move: function(s) {
    s.x=s.x||'0px';
    s.y=s.y||'0px';
    s.z=s.z||'0px';
    s.rz=s.rz||'0deg';
    s.ry=s.ry||'0deg';


    s.v = {
      x:5,
      z:5,
      y:5
    };

    if (s.rz>0){s.v.z=-5;s.v.x=-15}else{s.v.z=-15;s.v.x=-15;}
    this.orientation.x=s.rz%Math.PI;
    console.log(this.orientation.x);
    s.obj=this;
    this.position = {
      x:parseFloat(s.obj.position.x.replace(/[^0-9.-]/g,''))+parseFloat(s.x.replace(/[^0-9.-]/g,''))+s.x.replace(/[0-9.-]/g,''),
      y:parseFloat(s.obj.position.y.replace(/[^0-9.-]/g,''))+parseFloat(s.y.replace(/[^0-9.-]/g,''))+s.y.replace(/[0-9.-]/g,''),//translateZ('+s.rz*s.v.z+'px) translateX('+s.rz*-s.v.x+'px)
      z:parseFloat(s.obj.position.z.replace(/[^0-9.-]/g,''))+parseFloat(s.z.replace(/[^0-9.-]/g,''))+s.z.replace(/[0-9.-]/g,'')// rotate3d(0,1,0,'+s.rz+'deg)
    };
    $('#camera_'+this.parent.worldCubeId).css('transform','perspective-origin: 0% 50%');
    $('#camera_'+this.parent.worldCubeId).css('transform','translateX('+this.position.x+') translateY('+this.position.y+') translateZ('+this.position.z+') translateX('+s.rz*s.v.x+'px) rotate3d(0,1,0,'+s.rz+'deg)');
  },
  position: {
    x:'0px',
    y:'0px',
    z:'0px'
  },
  velocity: {
    x:0,
    y:0,
    z:0
  },
  orientation: {
    x:0,
    y:0,
    z:0
  },
  mouse: {
    x:0,
    y:0
  },
  interval:function(){},
  controls: function(s) {
    s.obj=this;
    s.speed=s.speed||20;
    s.targetRotationMouse=s.targetRotationMouse||false;
    $(document).keydown(function(e) {
      if (e.keyCode==s.left) {
        s.obj.velocity.x=s.speed;
      }
      if (e.keyCode==s.right) {
        s.obj.velocity.x=-s.speed;
      }
      if (e.keyCode==s.top) {
        s.obj.velocity.z=-s.speed;
      }
      if (e.keyCode==s.bottom) {
        s.obj.velocity.z=s.speed;
      }
    });
    $(document).keyup(function(e) {
      if (e.keyCode==s.left) {
        s.obj.velocity.x=0;
      }
      if (e.keyCode==s.right) {
        s.obj.velocity.x=0;
      }
      if (e.keyCode==s.top) {
        s.obj.velocity.z=0;
      }
      if (e.keyCode==s.bottom) {
        s.obj.velocity.z=0;
      }
    });

    if (s.targetRotationMouse) {
      $(document).mousemove(function(e){
        s.obj.mouse.x=e.clientX;
        s.obj.mouse.y=e.clientY;
      });
    }
    n=0;
    s.obj.interval = setInterval(function(){
      var angle =n* Math.PI * 2 / 5;
      var z = (s.obj.mouse.x*180/window.innerWidth)-90;
      var y = Math.sin(angle) * 200;
      if (s.targetRotationMouse) {
        s.obj.move({
          x:s.obj.velocity.x+'px',
          y:s.obj.velocity.y+'px',
          z:s.obj.velocity.z+'px',
          rz:z,
          ry:'0'+'deg'
        });
      } else {
        s.obj.move({
          x:s.obj.velocity.x+'px',
          y:s.obj.velocity.y+'px',
          z:s.obj.velocity.z+'px'
        });
      }
    },20);
  }
};


var cube = function(s) {
  this.parent=s.parent;
  this.id=s.id;
  this.size = {};
  this.size.x = {};
  this.size.y = {};
  this.size.z = {};

  this.animate.parent = this;

  this.distanceFace=s.distanceFace||0;

  if (s.size.x) {
    this.size.x.tmp = s.size.x || '200px';
    if (s.size.y) {
      this.size.y.tmp = s.size.y || '200px';
    } else {
      this.size.y.tmp = s.size.x || '200px';
    }
    if (s.size.z) {
      this.size.z.tmp = s.size.z || '200px';
    } else {
      this.size.z.tmp = s.size.x || '200px';
    }
  }
  if (s.size.y) {
    this.size.y.tmp = s.size.y || '200px';
    if (s.size.x) {
      this.size.x.tmp = s.size.x || '200px';
    } else {
      this.size.x.tmp = s.size.y || '200px';
    }
    if (s.size.z) {
      this.size.z.tmp = s.size.z || '200px';
    } else {
      this.size.z.tmp = s.size.y || '200px';
    }
  }
  if (s.size.z) {
    this.size.z.tmp = s.size.z || '200px';
    if (s.size.x) {
      this.size.x.tmp = s.size.x || '200px';
    } else {
      this.size.x.tmp = s.size.z || '200px';
    }
    if (s.size.y) {
      this.size.y.tmp = s.size.y || '200px';
    } else {
      this.size.y.tmp = s.size.z || '200px';
    }
  }

  if (!s.size.x && !s.size.y && !s.size.z) {
    this.size.x.tmp = s.size || '200px';
    this.size.y.tmp = s.size || '200px';
    this.size.z.tmp = s.size || '200px';
  }

  this.size.x.part1 = parseFloat(this.size.x.tmp.replace(/[^0-9.-]/g,''));
  this.size.x.part2 = this.size.x.tmp.replace(/[0-9.-]/g,'');

  this.size.y.part1 = parseFloat(this.size.y.tmp.replace(/[^0-9.-]/g,''));
  this.size.y.part2 = this.size.y.tmp.replace(/[0-9.-]/g,'');

  this.size.z.part1 = parseFloat(this.size.z.tmp.replace(/[^0-9.-]/g,''));
  this.size.z.part2 = this.size.z.tmp.replace(/[0-9.-]/g,'');

  this.size.f = {};
  this.size.f._1 = {x1:this.size.x.part1,x2:this.size.x.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._2 = {x1:this.size.x.part1,x2:this.size.x.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._3 = {x1:this.size.z.part1,x2:this.size.z.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._4 = {x1:this.size.z.part1,x2:this.size.z.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._5 = {x1:this.size.z.part1,x2:this.size.z.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._6 = {x1:this.size.z.part1,x2:this.size.z.part2,y1:this.size.y.part1,y2:this.size.y.part2}


  this.speedSpawn = s.speedSpawn || '1s';
  this.distanceSpawn = s.distanceSpawn || 200;
  this.alpha = s.alpha || '0.5';
  this.background = utils.hexToRgbA(s.background || '#0055ff',this.alpha);

  this.offsettmp = {
    x:s.position.x||'0px',
    y:s.position.y||'0px',
    z:s.position.z||'0px'
  };
  this.offset = {
    x:s.position.x||(window.innerWidth/2-this.size.x.part1/2)+'px',
    y:s.position.y||(window.innerHeight/2-this.size.y.part1/2)+'px',
    z:s.position.z||'-100px'
  };
  this.orientation = {
    x:'0deg',
    y:'0deg'
  };
  if (document.getElementById(this.parent.worldCubeId) && !document.getElementById(this.id)) {
    $('head').append(
      '<style id="cubeStyle_'+this.id+'">'+
        '#'+this.id+' {'+
          'position: absolute;'+
          'left: 50%;'+
          'top: 50%;'+
          'width: '+this.size.x.part1+this.size.x.part2+';'+
          'height: '+this.size.y.part1+this.size.y.part2+';'+
          'transform-style: preserve-3d;'+
        '}'+
        '.face_'+this.id+' {'+
          'position: absolute;'+
          'width: '+this.size.x.part1+this.size.x.part2+';'+
          'height: '+this.size.y.part1+this.size.y.part2+';'+
          'border: 2px solid black;'+
          'text-align: center;'+
          'background: '+this.background+';'+
        '}'+

        '@keyframes f1_'+this.id+' {'+
          '0% {transform: translateZ('+(this.size.z.part1/2+this.distanceSpawn)+this.size.z.part2+');}'+
          '100% {transform: translateZ('+(this.size.z.part1/2+this.distanceFace)+this.size.z.part2+');}'+
        '}'+
        '@keyframes f2_'+this.id+' {'+
          '0% {transform: translateZ(-'+(this.size.z.part1/2+this.distanceSpawn)+this.size.z.part2+') rotateY(180deg);}'+
          '100% {transform: translateZ(-'+(this.size.z.part1/2+this.distanceFace)+this.size.z.part2+') rotateY(180deg);}'+
        '}'+
        '@keyframes f3_'+this.id+' {'+
          '0% {transform: translateZ(-'+(this.size.z.part1/2)+this.size.z.part2+') translateX(-'+(this.distanceSpawn)+this.size.x.part2+') rotateY(-90deg);}'+
          '100% {transform: translateZ(-'+(this.size.z.part1/2)+this.size.z.part2+') translateX(-'+this.distanceFace+'px) rotateY(-90deg);}'+
        '}'+
        '@keyframes f4_'+this.id+' {'+
          '0% {transform: translateX('+(this.size.x.part1-this.size.z.part1/2+this.distanceSpawn)+this.size.x.part2+') rotateY(90deg);}'+
          '100% {transform: translateX('+(this.size.x.part1-this.size.z.part1/2)+this.size.x.part2+') translateX('+this.distanceFace+'px) rotateY(90deg);}'+
        '}'+
        '@keyframes f5_'+this.id+' {'+
          '0% {transform: translateY(-'+(this.size.z.part1/2+this.distanceSpawn)+this.size.y.part2+') rotateX(90deg);}'+
          '100% {transform: translateY(-'+(this.size.z.part1/2+this.distanceFace)+this.size.y.part2+') rotateX(90deg);}'+
        '}'+
        '@keyframes f6_'+this.id+' {'+
          '0% {transform: translateY('+(this.size.y.part1-this.size.z.part1/2+this.distanceSpawn)+this.size.y.part2+') rotateX(-90deg);}'+
          '100% {transform: translateY('+(this.size.y.part1-this.size.z.part1/2+this.distanceFace)+this.size.y.part2+') rotateX(-90deg);}'+
        '}'+


        '.f1_'+this.id+' {'+
          'transform: translateZ('+(this.size.z.part1/2+this.distanceFace)+this.size.z.part2+');'+
          'animation: f1_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f2_'+this.id+' {'+
          'transform: translateZ(-'+(this.size.z.part1/2+this.distanceFace)+this.size.z.part2+') rotateY(180deg);'+
          'animation: f2_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f3_'+this.id+' {'+
          'width: '+this.size.f._3.x1+this.size.f._3.x2+';'+
          'transform-origin: left;'+
          'transform: translateZ(-'+(this.size.z.part1/2)+this.size.z.part2+') translateX(-'+this.distanceFace+'px) rotateY(-90deg);'+
          'animation: f3_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f4_'+this.id+' {'+
          'width: '+this.size.f._4.x1+this.size.f._4.x2+';'+
          'transform-origin: center;'+
          'transform: translateX('+(this.size.x.part1-this.size.z.part1/2)+this.size.x.part2+') translateX('+this.distanceFace+'px) rotateY(90deg);'+
          'animation: f4_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f5_'+this.id+' {'+
          'height: '+this.size.f._5.x1+this.size.f._5.x2+';'+
          'transform: translateY(-'+(this.size.z.part1/2+this.distanceFace)+this.size.y.part2+') rotateX(90deg);'+
          'animation: f5_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f6_'+this.id+' {'+
          'height: '+this.size.f._6.x1+this.size.f._6.x2+';'+
          'transform: translateY('+(this.size.y.part1-this.size.z.part1/2+this.distanceFace)+this.size.y.part2+') rotateX(-90deg);'+
          'animation: f6_'+this.id+' '+this.speedSpawn+';'+
        '}'+
      '</style>'
    );
    $('#camera_'+this.parent.worldCubeId).append(
      '<div id="'+this.id+'">'+
        '<div class="f1_'+this.id+' face_'+this.id+'">DEVANT</div>'+
        '<div class="f2_'+this.id+' face_'+this.id+'">ARRIERE</div>'+
        '<div class="f3_'+this.id+' face_'+this.id+'">GAUCHE</div>'+
        '<div class="f4_'+this.id+' face_'+this.id+'">DROITE</div>'+
        '<div class="f5_'+this.id+' face_'+this.id+'">HAUT</div>'+
        '<div class="f6_'+this.id+' face_'+this.id+'">BAS</div>'+
      '</div>'
    );

    this.f = $($('.face_'+this.id));
    this.f1 = $($('#'+this.id).find('.face_'+this.id)[0]);
    this.f2 = $($('#'+this.id).find('.face_'+this.id)[1]);
    this.f3 = $($('#'+this.id).find('.face_'+this.id)[2]);
    this.f4 = $($('#'+this.id).find('.face_'+this.id)[3]);
    this.f5 = $($('#'+this.id).find('.face_'+this.id)[4]);
    this.f6 = $($('#'+this.id).find('.face_'+this.id)[5]);

    this.c = $($('#'+this.id));
  };

  this.position({
    x:this.offset.x,
    y:this.offset.y,
    z:this.offset.z
  });
};
cube.prototype.position = function(s) {
  if (s.x) {
    this.offsettmp.x=s.x;
    this.offset.x=(parseFloat(this.offsettmp.x.replace(/[^0-9.-]/g,''))+window.innerWidth/2-this.size.x.part1/2)+'px';
    this.c.css('left',this.offset.x);
  }
  if (s.y) {
    this.offsettmp.y=s.y;
    this.offset.y=(parseFloat(this.offsettmp.y.replace(/[^0-9.-]/g,''))+window.innerHeight/2-this.size.y.part1/2)+'px';
    this.c.css('top',this.offset.y);
  }
  if (s.z) {
    this.offsettmp.z=s.z;
    this.offset.z=(parseFloat(this.offsettmp.z.replace(/[^0-9.-]/g,''))-100)+'px';
    this.c.css('transform','translateZ('+this.offset.z+')');
  }
};
cube.prototype.rotate = function(s) {
  s.x = s.x || this.orientation.x;
  s.y = s.y || this.orientation.y;

  this.orientation.x = s.x.replace(/[^0-9.-]/g,'')+'deg';
  this.orientation.y = s.y.replace(/[^0-9.-]/g,'')+'deg';

  this.c.css('transform','rotateX('+this.orientation.x+') rotateY('+this.orientation.y+')');
};
cube.prototype.reSize = function(s) {
  if (s.x) {
    this.size.x.part1 = parseFloat(s.x.replace(/[^0-9.-]/g,''));
    this.size.x.part2 = s.x.replace(/[0-9.-]/g,'');
    this.size.x.tmp = s.x;
    if (this.size.x.part1<0) {this.size.x.part1=0}
    this.position({
      x:parseFloat(this.offsettmp.x.replace(/[^0-9.-]/g,''))+'px'
    });
  }
  if (s.y) {
    this.size.y.part1 = parseFloat(s.y.replace(/[^0-9.-]/g,''));
    this.size.y.part2 = s.y.replace(/[0-9.-]/g,'');
    this.size.y.tmp = s.y;
    if (this.size.y.part1<0) {this.size.y.part1=0}
    this.position({
      y:parseFloat(this.offsettmp.y.replace(/[^0-9.-]/g,''))+'px'
    });
  }
  if (s.z) {
    this.size.z.part1 = parseFloat(s.z.replace(/[^0-9.-]/g,''));
    this.size.z.part2 = s.z.replace(/[0-9.-]/g,'');
    this.size.z.tmp = s.z;
    if (this.size.z.part1<0) {this.size.z.part1=0}
    this.position({
      z:parseFloat(this.offsettmp.z.replace(/[^0-9.-]/g,''))+'px'
    });
  }

  this.size.f._1 = {x1:this.size.x.part1,x2:this.size.x.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._2 = {x1:this.size.x.part1,x2:this.size.x.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._3 = {x1:this.size.z.part1,x2:this.size.z.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._4 = {x1:this.size.z.part1,x2:this.size.z.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._5 = {x1:this.size.z.part1,x2:this.size.z.part2,y1:this.size.y.part1,y2:this.size.y.part2}
  this.size.f._6 = {x1:this.size.z.part1,x2:this.size.z.part2,y1:this.size.y.part1,y2:this.size.y.part2}

  if (s.x || s.y || s.z) {
    $('#cubeStyle_'+this.id).remove();
    $('head').append(
      '<style id="cubeStyle_'+this.id+'">'+
        '@keyframes rotate {'+
          '0% {transform: translate(-50%,-50%) rotateY(0deg);}'+
          '100% {transform: translate(-50%,-50%) rotateY(360deg);}'+
        '}'+

        '#'+this.id+' {'+
          'position: absolute;'+
          'left: 50%;'+
          'top: 50%;'+
          'width: '+this.size.x.part1+this.size.x.part2+';'+
          'height: '+this.size.y.part1+this.size.y.part2+';'+
          'transform-style: preserve-3d;'+
        '}'+
        '.face_'+this.id+' {'+
          'position: absolute;'+
          'width: '+this.size.x.part1+this.size.x.part2+';'+
          'height: '+this.size.y.part1+this.size.y.part2+';'+
          'border: 2px solid black;'+
          'text-align: center;'+
          'background: '+this.background+';'+
        '}'+

        '@keyframes f1_'+this.id+' {'+
          '0% {transform: translateZ('+(this.size.z.part1/2+this.distanceSpawn)+this.size.z.part2+');}'+
          '100% {transform: translateZ('+(this.size.z.part1/2)+this.size.z.part2+');}'+
        '}'+
        '@keyframes f2_'+this.id+' {'+
          '0% {transform: translateZ(-'+(this.size.z.part1/2+this.distanceSpawn)+this.size.z.part2+') rotateY(180deg);}'+
          '100% {transform: translateZ(-'+(this.size.z.part1/2)+this.size.z.part2+') rotateY(180deg);}'+
        '}'+
        '@keyframes f3_'+this.id+' {'+
          '0% {transform: translateZ(-'+(this.size.z.part1/2)+this.size.z.part2+') translateX(-'+(this.distanceSpawn)+this.size.x.part2+') rotateY(-90deg);}'+
          '100% {transform: translateZ(-'+(this.size.z.part1/2)+this.size.z.part2+') translateX(0) rotateY(-90deg);}'+
        '}'+
        '@keyframes f4_'+this.id+' {'+
          '0% {transform: translateX('+(this.size.x.part1-this.size.z.part1/2+this.distanceSpawn)+this.size.x.part2+') rotateY(90deg);}'+
          '100% {transform: translateX('+(this.size.x.part1-this.size.z.part1/2)+this.size.x.part2+') rotateY(90deg);}'+
        '}'+
        '@keyframes f5_'+this.id+' {'+
          '0% {transform: translateY(-'+(this.size.z.part1/2+this.distanceSpawn)+this.size.y.part2+') rotateX(90deg);}'+
          '100% {transform: translateY(-'+(this.size.z.part1/2)+this.size.y.part2+') rotateX(90deg);}'+
        '}'+
        '@keyframes f6_'+this.id+' {'+
          '0% {transform: translateY('+(this.size.y.part1-this.size.z.part1/2+this.distanceSpawn)+this.size.y.part2+') rotateX(-90deg);}'+
          '100% {transform: translateY('+(this.size.y.part1-this.size.z.part1/2)+this.size.y.part2+') rotateX(-90deg);}'+
        '}'+


        '.f1_'+this.id+' {'+
          'transform: translateZ('+(this.size.z.part1/2)+this.size.z.part2+');'+
          'animation: f1_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f2_'+this.id+' {'+
          'transform: translateZ(-'+(this.size.z.part1/2)+this.size.z.part2+') rotateY(180deg);'+
          'animation: f2_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f3_'+this.id+' {'+
          'width: '+this.size.f._3.x1+this.size.f._3.x2+';'+
          'transform-origin: left;'+
          'transform: translateZ(-'+(this.size.z.part1/2)+this.size.z.part2+') rotateY(-90deg);'+
          'animation: f3_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f4_'+this.id+' {'+
          'width: '+this.size.f._4.x1+this.size.f._4.x2+';'+
          'transform-origin: center;'+
          'transform: translateX('+(this.size.x.part1-this.size.z.part1/2)+this.size.x.part2+') rotateY(90deg);'+
          'animation: f4_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f5_'+this.id+' {'+
          'height: '+this.size.f._5.x1+this.size.f._5.x2+';'+
          'transform: translateY(-'+(this.size.z.part1/2)+this.size.y.part2+') rotateX(90deg);'+
          'animation: f5_'+this.id+' '+this.speedSpawn+';'+
        '}'+
        '.f6_'+this.id+' {'+
          'height: '+this.size.f._6.x1+this.size.f._6.x2+';'+
          'transform: translateY('+(this.size.y.part1-this.size.z.part1/2)+this.size.y.part2+') rotateX(-90deg);'+
          'animation: f6_'+this.id+' '+this.speedSpawn+';'+
        '}'+
      '</style>'
    );
  }
};
cube.prototype.animate = {
  position: function(s) {
    s.duration = s.duration || 1000;
    s.onEnd = s.onEnd || function(){};

    s.obj = this;

    this.parent.offsettmp.x = s.x || this.parent.offsettmp.x;
    this.parent.offsettmp.y = s.y || this.parent.offsettmp.y;
    this.parent.offsettmp.z = s.z || this.parent.offsettmp.z;

    this.parent.offset.x=(parseFloat(this.parent.offsettmp.x.replace(/[^0-9.-]/g,''))+window.innerWidth/2-this.parent.size.x.part1/2)+'px';
    this.parent.offset.y=(parseFloat(this.parent.offsettmp.y.replace(/[^0-9.-]/g,''))+window.innerHeight/2-this.parent.size.y.part1/2)+'px';
    this.parent.offset.z=(parseFloat(this.parent.offsettmp.z.replace(/[^0-9.-]/g,''))-100)+'px';


    this.parent.c.css('transition','transform '+(s.duration/1000)+'s ease, top '+(s.duration/1000)+'s ease, left '+(s.duration/1000)+'s ease');
    setTimeout(function(){
      s.obj.parent.c.css({transform:'translateZ('+s.z+')',left:s.obj.parent.offset.x,top:s.obj.parent.offset.y});
      setTimeout(function(){
        s.obj.parent.c.css('transition','transform 0s ease');
        setTimeout(function(){
          s.onEnd();
        },500);
      },s.duration+100);
    },100);
  },
  rotate: function(s) {
    s.duration = s.duration || 1000;
    s.onEnd = s.onEnd || function(){};

    s.x = s.x || this.parent.orientation.x;
    s.y = s.y || this.parent.orientation.y;

    this.parent.orientation.x = s.x.replace(/[^0-9.-]/g,'')+'deg';
    this.parent.orientation.y = s.y.replace(/[^0-9.-]/g,'')+'deg';

    s.obj = this;

    this.parent.c.css('transition','transform '+(s.duration/1000)+'s ease');
    setTimeout(function(){
      s.obj.parent.c.css({transform:'translateZ('+s.obj.parent.offsettmp.z+') rotateX('+s.obj.parent.orientation.x+') rotateY('+s.obj.parent.orientation.y+')'});
      setTimeout(function(){
        s.obj.parent.c.css('transition','transform 0s ease');
        s.onEnd();
      },s.duration+100);
    },100);
  },
  reSize: function(s) {
    s.jx = this.parent.size.x.part1;
    s.jy = this.parent.size.y.part1;
    s.jz = this.parent.size.z.part1;

    s.onEnd = s.onEnd || function(){};

    s.obj = this;

    s.x = parseFloat(s.x.replace(/[^0-9.-]/g,'')) || s.jx;
    s.y = parseFloat(s.y.replace(/[^0-9.-]/g,'')) || s.jy;
    s.z = parseFloat(s.z.replace(/[^0-9.-]/g,'')) || s.jz;

    s.okx = false;
    s.oky = false;
    s.okz = false;

    s.count=0;

    s.i = setInterval(function () {
      if (s.x-10>s.obj.parent.size.x.part1 && !s.okx) {
        s.obj.parent.reSize({
          x:(s.jx+s.count*10)+'px'
        });
      } else if (s.x+10<s.obj.parent.size.x.part1 && !s.okx) {
        s.obj.parent.reSize({
          x:(s.jx-s.count*10)+'px'
        });
      } else {
        s.okx = true;
      }

      if (s.y-10>s.obj.parent.size.y.part1 && !s.oky) {
        s.obj.parent.reSize({
          y:(s.jy+s.count*10)+'px'
        });
      } else if (s.y+10<s.obj.parent.size.y.part1 && !s.oky) {
        s.obj.parent.reSize({
          y:(s.jy-s.count*10)+'px'
        });
      } else {
        s.oky = true;
      }

      if (s.z-10>s.obj.parent.size.z.part1 && !s.okz) {
        s.obj.parent.reSize({
          z:(s.jz+s.count*10)+'px'
        });
      } else if (s.z+10<s.obj.parent.size.z.part1 && !s.okz) {
        s.obj.parent.reSize({
          z:(s.jz-s.count*10)+'px'
        });
      } else {
        s.okz = true;
      }

      if (s.okx && s.oky && s.okz) {clearInterval(s.i);s.onEnd()}

      s.count++;
    },20);
  },
  css: function(st,d,t,c) {
    st=st||{},d=d||1000,c=c||function(){},t=t||'all';
    if (st.background) {
      st.background = utils.hexToRgbA(st.background,this.parent.alpha);
    }
    if (st.backgroundColor) {
      st.backgroundColor = utils.hexToRgbA(st.backgroundColor,this.parent.alpha);
    }
    var obj = this;
    $('.face_'+obj.parent.id).css('transition',t+' '+(d/1000)+'s ease');
    setTimeout(function(){
      $('.face_'+obj.parent.id).css(st);
      setTimeout(function(){
        $('.face_'+obj.parent.id).css('transition',t+' 0s ease');
        setTimeout(function(){
          c();
        },50);
      },d+100);
    },100);
  }
};



ATTENTION : cette librairie fonctionne avec Jquery !
Vous devez aussi intégrer Jquery sur votre page






Tous d'abord, vous devez générer votre monde comme ceci :

Code:
[lang=javascript]
var monPremierMonde = new worldCube({
  id:'salutCeciEtPasTresImportantOk'
});


Vous devez absolument indiquer un ID pour votre monde !!
Voici les arguments :


id : permet de nommer votre monde, comme cela représente un id, les caractères spéciaux sont interdis !
Défaut : worldCube


positionMode : permet de modifier la propriété css position de votre monde.
fixed : permet de fixer votre monde, si vous scrollez, cela n'affectera pas le monde
absolute : si vous scrollez, le monde sera altéré par ce mouvement
Défaut : fixed


inside : permet de définir le container parent du monde
Défaut : body
REMARQUE : si vous utilisez cette argument : NE PAS METTRE DE #


top : permet de modifier l'origine de la perspective
Défaut : 0px


Remarque IMPORTANTE : si vous souhaitez conserver l'origine de la perceptive au centre de l'écran :
Rajoutez cette ligne :
Code:
[lang=javascript]$('#camera_'+id).css('transform','translateY(-'+(parseFloat($('body').scrollTop()))+'px)');

Veuillez remplacer id par l'id de votre monde !!
exemple :
Code:
[lang=javascript]$('#camera_salutCeciEtPasTresImportantOk').css('transform','translateY(-'+(parseFloat($('body').scrollTop()))+'px)');





Pour pouvoir ajouter un cube, il faut tout d'abord créer un monde Okay

Code:
[lang=javascript]monPremierMonde.addCube({
  id:'monPremierCube',
  size: {
    x: 200+'px',
    y: 200+'px',
    z: 200+'px'
  },
  position: {
    x: -window.innerWidth*20/100+200+'px',
    y: -window.innerHeight/2+150+100+'px',
    z: '-100px'
  },
  alpha: '0.7',
  background: '#00C9FF',
  speedSpawn: '1s',
  distanceSpawn: 100,
  distanceFace: 10
});



Comme pour la création d'un monde, il faut nommer à l'aide d'un id notre cube Mr. Green
Pour ceux que se demande d'où vient le monPremierMonde, cela correspond au nom de la variable qui contient notre monde


Voici les arguments :

id : permet de nommer le cube, comme cela représente un id : les caractères spéciaux sont interdis !
Défaut : 'cube_'+this.nbCube
this.nbCube correspond au nombre de cube


size : correspond à un objet qui contient les coordonnées de dimensions du cube (x,y,z)
Défaut : {x:'200px',y:'200px',z:'200px'}


position : correspond à un objet qui contient les coordonnées de positions du cube (x,y,z)
Défaut : {x:'0px',y:'0px',z:'0px'}
REMARQUE : le point d'encrage se situe au centre de l'écran


alpha : permet de définir la transparence des faces du cube dans l'intervalle [0;1]
Défaut : 0.5


background : permet de définir la couleur des faces du cube
Défaut : #0055ff


distanceFace : permet de définir la distance entre chaque face
Défaut : 0


// Animation d'apparition du cube dans le monde :

speedSpawn : permet de définir le temps de l'animation du cube
Défaut : 1s


distanceSpawn : permet de définir la distance des faces lors de l'animation
Défaut : 200




Comme je l'ai dit tout au début, vous pouvez contrôler chaque face du cube (ou tout le cube, ou toutes les faces) avec JQUERY !
Je reprends ici l'exemple :

Remplacez ici [JQUERY] par la méthode que vous voulez utiliser !

monPremierMonde.cube['monPremierCube'].c. [JQUERY]
monPremierMonde.cube['monPremierCube'].f. [JQUERY]
monPremierMonde.cube['monPremierCube'].f1. [JQUERY]
monPremierMonde.cube['monPremierCube'].f2. [JQUERY]
monPremierMonde.cube['monPremierCube'].f3. [JQUERY]
monPremierMonde.cube['monPremierCube'].f4. [JQUERY]
monPremierMonde.cube['monPremierCube'].f5. [JQUERY]
monPremierMonde.cube['monPremierCube'].f6. [JQUERY]

ex :
Code:
[lang=javascript]for (var i=0;i<6;i++) {
  monPremierMonde.cube['monPremierCube']['f'+(i+1)].html('JE SUIS LA FACE N°'+i);
};

Ceci permet de remplacer le texte par défaut des faces


f1 : DEVANT
f2 : ARRIERE
f3 : GAUCHE
f4 : DROITE
f5 : HAUT
f6 : BAS



LES MÉTHODES :

Voici comment utiliser les méthodes :
Remplacez ici [MÉTHODE] par la méthode que vous voulez utiliser !

monPremierMonde.cube['monPremierCube']. [MÉTHODE]

position : permet de modifier la position du cube dans le monde.
Ex :
Code:
[lang=javascript]monPremierMonde.cube['monPremierCube'].position({
  x:'200'+'px',
  y:'-400'+'px',
  z:'-1000'+'px'
});



rotate : permet de modifier l'orientation du cube dans le monde.
Code:
[lang=javascript]monPremierMonde.cube['monPremierCube'].rotate({
  y:'90'+'deg',
  x:'0'+'deg'
});


reSize : permet de modifier la taille du cube dans le monde.
Code:
[lang=javascript]monPremierMonde.cube['monPremierCube'].reSize({
   x:'200'+'px',
  y:'200'+'px',
  z:'1000'+'px'
});




animate.position : permet d'animer la méthode position

animate.rotate : permet d'animer la méthode rotate

animate.reSize : permet d'animer la méthode reSize


PETITE ASTUCE :

Si vous souhaitez ajouter une rotation infinie à votre cube, procédez comme cela en modifiant à votre guise les valeurs de durations, l'angle...etc
Code:
[lang=javascript]$('head').append(
  '<style>'+
    '@keyframes rotateXYex1 {'+
      '0% {transform: translate(-50%,-50%) translateZ(-1000px) rotateY(0deg) rotateX(0deg);}'+
     '100% {transform: translate(-50%,-50%) translateZ(-1000px) rotateY(360deg) rotateX(360deg);}'+
    '}'+
    '.rotateXYex1 {'+
      'animation: rotateXYex1 5s linear infinite;'+
    '}'+
  '</style>'
);
monPremierMonde.cube['monPremierCube'].c.addClass('rotateXYex1');








En réalité la caméra est déjà intégré dans le monde xDD
Je voulais juste nommer les différentes parties de la même façon Mr. Green


Vous remarquerez que je n'ai pas totalement finis de coder cette partie

Donc, il suffit de définir les contrôles de la caméra :
Code:
[lang=javascript]monPremierMonde.camera.controls({
  top:'40',
  bottom:'38',
  left:'37',
  right:'39',
  speed:10,
  targetRotationMouse:false
});


Voici les arguments :

http://www.asquare.net/javascript/tests/KeyCode.html

top : permet de définir la touche du clavier qui fera avancer (en Z) la caméra.
REMARQUE : vous devez indiquer le keycode de la touche !

left : permet de définir la touche du clavier qui fera avancer (en X) la caméra.
REMARQUE : vous devez indiquer le keycode de la touche !

right : permet de définir la touche du clavier qui fera reculer (en X) la caméra.
REMARQUE : vous devez indiquer le keycode de la touche !

bottom : permet de définir la touche du clavier qui fera reculer (en Z) la caméra.
REMARQUE : vous devez indiquer le keycode de la touche !


speed : permet de définir la vélocité de la caméra (définir le vecteur de vitesse)
Défaut : 20

targetRotationMouse : permet d'activer la vue "FPS"
Défaut : false
ATTENTION : cette fonctionnalité est en développement



Si vous voulez téléporter la caméra dans le monde, utilisez cette méthode :

monPremierMonde.camera.move

EXEMPLE :

Code:
[lang=javascript]monPremierMonde.camera.move({
  x:'300px',
  y:'100px';
  z:'1000px'
});










______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Message Publicité 
PublicitéSupprimer les publicités ?


Répondre en citant
Message WorldCube 
Hmm, l'optimisation, voilà Mr. Green.
ça pourrait donner quoi avec du WebGL ?




______________________________________________________
Partager permet le savoir. Le savoir permet de partager de nouveau savoirs.
Répondre en citant
Message WorldCube 
TSnake41 a écrit:
Hmm, l'optimisation, voilà Mr. Green.
ça pourrait donner quoi avec du WebGL ?


C'est assez optimiser et j'ai fais exprès de ne pas utiliser le WebGL.
Je voulais que ce soit contrôlable depuis Jquery et d'avoir un système simple de div.
De plus avec ça, le parallaxe devient accessible en quelques lignes et les possibilités de créations sont assez énormes (infini je pense).

Le système de caméra (avec la téléportation) permet en outre d'ajouter un aspect lucratif et dynamique au site Okay
Comme pour une div, l'ajout de simple événement comme le click, le mousemove, le mouseout ..etc est très simple Mr. Green

Comme Jquery est une librairie qui existe depuis longtemps beaucoup de gens la connaissent, la prise en main de WorldCube sera donc plus facile.
De plus l'ajout de plugins, librairies fonctionnant avec Jquery sera aussi possible (je pense à Jquery UI)
L'ajout d'un événement draggable etc...

Le bootstrap ou autre framework css sera aussi pleinement compatible avec ma librairie WorldCube Mr. Green


Et si j'avais fais comme tu avais dit avec le canvas (Webgl) : ça n'aurait servi à rien car la librairie Three.js est déjà très compétente dans ce domaine.




______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Répondre en citant
Message WorldCube 
Je ne connais rien au html css et javascript =3

Mais le résultat est impressionnant ! Okay




______________________________________________________
Message WorldCube 


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch