EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERATION

Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
- - Dernière réponse : jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
- 14 mars 2012 à 16:43
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/54059-effet-de-rotation-a-360-d-image-avec-acceleration-deceleration

Afficher la suite 
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Merci
cs_bdodan
Messages postés
7
Date d'inscription
dimanche 16 février 2003
Statut
Membre
Dernière intervention
11 août 2008
-
Merci de ta réponse JJDAI.
Je me doutais bien que c'était compliqué au niveau des photos. Les sites marchands qui proposent ce genre de présentation doivent y passer un sacré moment !
Encore félicitation pour ton site.
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Bonjour
bdodan : Pour une rotation vertical, pas de problème c'est juste une suite de photos sr un axe. A la limite en couchant le sujet lors de la prise de vue puis en redressant les photos, c'est tout à fait jouable.

Maintenant ce que tu évoques à savoir une rotation dans tous les sens me parait plus compliquée et surtout beaucoup plus long à mettre en œuvre, mais c'est jouable.
Comme ça à première vue il faudrait faire une cartographie sur une sphère pour faire la numérotation des images un peu comme les méridiens et les parallèles, ensuite calculer la nouvelle image à afficher en fonction du déplacement de la souris.
Ce serait intéressante à réaliser.
Mais ça ferait une palanquée de photos, en prenant comme base 32 photos sur un axe, ça ferait au bas mot sur 32*8meridiens = 256 photos.
En plus il faudrait monter un studio gyroscopique qui permette les rotations dans les 3 directions.
Si je trouve un peu(beaucoup) de temps, je vais tenter le coup pour voir.

Pour mon compteur, non j' ai un problème avec, il semble ne pas fonctionner correctement, il faut que je trouve un peu de temps pour me pencher dessus sérieusement.
cs_bdodan
Messages postés
7
Date d'inscription
dimanche 16 février 2003
Statut
Membre
Dernière intervention
11 août 2008
-
Bonjour JJDAI,
Ton site est très joli ! J'adore son graphisme.
Et l'effet de rotation est très fluide.
Juste une petite remarque ou plutôt suggestion : étant curieux de nature, est-il difficile d'appliquer également ton effet dans le sens haut/bas pour retourner ton image ? Je suppose que la principale difficulté est au niveau des prises de vues et non du script. On voit sur certains sites marchand une fonction qui permet de bouger un objet dans tous les sens.
En tous cas, Merci pour ton boulot et ton partage !

D@n
PS : le compteur de ton site est-il OK ?!? Il enregistre 3 visites alors que j'y suis allé déjà 2 fois...
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
C'est exact, j'ai essayé de resté le plus générique, mais mon but étais de l'intégrer dans le CMS Xoops.
Sinon je t'ai envoyée un lien vers une zip avec une version autonome sur ta messageire.

JJdai
@karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
47 -
j'ai pu récupere le script dans la page et le fichier js je modifierait pour faire un truc plus genérique car j'ai vue que tu a bien remanié la source en fonction de tes besoins.
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Sorry je m'adressais à Kazma j'ai dérapé sur la touche lol
JJdai
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
jdmcreator:
pour la flèche je sais mais je n'ai pas trouvé ce que je voulais, je cherchais un petit gyroscope discret, mais je n'ai rien trouvé de mieux. A l'occasion je ferais le gif moi même.

Pour les photos je me suis contenté de 32 photos, avec 64 c'est mieux et plus fluide, mais plus long à charger. En plus les détourer la transparence, ... c'est un gros boulot.

Si tu le souhaite, je peux t'envoyer mon script;
JJDai
@karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
47 -
jdmcreator

ca parait pas mal d'utilsé le typeof de addEventListener je prend.



JJDai

pas mal le rechargement dynamique si tu voit pas d'inconvenient je rajouterait une deuxieme source avec le rechargement dynamique

pas mal aussi la prise de photo ca donne bien sur le site juste un petit détaille la petite fleche animé elle déconcentre le regard sinon rien a redire c'est du bon boulot.
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
PS: pour la prise de photo, j'ai utilisé un plateau tournant de télé, j'ai gradué la circonférence en 32 (4x2x2x2).
Le modèle est placé au centre du plateau, un repère sur la table, l’appareil photo sur pied, et c'est parti pour 32 photos;
Comme il a fallu détouré les images, un fond neutre(uni bleu ou vert) est conseillé.
JJdai
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Bonjour
-----------------------
Pour ceux que cela intéresse voici une petite mise en application:
http://coleoptere.jubile.fr/
J'ai ajouté la possibilité d'un rechargement dynamique selon une sélection dans une liste déroulante.
J'ai limité aussi le nombre de photos à 32, ce qui est satisfaisant vue la taille des images.
JJDai
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Bonjour Kazma,

