13

私は、javascript を広範囲に使用する 1 ページの Web サイトで作業を開始しています。このサイトの主な目的は、顧客の製品を宣伝することです。このウェブサイトには、1 つの製品の 3D 画像が含まれます。ユーザーがクリックしてドラッグすると、それに応じて回転するはずです。以下のリンクをご覧ください。次のリンクに記載されているのとまったく同じ種類の効果が必要です

リンクはここをクリック

を使用せずにJavaScriptを使用してこれを達成するにはどうすればよいmagic 360ですか? 記事またはチュートリアルのリンクをいくつか教えてください。検索しましたが、これに関するチュートリアルが見つかりませんでした。

4

4 に答える 4

7

ここに私が一緒に投げたいくつかのjavascriptがあります。事前に構築されたライブラリ (ブラウザの互換性などのため) の 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>
于 2013-07-09T18:52:12.460 に答える
4

これには、次のような jQuery プラグインが用意されています。

http://jquery.vostrel.cz/reel

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

于 2013-07-09T18:12:12.103 に答える
4

GIF または一連の画像を使用できます。私の (好ましいが最も簡単ではない) 方法は、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);


ジオメトリをファイルに 置き換えると、回転するモデルが作成されます!
クリックやホバーなどを感知して、モデルをインタラクティブにすることもできます!
これを参照してください: https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models

私が助けてくれることを願っています:)

于 2013-07-09T18:35:54.767 に答える
3

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

Googleで3D画像を回転させるJavaScript. ソースを表示してUize.jsをコピー

于 2013-07-09T18:11:11.277 に答える