javascriptを使用して3d写真を回転

Question

私はJavaScriptを広く使用する1ページのWebサイトで作業を開始しています。このサイトの主な目的は、私の顧客の製品を促進することです。このウェブサイトには、1つの製品3Dイメージが含まれます。ユーザーがクリックしてドラッグすると、それに従って回転します。以下のリンクをご覧ください。私は、リンク

click here for link

どのように私はmagic 360を使用せずに、この使用してJavaScriptを達成することができますが、以下に記載されている効果のまったく同じ種類がありますか？私は検索したが、これについてのチュートリアルを見つけることができなかったので、いくつかの記事やチュートリアルのリンクを教えてください。

Answer 1

は、ここで私はちょうど一緒に投げたjavascriptの一部だ助けhttps://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models

希望。事前に構築されたライブラリの1つを選んで（ブラウザの互換性などのために）、実際に何が起きているのかを確かめることができます。構文と回転アニメーションが表示され、他のエラー

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

グーグルは、3D画像のJavaScriptを回転させます。ソースの表示および例えば、このための準備ができてjQueryのプラグイン、がありますUize.js

Answer 3

をコピー：あなたはGIF、または一連の画像を使用することができます

http://jquery.vostrel.cz/reel

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

Answer 4

が。私の（好きではないが最も簡単な）方法は、THREE.jsとWebGLを使ってSketchupやColladaでモデルを作成し、それをjsに入れて、コードを簡単に作成することです。

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

これ^は、それが何ができるかの一例です。

ここで私はあなたのためにホイップしました。

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

ファイルでジオメトリを交換し、あなたはスピニングモデルを持っています！
クリックやホバーなどを感知して、モデルをインタラクティブにすることもできます。
は、参考のためにこれを参照してください：私は:)