13

我开始在一个广泛使用 javascript 的单页网站上工作。这个网站的主要目的是推广我的客户产品。该网站将包含一张产品 3d 图像。当用户单击并拖动时，它应该相应地旋转。请参阅下面的链接。我需要与以下链接中提到的完全相同的效果

点击这里查看链接

如何在不使用的情况下使用 javascript 来实现这一点magic 360？请在我搜索时给我一些文章或教程链接，但找不到任何教程。

4

4 回答 4

7

这是我刚刚拼凑起来的一些javascript。选择一个预先构建的库（用于浏览器兼容性等），但当您有机会深入了解实际发生的情况时。注意我在答案提交表单中写了这个，所以可能存在语法和其他错误

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

您可以使用 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 回答
4

为此有现成的 jQuery 插件，例如：

http://jquery.vostrel.cz/reel

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

于 2013-07-09T18:12:12.103 回答
3

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

谷歌搜索旋转 3d 图像 javascript。查看源代码并复制 Uize.js

于 2013-07-09T18:11:11.277 回答