[英]rotate 3d pictures using javascript
我開始在一個廣泛使用 javascript 的單頁網站上工作。 這個網站的主要目的是推廣我的客戶產品。 該網站將包含一張產品 3d 圖像。 當用戶單擊並拖動時,它應該相應地旋轉。 請參閱下面的鏈接。 我需要與以下鏈接中提到的完全相同的效果
如何在不使用magic 360
的情況下使用 javascript 來實現這一點? 請在我搜索時給我一些文章或教程鏈接,但找不到任何教程。
這是我剛剛拼湊的一些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>
您可以使用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
希望我幫助:)
http://www.uize.com/examples/3d-rotation-viewer.html
谷歌旋轉3d圖像JavaScript。 查看源代碼並復制Uize.js
我知道這是一個老話題,但是有一個新的開源播放器,用於 QTVR 或類似對象電影的魔法 360,稱為 imgSpinner。 這是該項目的鏈接
免責聲明 - 這是我的項目。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.