Interaktiivinen tuote-esittely

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

..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.