Désolé de mon retard par rapport à ton commentaire. Je m'empresse d'y répondre tout de suite :

"tu me titille néanmoins il y a des chose intéressante dans tes propos"

Heureusement ! Sinon une partie de la raison pour laquelle on poste ses scripts sur une communauté et non sur son site viendrait de disparaître !

1. "if(parseInt(navigator.userAgent.substring(30,31))<=8){

j'tilise cette syntaxe a cause de ie9 qui supporte les methodes propre a ie 6 7 8 dans notre cas attachEvent et en meme temp supporte addEventListener et si j'utilise document.all methode généralement utilisé je passe par attachEvent et je prefere passer par la methode standard c'est a dire addEventListener afin de pérenniser la source dans le temps je n'ai pas trouvé de propriété qui soit prope a ie 6 7 8 et pas ie 9"

Ce n'est pas un problème en soi. Tu n'as qu'à tester addEventListener puis ensuite attachEvent :

if(dde.addEventListener){
// IE9, FF, Chrome, Safari, Opera vont ici

}
else{
// IE8 et - vont ici
}

6.

Vas lire ceci : http://forum.hardware.fr/hfr/Programmation/HTML-CSS-Javascript/html-css-javascript-sujet_105278_1.htm

Je suis sûr que cela peut y répondre

JDMCreator
cs_davidmnestor
Messages postés
24
Date d'inscription
lundi 11 août 2008
Statut
Membre
Dernière intervention
11 janvier 2011
-
Bonjour,
Vraiment trop joli travail !
Etant hyper débutant, je ne l'ai pas encore installé.
Mais par contre je n'ai aucun souci pour les images
Quand au script est il interactif ? Car sur la demo il ne l'est pas !
Sinon est il possible de le rendre interactif par une ou plusieurs interactions
en prenant en considération que dans ce cas les images seraient séparées?
Je note 9 !
Et je renouvelle mes compliments.
cs_bdodan
Messages postés
7
Date d'inscription
dimanche 16 février 2003
Statut
Membre
Dernière intervention
11 août 2008
-
Mon évaluation ayant été mal enregistrée (5 étoiles saisies), je ne peux pas malheureusement rééditer mon post ; je ne voulais pas faire baisser ton ratio. Et comme je ne peux pas non plus "revoter" je te renouvelle mes remerciements.
cs_bdodan
Messages postés
7
Date d'inscription
dimanche 16 février 2003
Statut
Membre
Dernière intervention
11 août 2008
-
Merci pour le partage.
Voilà un effet très fluide. Reste à réaliser les photos... ;o)
xl714
Messages postés
30
Date d'inscription
mercredi 24 mars 2004
Statut
Membre
Dernière intervention
20 novembre 2015
-
sympa !
@karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
47 -
JJDai

j'ai rajoute dans le code la fonction qui lance la rotation au démarrage j'avait aussi pensé a le faire 'merci' pour ce qui est des dimensions des image j'ai aussi pensé a faire de cette façon mais je préfère privilégier le dimensionnement des image a leurs création le choix entre ces deux techniques n'est pas évident.

j'ai aussi fait d'autre petits changement comme crée le tableau des images avec la methode de jdmcreator 'montableau=[]' tableau que j'ai mis directement a l'interieur de la source.
@karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
47 -
jdmcreator

tu me titille néanmoins il y a des chose intéressante dans tes propos

