Html 使用javascript旋转3d图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17555209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
rotate 3d pictures using javascript
提问by Om3ga
I am starting working on a one page website which uses javascript extensively. The main purpose of this site is to promote my customers products. This website will include one product 3d image. When user clicks and drag then it should rotate according. Please see the link below. I need exactly the same kind of effect which is mentioned in following link
我开始在一个广泛使用 javascript 的单页网站上工作。本网站的主要目的是推广我的客户的产品。该网站将包含一张产品 3d 图像。当用户单击并拖动时，它应该相应地旋转。请参阅下面的链接。我需要与以下链接中提到的完全相同的效果
How can I achieve this using javascript without using magic 360? Please give me some article or tutorial links as I searched but could not find any tutorials for this.
如何在不使用 javascript 的情况下实现这一目标magic 360？请给我一些文章或教程链接，因为我搜索但找不到任何教程。
采纳答案by Louis Ricci
Here's some javascript I just threw together. Pick one of the pre-built libraries (for browser compatibility etc etc) but when you get a chance dig into what is actually happening. noteI wrote this in the answer submit form so there may be syntax and other errors
这是我刚刚拼凑起来的一些 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>
回答by Artek Wisniewski
There are ready jQuery plugins for this, for instance:
有现成的 jQuery 插件，例如：
回答by Deep
You can use a GIF, or a Series of images. My (preferred but not easiest) way is to use THREE.js and WebGL you make the model in Sketchup or Collada, then put it into js, the code is reltively simple, and it gives you lighting effects too!
您可以使用 GIF 或一系列图像。我的（首选但不是最简单的）方法是使用 THREE.js 和 WebGL 在 Sketchup 或 Collada 中制作模型，然后将其放入 js，代码相对简单，并且还提供了灯光效果！
http://carvisualizer.plus360degrees.com/threejs/
http://carvisualizer.plus360degrees.com/threejs/
This ^ is an example of what it can do.
这个 ^ 是它可以做什么的一个例子。
Here is a quick demo I whipped up for you.
这是我为您制作的快速演示。
http://deepschool.kd.io/Pages/Experiments/ThreeJs/clickcontroltestone.htm
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);
Replace geometrywith your file, and you have a spinning model!
You can even sense clicks and hovers etc, and make the model Interactive!
See this for reference: https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models
用您的文件
替换几何图形，您就有了一个旋转模型！
您甚至可以感知点击和悬停等，并使模型具有交互性！
请参阅此参考：https: //github.com/mrdoob/three.js/wiki/Using-SketchUp-Models
Hope I helped :)
希望我有所帮助:)
回答by john doe
http://www.uize.com/examples/3d-rotation-viewer.html
http://www.uize.com/examples/3d-rotation-viewer.html
Googled rotate 3d image javascript. View Source and copy Uize.js
谷歌旋转 3d 图像 javascript。查看源代码并复制 Uize.js
