ruota le immagini 3d utilizzando javascript

Sto iniziando a lavorare su un sito Web di una pagina che utilizza javascript estensivamente. Lo scopo principale di questo sito è quello di promuovere i prodotti dei miei clienti. Questo sito Web includerà un'immagine 3d del prodotto. Quando l'utente fa clic e trascina, dovrebbe ruotare secondo. Si prega di consultare il link sottostante. Ho bisogno esattamente lo stesso tipo di effetto che è menzionato nel seguente linkruota le immagini 3d utilizzando javascript

click here for link

Come posso realizzare questo utilizzando JavaScript senza usare magic 360? Per favore datemi qualche articolo o link tutorial come ho cercato ma non ho trovato alcun tutorial per questo.

fonte

2013-07-09 2619

appare L'animazione di rotazione per sono stati creati da una serie di fotografie al posto di un modello 3D. In questo caso, suppongo che potresti utilizzare lo stesso metodo che utilizzeresti per ruotare qualsiasi altra serie di immagini. –

Non c'è altro modo per farlo se non usare le immagini. Almeno non se stai cercando di farlo funzionare in questo secolo e rimanere sano di mente, in quanto imparare qualcosa come three.js o mappare il 3D in canvas/svg richiede per sempre. – adeneo

Er. no, non è vero, sto solo imparando tre js per un paio di settimane (im semplicemente lento) potrei probabilmente fare questo o qualcosa del genere. non è difficile una volta capito correttamente la grafica 3d e il renderer – Deep

Ecco alcuni javascript ho appena buttato insieme. Scegli una delle librerie predefinite (per compatibilità con i browser ecc. Ecc.) Ma quando hai la possibilità di indagare su ciò che sta realmente accadendo. nota Ho scritto questo nella risposta sotto forma presentare così ci possono essere sintassi e altri errori

<!-- an empty div to hold your images/frames --> 
<div id="view3d"></div> 
... 
<script> 
    (function() { 

    // setup 
    var viewer = document.getElementById("view3d"); 
    var name = "3d Boat"; 
    var frameUri = "/images/demo3d.#.jpg"; 
    var frameStart = 1; 
    var frameEnd = 100; 

    // setup the html IMG's 
    for(var i=frameStart; i<=frameEnd; i++) { 
     var img = document.createElement("img"); 
     img.src = frameUri.replace("#", i); 
     img.alt = name; 
     img.style.display = "none"; 
     viewer.appendChild(img); 
    } 

    // persisted variables and events 
    var that = this; 
    this.rotateX = 0; 
    this.isRotating = false; 
    this.frames = viewer.getElementsByTagName("img"); 
    this.frameIdx = 0; 
    this.pixelsPerFrame = viewer.offsetWidth/(frames.length/2); 
    function rotateMouseUp() { isRotating = false; }; 
    function rotateMouseDown(event) { 
     mouseX = event.pageX; 
     isRotating = true; 
    }; 
    function rotateMouseMove(event) { 
     if(!this.isRotating) 
      return; 
     var x = event.pageX; 
     var delta = this.rotateX - x; 
     if(delta >= this.pixelsPerFrame) { 
      this.rotateX = x; 
      this.frames[this.frameIdx].style.display = 'none'; 
      this.frameIdx = (this.frameIdx + parseInt(delta/pixelsPerFrame)) % this.frames.length; 
      this.frames[this.frameIdx].style.display = ''; 
     } 
    } 
    viewer.onmousedown = rotateMouseDown.bind(that); 
    viewer.onmouseup = rotateMouseUp.bind(that); 
    viewer.onmousemove = rotateMouseMove.bind(that); 

    // show the first image 
    this.frames[this.frameIdx].style.display = ''; 

    })(); 
</script>

fonte

2013-07-09 18:52:12

http://www.uize.com/examples/3d-rotation-viewer.html

Googled ruotare 3d JavaScript immagine. View Source e copiare Uize.js

fonte

2013-07-09 18:11:11

ci sono pronti plugin jQuery per questo, per esempio:

http://jquery.vostrel.cz/reel

http://www.mathieusavard.info/threesixty/demo.html

fonte

2013-07-09 18:12:12

Un altro http://www.ajax-zoom.com/examples/example15.php –

Grazie!Di tutti i plugin che le persone raccomandano su questa pagina, quello di Vostrel era l'unico in cui potevo mettermi al lavoro. Ed è estremamente personalizzabile. – Mentalist

È possibile utilizzare un GIF o una serie di immagini. Il mio metodo (preferito ma non più semplice) è quello di utilizzare THREE.js e WebGL per creare il modello in Sketchup o Collada, quindi inserirlo in js, il codice è estremamente semplice e offre anche effetti di illuminazione!

http://carvisualizer.plus360degrees.com/threejs/

Questa^è un esempio di ciò che può fare.

Ecco una breve demo che ho preparato per te.

http://deepschool.kd.io/Pages/Experiments/ThreeJs/clickcontroltestone.htm

geometry = new THREE.CubeGeometry(200, 200, 200); 
    material = new THREE.MeshPhongMaterial({ 
     color: 0xffffff 
    }); 
    cube = new THREE.Mesh(geometry, material); 
    scene.add(cube);

Sostituire geometria con il file, e si dispone di un modello di filatura!
È possibile percepire anche i clic, gli hover ecc. E rendere il modello interattivo!
vedere questo per riferimento: https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models

Speranza ho aiutato :)

fonte

2013-07-09 18:35:54 Deep

Link è morto ora, mi dispiace. – Deep

ruota le immagini 3d utilizzando javascript

risposta

Problemi correlati