1- if(parseInt(navigator.userAgent.substring(30,31))<=8){

j'tilise cette syntaxe a cause de ie9 qui supporte les methodes propre a ie 6 7 8 dans notre cas attachEvent et en meme temp supporte addEventListener et si j'utilise document.all methode généralement utilisé je passe par attachEvent et je prefere passer par la methode standard c'est a dire addEventListener afin de pérenniser la source dans le temps je n'ai pas trouvé de propriété qui soit prope a ie 6 7 8 et pas ie 9

2 Accéder à une propriété d'un objet demande beaucoup de ressources. Pour plus de rapidité

etant aussi sensible aux performances je prend note

3 Pourquoi déclarer deux fois dde ???

petit oublie. dalleur j'ai aussi oublié des point virgule en fin de ligne

4 var dde=(navigator.vendor) ? document.body : document.documentElement;

cette ligne me sert pour différencier les navigateurs de la famille webkit des autres pour la detection du scroll de la page pas sur que ce que tu a mis puisse convenir

pour le site malheureusement je suis pas tres bon en anglais.

5 Tu nous permet de définir le répertoire de l'image, mais ici tu nous le mets en brut ? Illogique.

ce probleme est resolu

6.

function init(){
k360.precharge()
}

Il aurait été préférable de l'inclure à ton objet k360, surtout en sachant que init() est une foncton souvent utilisé et qu'elle risque d'être en conflit avec d'autre scripts. Encore mieux :

onload = k360.precharge;

au debut j'avait fait directement onload = k360.precharge; mais de cette facon j'ai peur que le onload soit ecrasé par le onload d'un autre scripte au cas ou on est plusieurs script dans la page je trouve plus propre de passer par une fonction init qui appel tous les scripts devant etre initialisé apres chargement de la page mais on peut en rebattre

7 var preImages=new Array

Je n'avais jamais vu Array sans fonction. Néanmoins, il est plus court et plus rapide d'utiliser cette syntaxe :

var preImages=[];

j'ai pris l'habitude de faire comme et j'avoue que l'autre facon fait plus pro

voilou voila

++
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
re bonjour
----------------
J'ai apporté quelques aménagements pour obtenir ce que je souhaitais.
- Gestion de la largeur et la hauteur des images et du du div. J'ai laissé les valeur dans le css, mais elle ne sont plus vraiment utile.
- parametrage de l'extension pour permetre de mettre des png, jpg,...
- Ajout de la méthode "lancer" à l'objet k360 pour permettre un lancement via du code
Elle prend deux parametres, la durrée et la distance(une valeur négativeinverse la rotation).
- Deplacement de la fonction init dans l'objet lui meme (k360.init();)

- Pour tester j'ai ajouter un bouton après le div "img360" juste avanat la fin du body.

pour jdmcreator : J'ai lu avec attention tes commentaires de j'essaierai de les mettres en pratique bien que certaines choses soit un peu obscure pour moi.

Voici le code javascript modifié (j'ai noté "<=== Modif JJDai" toutes mes modifs):

///////////////////////////////////////////////////////////////////////////

var preImages=new Array

var k360={

chiffre:0,
chiffre2:0,
nbimage:127, //nombre total d'images
imgWidth:300, // <=== Modif JJDai : largeur des images
imgHeight:200, // <=== Modif JJDai : hauteur des images
extension:'png', // <=== Modif JJDai : extension des images (jpg, png,..)

//repertoire:'http://kiwik.goldzoneweb.info/scriptsite/360/images/image_', //repertoire image
repertoire:'images/madagascar/madagascar_', //repertoire image
dema:'ok',
elem:null,
tbvar:[0,0,0,0,0,0],

selecte:function(ev){
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
},

// prechargement des images et affichage du pourcentage de prechargement

precharge:function(){
var valcomplet=0;
var general=document.getElementById('img360');
general.style.width=k360.imgWidth+'px'; // <=== Modif JJDai : redimentionement du div à la largeur des images
general.style.height=k360.imgHeight+'px'; // <=== Modif JJDai : redimentionement du div à la hauteur des images

if(k360.dema=='ok'){
k360.dema='fin'

for (var i = 1; i <=k360.nbimage; i++) {

preImages[i] = new Image();
preImages[i].src =k360.repertoire+i+'.'+k360.extension; // <=== Modif JJDai : extension
preImages[i].style.width = k360.imgWidth + 'px'; // <=== Modif JJDai : largeur des images
preImages[i].style.height = k360.imgHeight + 'px'; // <=== Modif JJDai : hauteur des images

}

var constrution=document.createElement('span');
constrution.appendChild(document.createTextNode('00 %'));
general.appendChild(constrution);
}

for (var i = 1; i < preImages.length; i++){
if(preImages[i].complete==true){
valcomplet++;
}
}
general.getElementsByTagName("span")[0].childNodes[0].nodeValue=Math.round((100/k360.nbimage)*valcomplet)+' %';
if(valcomplet==k360.nbimage){
general.removeChild(general.getElementsByTagName("span")[0]);
var constrution=document.createElement('img');
constrution.src = k360.repertoire+1+'.'+k360.extension; // <=== Modif JJDai : extension
constrution.style.width = k360.imgWidth + 'px'; // <=== Modif JJDai : largeur des images
constrution.style.height = k360.imgHeight + 'px'; // <=== Modif JJDai : hauteur des images

k360.elem=general.appendChild(constrution);

return false;
}
setTimeout(k360.precharge,100);
},

//rotation d'image avec la souris

posi:function(s){

var dde=(navigator.vendor) ? document.body : document.documentElement;
s =(!s) ? window.event : s;
k360.chiffre2=k360.chiffre2+k360.chiffre-s.clientX + dde.scrollLeft

if(k360.chiffre2>(k360.nbimage*10)){
k360.chiffre2=5
}

if(k360.chiffre2<5){
k360.chiffre2=k360.nbimage*10
}

k360.elem.src =k360.repertoire+Math.round(k360.chiffre2/10)+'.'+k360.extension; // <=== Modif JJDai : extension
k360.chiffre=s.clientX + dde.scrollLeft
},

//recupération du temp et de la position de la souris au moment du mousedown

temp:function(s){

k360.tbvar[2]=0
var dde=document.documentElement;
var s =(!s) ? window.event : s;
var datee=new Date();
k360.tbvar[0]=(datee.getMilliseconds()+(datee.getSeconds()*1000));
k360.tbvar[1]=s.clientX;
var dde=document.documentElement;
k360.chiffre=s.clientX + dde.scrollLeft;

if(parseInt(navigator.userAgent.substring(30,31))<=8){
dde.attachEvent("onmousemove", k360.selecte)
dde.attachEvent("onmousemove", k360.posi)
dde.attachEvent("onmouseup", k360.temp2)
}
else{
dde.addEventListener("mousedown", k360.selecte, false);
dde.addEventListener("mousemove", k360.posi, false);
dde.addEventListener("mouseup", k360.temp2, false);
}
},

// recuperation du temp au mouseup et soustraction avec le temp recupéré precedement qui
//donne la durée ecoulé entre le mousedown et le mouseup on fait la meme chose avec la
// position de la souris afin de recuperé la distance parcourue
//de ces deux parametre on en deduit la distance parcourue en un temp T

temp2:function(s){

var dde=document.documentElement;
var s =(!s) ? window.event : s;
var setX =s.clientX;
var datee=new Date();
var ms=(datee.getMilliseconds()+(datee.getSeconds()*1000));
k360.tbvar[0]=ms-k360.tbvar[0];
k360.tbvar[1]=k360.tbvar[1]-setX;

if(parseInt(navigator.userAgent.substring(30,31))<=8){
dde.detachEvent("onmousemove", k360.selecte)
dde.detachEvent("onmousemove", k360.posi)
dde.detachEvent("onmouseup", k360.temp2)
}
else{
dde.removeEventListener("mousedown", k360.selecte, false);
dde.removeEventListener("mousemove", k360.posi, false);
dde.removeEventListener("mouseup", k360.temp2, false);
}
k360.tbvar[5]=0
var vitesse=Math.round((k360.tbvar[1]/k360.tbvar[0])*1100);
k360.tbvar[2]=((vitesse*vitesse)/2000)/2;
k360.tbvar[3]=vitesse/100;
k360.tbvar[4]=k360.tbvar[3]/k360.tbvar[2];
if(k360.tbvar[0]<500){
k360.deceleration();
}
},

//operation de deceleration et de la rotation des images

deceleration:function(){

if(k360.tbvar[2]<10){
return false;
}
k360.tbvar[3]=k360.tbvar[2]*k360.tbvar[4];
k360.tbvar[2]-=10;

k360.chiffre2=k360.chiffre2+k360.tbvar[3]

if(k360.chiffre2>(k360.nbimage*10)){
k360.chiffre2=5
}

if(k360.chiffre2<5){
k360.chiffre2=k360.nbimage*10
}

k360.elem.src = k360.repertoire+Math.round(k360.chiffre2/10)+'.'+k360.extension; // <=== Modif JJDai : extension

setTimeout(k360.deceleration,10);
},

/*************************************************
Modif JJDai :
methode a appeler dans du code javascript
pour simuler le lancement de la rotation
exemple : k360.lancer(200,500);
*************************************************/
lancer:function(duree, deplacement){

k360.tbvar[0]=duree;
k360.tbvar[1]=deplacement;

k360.tbvar[5]=0;
var vitesse=Math.round((k360.tbvar[1]/k360.tbvar[0])*1100);
k360.tbvar[2]=((vitesse*vitesse)/2000)/2;
k360.tbvar[3]=vitesse/100;
k360.tbvar[4]=k360.tbvar[3]/k360.tbvar[2];
if(k360.tbvar[0]<500){
k360.deceleration();
}
},


/*************************************************
Modif JJDai :
deplacement de la methode dans l'objet lui meme
exemple : k360.lancer(200,500);
*************************************************/
init:function (){
k360.precharge()
}

}

///////////////////////////////////////////////////////////////////////////

JJdai
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Bonjour Kimjoa,

Encore une autre de tes sources hyper impressionnantes comme tu sais si bien le faire ! Le résultat est épatant !

Par contre, certains bouts de code me font sourciller :

1- if(parseInt(navigator.userAgent.substring(30,31))<=8){

Pourquoi ne pas tester la propriété directement ?

2 -
k360.tbvar[5]=0
var vitesse=Math.round((k360.tbvar[1]/k360.tbvar[0])*1100);
k360.tbvar[2]=((vitesse*vitesse)/2000)/2;
k360.tbvar[3]=vitesse/100;
k360.tbvar[4]=k360.tbvar[3]/k360.tbvar[2];

Accéder à une propriété d'un objet demande beaucoup de ressources. Pour plus de rapidité, il serait préférable de faire ceci :

var tab = k360.tbvar;
tab[5]=0
var vitesse=Math.round((tab[1]/tab[0])*1100);
tab[2]=((vitesse*vitesse)/2000)/2;
tab[3]=vitesse/100;
tab[4]=tab[3]/tab[2];

Et ce, partout où le même problème se produit.



if(dde.detachEvent){blablabla}

C'est beaucoup plus fiable.

3.

var dde=document.documentElement;
var s =(!s) ? window.event : s;
var datee=new Date();
k360.tbvar[0]=(datee.getMilliseconds()+(datee.getSeconds()*1000));
k360.tbvar[1]=s.clientX;
var dde=document.documentElement;

Pourquoi déclarer deux fois dde ???

4. Ligne 59

var dde=(navigator.vendor) ? document.body : document.documentElement;

Ici, même chose. Il serait préférable de tester document.documentElement . Aussi, si dde est définie de cette façon, pourquoi pas ailleurs, c'est différent ? Finalement, il est mieux de définir 'document' comme une variable de la fonction, c'est beaucoup plus rapide selon le SCOPE (je t'invite à lire sur ce sujet -> http://www.digital-web.com/articles/scope_in_javascript/ )

Ainsi :

var d = document;
var d1 = d.documentElement
var dde = (d1) ? d1 : d.body;

Beaucoup plus rapide, encore une fois.

5.

k360.elem.src = 'mamage/image_'+Math.round(k360.chiffre2/10)+'.jpg';

Tu nous permet de définir le répertoire de l'image, mais ici tu nous le mets en brut ? Illogique.

6.

function init(){
k360.precharge()
}

Il aurait été préférable de l'inclure à ton objet k360, surtout en sachant que init() est une foncton souvent utilisé et qu'elle risque d'être en conflit avec d'autre scripts. Encore mieux :

onload = k360.precharge;

Et finalement, un tout petit commentaire :

7.

var preImages=new Array

Je n'avais jamais vu Array sans fonction. Néanmoins, il est plus court et plus rapide d'utiliser cette syntaxe :

var preImages=[];

----------------

Ce ne sont que de petits commentaires de structure sur un ensemble assez bien réussi ! Bravo encore !

8/10 (au moment de la rédaction de ce commentaire. La note peut changer selon le degré d'évolution du code ;) )
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
abdelaziz_info : Pour filmer encore faut il avoir une camera!
De plus la qualité des photos est meilleurs ce me semble,

Pour le nombre d'image, il suffit de modifier la variable
nbimage:72, //nombre total d'images"

J'ai commander mon plateau tournant, je ferais un retour es que j'aurais fait mes premiers essai.
JJdai
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Nickel, et je n'ai plus le doublon avec la première image qui restait persistante.
JJDai
@karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
47 -
JJDai

les problemes dont tu parle je m'en etait appercu j'ai eu quelques oublies, il n'est plus utile de modifier le repertoire sur toutes les lignes concerné il suffit juste de modifier en debut de script la variable qui contient l'adresse des images retélécharge la source

lanner abdelaziz_info

pour le lien c'est du au fait qu'un espace c'est inséré sans mon consentement je remet donc le lien dans les commentaire

http://kiwik.goldzoneweb.info/scriptsite/360/360d.html

merci pour l
abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
-
Salut kazma

"je ne connait pas vraiment la technique pour de tel prises a mon avis pour garder une fluidité si on utilise un plateau il faudrait que le plateau soit cranté ou qu'il y ai une graduation tout autour du plateau"

Tu peux tout simplement filmer une scène vidéo et en suite faire des captures images de la vidéo dans un dossier à laide d'un lecteur comme bon exemple il y à (CyberLink PowerDVD v2.50)

Bonne chance.
dardelphi
Messages postés
7
Date d'inscription
dimanche 14 mars 2004
Statut
Membre
Dernière intervention
29 mai 2013
-
Excellente source. Bravo !
cs_mkfreedown
Messages postés
22
Date d'inscription
mercredi 17 décembre 2008
Statut
Membre
Dernière intervention
11 février 2012
-
R1 à dire, merci, si tu peu changé le chargement en image c tt
abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
-
Bonjour
Ça va être plus pratique si l'auteur du code corrige le (lien teste) et le présente comme suivant:
http://kiwik.goldzoneweb.info/scriptsite/360/360d.html
Et ça peut être encore mieux d'activer les liens dans la description et les commentaires des codes sur tout le réseau...

merci.
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Si il faut juste retirer l'espace dans lien
JJDai
cs_lanner
Messages postés
132
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
8 avril 2015
-
Salut, le lien de test ne fonctionne pas, pour ceux qui veulent visualiser l'exemple ;)
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Petite précision c'est à 4 endroit qu'il faut modifier le nom du dossier des images, j'en avais oublié un.

Il semble que ce soit la première image qui reste persistante, ce pourquoi l'animation se place en dessous.
JJDai
alex_vino
Messages postés
27
Date d'inscription
jeudi 23 mars 2006
Statut
Membre
Dernière intervention
25 mars 2011
-
Vraiment super le rendu!
Félicitations a toi et merci pour ce partage.

Dommage que les sites d'e-commerce n'utilisent pas plus des vues 3D de ce genre.
Je pense que la partie photographie et retouches des photos (ombrages...) doit demander beaucoup de temps et de compétences, donc partie réservé aux pros de l'image.

Mais une fois c'est images obtenues c'est le pied avec un tel script.
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
quand j'aurais mon plateau je vous en dirais d'avantage sur la technique de prise de vue.

Cependant plusieurs choses sur le code, j'ai fait un essai avec des images que j'avais (un peu n'importe quoi mais pour le test c'est sufisant):

avertissement : bien penser à mettre le bon chemin des images (à 3 endroits)

demarrage de l'animation; j'ai été obligé de mettre la derniere ligne après la le div "img360" sinon dans l'étapa d'initialisation la variable "general" restait à null.. J'ai donc ajouter ce bout de code juste après le div:

<script type="text/javascript">
onload=init();
</script>

Et la c'est ok

truc bizarre : Je me retrouve avec l’image d'origine (la première) et l'animation en dessous.
Ca doit pas être bien méchant, je cherche ce que ça peut être.

après je vais voir si il n'y a pas d'interférance dans un site sous Xoops avec d'autre javascript.
en tout cas super.
JJDai
@karamel
Messages postés
1717
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
15 octobre 2019
47 -
je pouvait pas mettre toutes les images a cause de la taille et il y a aussi qu'elles ne sont pas de moi
et je ne connait pas vraiment la technique pour de tel prises a mon avis pour garder une fluidité si on utilise un plateau il faudrait que le plateau soit cranté ou qu'il y ai une graduation tout autour du plateau voir s'en créé une genre sur le bord du plateau avec une regle faire un trait tout les 1 cm et positionner un repere au sol
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
-
Bonjour
Excellent, j'allais justement tenter de faire un truc comme ça pour faire une présentation d'insecte sur 360° (Ici http://coleop tere.jubile.fr/)
Me manque encore les plateau tournant pour les photos du coup je ne peux pas vraiment tester.
dommage que le zip ne contienne pas l'exemple complet (72 images si j'ai bien vu c'est peut être beaucoup), mais c'est super quand même.
Côté code je verrai quand j'aurais mes mon plateau et que je pourrais prendre mes photos.
Pour info sont-ce des photos que tu as pris toi même, et dans ce cas quelle technique as tu utilisé ?
J'ai trouvé des présentoirs tournants pas trop très cher en horlogerie, la question que je me pose c'est, la fluidité du moteur pour éviter les "a coup", et la possibilité de régler la vitesse de rotation pour obtenir le nombre d'image idoine.

Merci JJDai