Obracanie zdjęć 3D za pomocą javascript

Question

Zaczynam pracować nad jedną stronę strony, która używa javascript szeroko. Głównym celem tej witryny jest promowanie produktów moich klientów. Ta strona internetowa będzie zawierać jeden obraz 3d produktu. Gdy użytkownik kliknie i przeciągnie, powinien się obracać zgodnie z. Zobacz link poniżej. Muszę dokładnie ten sam rodzaj efektu, który jest wymieniony w poniższy link

click here for link

Jak mogę osiągnąć to za pomocą javascript bez użycia magic 360? Przekaż mi kilka artykułów lub linki do samouczków podczas wyszukiwania, ale nie znalazłem w tym celu żadnych tutoriali.

Answer 1

Oto niektóre javascript Właśnie rzucił razem. Wybierz jedną z gotowych bibliotek (dla kompatybilności przeglądarek itp. Itd.), Ale kiedy masz szansę zagłębić się w to, co faktycznie się dzieje. uwaga Napisałem to w odpowiedzi wysłać formularza, więc nie może być składnia i inne błędy

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

Answer 2

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

Googled obracać obraz 3d JavaScript. Zobacz źródło i skopiuj Uize.js

Answer 3

Są gotowe wtyczki jQuery na to na przykład:

http://jquery.vostrel.cz/reel

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

Answer 4

można użyć GIF lub serii obrazów. Moim (preferowanym, ale nie najłatwiejszym) sposobem jest użycie THREE.js i WebGL, aby utworzyć model w Sketchup lub Colladzie, a następnie wstawić go do js, ​​kod jest bardzo prosty, a także daje efekty świetlne!

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

^ta jest przykładem tego, co może zrobić.

Oto szybkie demo, które przygotowałem dla ciebie.

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); 

Wymień geometrię z plikiem, i masz model przędzenia!
Można nawet wyczuć kliknięcia i zawieszanie itp. I sprawić, że model będzie interaktywny!
Zobacz to na odniesienie: https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models

nadzieję, że pomogło :)