Comment réaliser une simulation 360 degrés ?

montreal2010 · frontpage mioche

Bonjour à toutes et à tous !

Je compte créer un site Internet et pour la visualisation de certains objets je souhaiterais faire une visite à 360 degrés : quelqu'un pourrait-il me dire comment m'y prendre pour réaliser cela, au niveau de l'enregistrement des photos, jusqu'à l'installation finale avec les flèches pour faire tourner le modèle : Merci beaucoup !

drac · html mioche

salut,

Tu as ulead cool 360 qui fait ça très bien.
http://www.ulead.com/cool360/

Le principe est simple tu mets ton appareil sur un pied et tu prends ~ 18 photos en tournant l'appareil de 20° à chaque photo.

Le logiciel fait le reste, il faudra que les visiteurs de ton site install un ocx ou applet quicktime et ça marche.

C'est plutôt facil d'optenir de beau résultat et le soft coute vraiment pas cher

drac · html mioche

un exemple :

http://www.photo360.net/grand_format.htm

James_Ogre · frontpage mioche

J'espere t'aider en te donnant ce code source:
Je te laisse inserer tes propres photos (en bas) et n'oublie pas de modifier leur nom pour que tout corresponde (regarde une dizaine de ligne plus pas)
Bon courage.

<HTML>

<HEAD>
<title>new - Interactive DHTML art-demos</title>
<meta name="Author" content="xxx">
<meta http-equiv="imagetoolbar" content="no">
<STYLE>
BODY {
cursor:url("../CRCROSS.cur");
}
</STYLE>
</HEAD>

<BODY bgColor=#000000 scroll=no onload="zyva()">

<DIV id=images style="visibility:hidden">
<IMG src="left.png">
<IMG src="bottom.png">
<IMG src="top.png">
<IMG src="right.png">
<IMG src="back.png">
<IMG src="front.png">
</DIV>


<SPAN style="position:absolute;left:50%;top:50%">
<OBJECT id=DAControl
style="visibility:hidden;border:#111111 solid 20px;position:absolute;width:320;height:240;left:-200;top:-140"
classid=CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D>
<PARAM NAME="OpaqueForHitDetect" VALUE="0">
<PARAM NAME="UpdateInterval" VALUE="0.016">
</OBJECT>
</SPAN>


<span id=LB0 style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>
<span style="position:absolute;left:-50;top:-5;font-size:1px;width:100;height:10px;background:#333"><span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span></span></span>
<script>m00=document.getElementById("images").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100);if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>



<BGSOUND balance=0 src="odins.mid" volume=0 loop=infinite>

<SCRIPT>
screen.bufferDepth = 16
document.onselectstart = function (){ return false }
xm = 0
ym = 0
cx = 0
cy = 0
Z = .02

var m, PerCam
function programDA(){
m = DAControl.MeterLibrary
// square geometry (2 triangles)
square=m.TriMesh (2, [1,0,-1,-1,0,-1,-1,0,1,1,0,-1,-1,0,1,1,0,1], [0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0], [1,1,0,1,0,0,1,1,0,0,1,0], null)
square = square.Transform(m.Scale3Uniform(Z))
// light
Lig = m.ModifiableBehavior(m.colorRgb255(255,255,255))
geo = m.AmbientLight.LightColor(Lig)
// position faces
addFace(0, m.xVector3,Math.PI/2, m.zVector3,Math.PI/2, Z,0,0)
addFace(1, m.zVector3,0, m.zVector3,0 , 0,-Z,0)
addFace(2, m.yVector3,-Math.PI, m.xVector3,-Math.PI, 0,Z,0)
addFace(3, m.xVector3,Math.PI/2, m.zVector3,-Math.PI/2, -Z,0,0)
addFace(4, m.zVector3,0, m.xVector3,Math.PI/2, 0,0,-Z)
addFace(5, m.zVector3,Math.PI, m.xVector3,-Math.PI/2, 0,0,Z)
// rotation
geo = geo.Transform(m.Rotate3Rate(m.xVector3, 0)).Transform(m.Rotate3Rate(m.yVector3, 0)).Transform(m.Rotate3Rate(m.zVector3, 0))
// camera
PerCam = m.ModifiableBehavior(m.PerspectiveCamera(Z,Z-.1))
// rendering
DAControl.Image = geo.render(PerCam)
}

function addFace(i, v1,r1, v2,r2, tx,ty,tz){
// import image
htmlTexture = m.ImportImage(images.children[i].src).MapToUnitSquare()
img = square.TextureImage(htmlTexture)
// orientation face
geo = m.UnionGeometry(geo,img.Transform(m.Rotate3(v2,r2)).Transform(m.Translate3(tx,ty,tz)).Transform(m.Rotate3(v1,r1)))
}

document.onmousemove = function(){
xm = window.event.x
ym = document.body.offsetHeight * .5 - window.event.y
}
function Om(){
cx+=Math.round((xm-cx)/20)
cy+=Math.round((ym-cy)/20)
PerCam.SwitchTo(m.PerspectiveCamera(.05,.04).Transform(m.Translate3(0,0,-Z*2)).Transform(m.Rotate3(m.yVector3,cx/100)).Transform(m.Rotate3(m.zVector3,cy/100)))
Lig.SwitchTo(m.colorRgb255(255,128+Math.sin(cy/100)*128,0))
}

function zyva(){
programDA()
DAControl.style.visibility="visible"
DAControl.Start()
setInterval("Om()",16)
}

</SCRIPT>
</BODY></HTML>

--------------------------------------------------------------------------------
Resource Images :

../images/left.png

../images/bottom.png

../images/top.png

../images/right.png

../images/back.png

../images/front.png