ThreeJS对象旋转

时间:2016-08-23 01:33:16

标签: object 3d rotation

两个问题: 1)为什么很难找到一个3D对象根据鼠标移动自由旋转的例子,例如,如果我要为一个对象做以下事情:

Theorem eq_false: forall x y, x <> y -> eq x y = false.

object.rotation.y + = 1;

对象并不总是以相同的程度旋转,这似乎是一个数学问题,有人对旋转的工作方式有一个例子或数学解释,我相信有些东西需要实现几何中心的变化。

  1. 当一个对象具有多于2个几何中心时,例如对于具有不同变形目标的对象,为什么只有一个边界框,是否有一种简单的方法可以找到边界框的几何中心在每个变形目标而不仅仅是平均几何中心?

1 个答案:

答案 0 :(得分:1)

不确定你想要什么,但是它是这样的:

https://jsfiddle.net/72p3z0Lh/27/

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 screenX = 0;
var screenY = 0;

var deltaX = 0;
var deltaY = 0;

renderer.domElement.addEventListener('mousemove', function(event) {

  deltaX = event.screenX - screenX;
  deltaY = event.screenY - screenY;

  screenX = event.screenX;
  screenY = event.screenY;

});

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.x = 5;
camera.position.y= 2;

camera.lookAt(new THREE.Vector3(0,0,0));

cube.geometry.translate( -.5, 0, 0 ); //Center Offset

var render = function() {
  requestAnimationFrame(render);
  cube.rotateOnAxis(cube.worldToLocal(camera.up.clone()).normalize(), deltaX / 20);
  cube.rotateOnAxis(cube.worldToLocal(camera.getWorldDirection().clone().cross(camera.up)).normalize(), deltaY / 20);

  deltaX = 0;
  deltaY = 0;

  renderer.render(scene, camera);
};

render();