Interaktiivinen tuote-esittely

jabatsu

4

579

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Workkii

      Mallinna 3d-ohjelmalla haluamasi tuotteen kuva ja animoi se pyörimään. Export-toiminnolla vie animaation eri vaiheet yksittäisinä kuvina

      tai

      ota valokuva haluamastasi tuotteesta (pyörivä alusta on hyvä), käännä sitä sitä x astetta (360/haluttu kuvien lukumäärä = astemäärä)

      www-sivu














      // internal parameters - do not change
      perlevel = total/levels;
      var time = 40;
      var timer = null;
      frictionx = (1 - friction);
      frictiony = (1 - friction) / 1.5;
      xrest = 0;
      yrest = 0;
      if ( viewmode == 'object' ) multiplicator = 1;
      if ( viewmode != 'object' ) multiplicator = -1;
      imagesProcessed = 1;
      loadingcomplete = false;
      if (document.captureEvents) {
      document.captureEvents( Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP | Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP );
      }
      document.onmousemove = mousepos;
      document.onmousedown = startHandler;
      document.onmouseup = stopHandler;
      document.onkeypress = keypressed;
      document.onkeydown = startHandler;
      document.onkeyup = stopHandler;
      // Functions
      function startHandler(e) {
      rotate();
      }
      function stopHandler(e) {
      stop();
      }
      function stop() {
      clearTimeout(timer);
      if ( (rotomatic != 0) && (rotoresume != 0) ) {
      setTimeout('autorotate()',Math.abs(rotoresume * 1000)); } }
      function autorotate() { clearTimeout(timer);
      yposition = Math.ceil(imagenumber/perlevel);
      xposition = imagenumber-((yposition-1)*perlevel);
      if ( rotomatic > 0 ) xpositionnew = xposition 1;
      if ( rotomatic < 0 ) xpositionnew = xposition - 1;
      ypositionnew = yposition;
      if ( xpositionnew < 1 ) xpositionnew = (total/levels);
      if ( xpositionnew > (total/levels) ) xpositionnew = 1;
      imagenumbernew = ((ypositionnew-1)*perlevel) xpositionnew;
      imagenumber = imagenumbernew;
      document.body.background = ThreeDNPImage[imagenumber].src; timer = setTimeout('autorotate()',Math.abs(rotomatic));
      }
      function rotate(x,y) { if ( loadingcomplete != true ) return;
      clearTimeout(timer);
      yposition = Math.ceil(imagenumber/perlevel);
      xposition = imagenumber-((yposition-1)*perlevel);
      if ( x == undefined ) {
      x = xposition;
      y = yposition;
      xdif = 0;
      ydif = 0;
      }
      else {
      xdif = xrest * frictionx x - xnew;
      ydif = yrest * frictiony y - ynew;
      }
      xdiffull = Math.round(xdif/8);
      ydiffull = Math.round(ydif/12);
      xrest = xdif - xdiffull;
      yrest = ydif - ydiffull;
      xpositionnew = xposition xdiffull * multiplicator;
      ypositionnew = yposition ydiffull * multiplicator;
      if ( xpositionnew < 1 ) xpositionnew = (total/levels);
      if ( xpositionnew > (total/levels) ) xpositionnew = 1;
      if ( ypositionnew < 1 ) ypositionnew = 1;
      if ( ypositionnew > levels ) ypositionnew = levels;
      imagenumbernew = ((ypositionnew-1)*perlevel) xpositionnew;
      imagenumber = imagenumbernew;
      document.body.background = ThreeDNPImage[imagenumber].src; timer = setTimeout('rotate(' xnew ',' ynew ')',time);
      }
      function mousepos(e) {
      if (document.layers) {
      xnew = e.x;
      ynew = e.y;
      }
      else if (document.all) {
      xnew = event.clientX;
      ynew = event.clientY;
      }
      else if (document.getElementById) {
      xnew = e.clientX;
      ynew = e.clientY;
      }
      }
      function keypressed(e) {
      var code;
      if (!e) var e = window.event;
      if (e.keyCode) code = e.keyCode;
      else if (e.which) code = e.which;
      yposition = Math.ceil(imagenumber/perlevel);
      xposition = imagenumber-((yposition-1)*perlevel);
      xpositionnew = xposition;
      ypositionnew = yposition;
      if ( code == keycodes[0] ) ypositionnew = yposition 1 * multiplicator;
      if ( code == keycodes[1] ) xpositionnew = xposition -1 * multiplicator;
      if ( code == keycodes[2] ) ypositionnew = yposition -1 * multiplicator;
      if ( code == keycodes[3] ) xpositionnew = xposition 1 * multiplicator;
      if ( xpositionnew < 1 ) xpositionnew = (total/levels);
      if ( xpositionnew > (total/levels) ) xpositionnew = 1;
      if ( ypositionnew < 1 ) ypositionnew = 1;
      if ( ypositionnew > levels ) ypositionnew = levels;
      imagenumbernew = ((ypositionnew-1)*perlevel) xpositionnew;
      imagenumber = imagenumbernew;
      document.body.background = ThreeDNPImage[imagenumber].src; }
      function leadingZero(source,n) { filled = source;
      for (i=0;i










      tarvittava rullaa.js Javascript-tiedosto

      // script parameters - change these if you like

      total      = 39;         // total number of images
      levels      = 1;         // number of Y axis levels
      startlevel   = 1;         // defines the starting axis

      filemode   = 'NameNumber';      // filemode ('NameNumber'/'RowShot') - NameNumber reads a series of images filename#### (for example 0001 to 0252) / RowShot reads images in Row##shot## mode
      filename   = 'frame';      // filename for images, is not used if filemode is set to 'RowShot'
      suffix      = '.jpg';      // image suffix
      barLength   = 164;         // defines the length of the loading bar

      viewmode   = 'object';      // camera mode ('object'/'camera')
      friction   = 0.5;         // rotation friction (0 to 1)- default: 0.5
      rotomatic   = 80;         // automatic rotation speed - negative or positive value, smaller values = faster rotation, 0 disables
      rotoresume   = 5;         // the time in seconds 3DNP waits before resuming the autorotation, 0 disables

      keycodes   = [119,100,115,97]   // keycodes for keyboard input (up,right,down,left) - default is [119,97,115,100] for 'W/D/S/A' keys, another example: [56,54,50,52] for '8/6/2/4' on num block

      • pyörivä

        Jatketaampa vielä tätä.

        Ei ole oikeen mitään ymmärrystä tästä asiasta niin kysytään.

        Eli mitä tuohon html osioon pitäisi muuttaa ja minne ne kuvat laitetaan joita haluaa tässä pyöritellä?


    • trolliolli

      ..mikä tarkoittaa sitä, että kaikki tarpeellinen löytyy lähdekoodista.

      Oleellinen asia on kuitenkin se, että tuotteesta pitää ottaa jokaisesta kulmasta erikseen kuva. Kamera jalustalla, tuote pyörivällä alustalla ja 10 (luku on täysin hatusta vedetty) asteen välein *naps*. Valaistus yms. pitää olla samat kaikissa kuvissa. Jos ja kun kuvia käsitellään, kannattaa käsitellä kaikki kuvat kerralla esim. makron avulla.

      Tuo saattaisi kyllä olla helpompi flashilla toteuttaa, siinä mielessä olet oikeaan paikkaan kirjoittanut.

      No mutta kuitenkin nuo kuvat pitää silti ottaa, ellet halua käyttää 3D-mallinnosta.

      • jabatsu

        Jep, kiitos vastauksista.
        Itse olen aika käsi näissä puuhissa joten toteutus lienee parempi toteuttaa "ammattilaisella". Pitänee tiedustella ainakin tuosta yrityksestä minkä linkin postasin. Onko muita lafkoja jotka toteuttavat tuollaisa esittelyjä? Mikäli löytyy kaveri jolla y-tunnus niin kelpo korvaus maksetaan..


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Suureksi onneksesi on myönnettävä

      Että olen nyt sitten mennyt rakastumaan sinuun. Ei tässä mitään, olen kärsivällinen ❤️
      Ikävä
      93
      2049
    2. Perusmuotoiset TV-lähetykset loppu

      Nyt sanoo useiden HD-muotoistenkin kanavien kohdalla äly-TV, ettei kanava ole käytössä, haluatko poistaa sen? Kanavia
      Apua aloittelijalle
      167
      1510
    3. YLE Äänekosken kaupunginjohtaja saa ankaraa arvostelua

      Kaupungin johtaja saa ankaraa kritiikkiä äkkiväärästä henkilöstöjohtamisestaan. Uusin häirintäilmoitus päivätty 15 kesä
      Äänekoski
      74
      1289
    4. Euroopan lämpöennätys, 48,8, astetta, on mitattu Italian Sisiliassa

      Joko hitaampikin ymmärtää. Se on aivan liikaa. Ilmastonmuutos on totta Euroopassakin.
      Maailman menoa
      236
      1150
    5. No ei sun asunto eikä mikään

      muukaan sussa ole erikoista. 🤣 köyhä 🤣
      Ikävä
      73
      1150
    6. Hyvin. Ikävää nainen,

      Että vainoat ja stalkkaat miestäni.onko tarkoituksesi ehkä saada meidät eroamaan?no,siinä et tule onnistumaan
      Ikävä
      87
      1064
    7. Martina lähdössä Ibizalle

      Eikä Eskokaan tiennyt matkasta. Nyt ollaan jännän äärellä.
      Kotimaiset julkkisjuorut
      150
      1018
    8. Asiakas iski kaupassa varastelua tehneen kanveesiin.

      https://www.iltalehti.fi/kotimaa/a/33a85463-e4d5-45ed-8014-db51fe8079ec Oikein. Näin sitä pitää. Kyllä kaupoissa valtava
      Maailman menoa
      243
      962
    9. Katsoin mies itseäni rehellisesti peiliin

      Ja pakko on myöntää, että rupsahtanut olen 😆. Niin se ikä saavuttaa meidät kaikki.
      Ikävä
      51
      916
    10. Uskomaton tekninen vaaliliitto poimii rusinoita pullasta

      Korni näytösesitelmä menossa kaupunginvaltuustossa. Juhlia ei ole kokouksista tiedossa muilla, kuin monipuolue paikalli
      Pyhäjärvi
      88
      891
    Aihe