如何使用jQuery/JavaScript旋转3d对象
我想使用JavaScript/jQuery产生一种效果,这样用户可以拖动对象并旋转它。我怎么做?是否有任何预定义的库、脚本等。欢迎提供帮助。 例子: 百里香世界/ 我还附上了简短演示的快照 初始视图 拖动视图后 是一个用于3D动画的JavaScript库。是用户拖动鼠标时旋转网格的示例。代码的关键是当它从等价物中创建一个旋转时,这是描述旋转的一种非常自然的方式。通过使围绕x轴和y轴的旋转角度与鼠标拖动的距离成比例,可以实现非常自然的界面 源代码:如何使用jQuery/JavaScript旋转3d对象,javascript,jquery,animation,Javascript,Jquery,Animation,我想使用JavaScript/jQuery产生一种效果,这样用户可以拖动对象并旋转它。我怎么做?是否有任何预定义的库、脚本等。欢迎提供帮助。 例子: 百里香世界/ 我还附上了简短演示的快照 初始视图 拖动视图后 是一个用于3D动画的JavaScript库。是用户拖动鼠标时旋转网格的示例。代码的关键是当它从等价物中创建一个旋转时,这是描述旋转的一种非常自然的方式。通过使围绕x轴和y轴的旋转角度与鼠标拖动的距离成比例,可以实现非常自然的界面 源代码: var three = THREE; var
var three = THREE;
var scene = new three.Scene();
var camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new three.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new three.BoxGeometry(1, 1, 1);
//var material = new three.MeshNormalMaterial();
/* * /
var material = new three.MeshBasicMaterial({
color: 0x00ff00
});
/* */
/* */
three.ImageUtils.crossOrigin = '';
var texture = three.ImageUtils.loadTexture('http://i.imgur.com/CEGihbB.gif');
texture.anisotropy = renderer.getMaxAnisotropy();
var material = new three.MeshFaceMaterial([
new three.MeshBasicMaterial({
color: 0x00ff00
}),
new three.MeshBasicMaterial({
color: 0xff0000
}),
new three.MeshBasicMaterial({
//color: 0x0000ff,
map: texture
}),
new three.MeshBasicMaterial({
color: 0xffff00
}),
new three.MeshBasicMaterial({
color: 0x00ffff
}),
new three.MeshBasicMaterial({
color: 0xff00ff
})
]);
/* */
var cube = new three.Mesh(geometry, material);
cube.rotation.x = Math.PI/4;
cube.rotation.y = Math.PI/4;
scene.add(cube);
camera.position.z = 5;
/* */
var isDragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
$(renderer.domElement).on('mousedown', function(e) {
isDragging = true;
})
.on('mousemove', function(e) {
//console.log(e);
var deltaMove = {
x: e.offsetX-previousMousePosition.x,
y: e.offsetY-previousMousePosition.y
};
if(isDragging) {
var deltaRotationQuaternion = new three.Quaternion()
.setFromEuler(new three.Euler(
toRadians(deltaMove.y * 1),
toRadians(deltaMove.x * 1),
0,
'XYZ'
));
cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
}
previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});
/* */
$(document).on('mouseup', function(e) {
isDragging = false;
});
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var lastFrameTime = new Date().getTime() / 1000;
var totalGameTime = 0;
function update(dt, t) {
//console.log(dt, t);
//camera.position.z += 1 * dt;
//cube.rotation.x += 1 * dt;
//cube.rotation.y += 1 * dt;
setTimeout(function() {
var currTime = new Date().getTime() / 1000;
var dt = currTime - (lastFrameTime || currTime);
totalGameTime += dt;
update(dt, totalGameTime);
lastFrameTime = currTime;
}, 0);
}
function render() {
renderer.render(scene, camera);
requestAnimFrame(render);
}
render();
update(0, totalGameTime);
function toRadians(angle) {
return angle * (Math.PI / 180);
}
function toDegrees(angle) {
return angle * (180 / Math.PI);
}
您是否至少尝试过查看页面的源代码?他们使用3.js。