设置3d立方体旋转原点

Posted 2021-04-06

我有一个简单的三维立方体（BoxGeometry为100,100,100），我正在尝试旋转它。如果我们将所有100x100x100称为瓷砖 - 当我旋转它时，我可以看到它与下面的瓷砖重叠。

（通过改变颜色，现在我完全理解行为）。

tl.to(this.cube4.rotation, 0.5, {z: -45* Math.PI/180});

[

如果我想根据右下角的锚点旋转它怎么办？因此，不会在下面的图块内溢出，而是将该部分溢出到图块上方。

所以它看起来像绿色的例子，而不是红色的例子：

这里的红色例子是通过实现的

tl.to(this.cube4.rotation, 0.5, {z: -45* Math.PI/180});
tl.to(this.cube4.position, 0.5, {x: 50 }, 0.5);

我对three.js很新，所以如果有任何术语错误，请警告我

答案

将（“红色”）立方体添加到THREE.Group，使旋转轴（边缘）位于组的原点。这意味着立方体必须移动半边长度。 如果旋转组对象，则立方体（位于组内）将围绕边缘而不是围绕其中心旋转。

EG

var bbox = new THREE.Box3().setFromObject(cube);
cube.position.set(bbox.min.x, bbox.max.y, 0);

var pivot = new THREE.Group();
pivot.add(cube);

scene.add(pivot);

另请参阅How to center a group of objects?的答案，该解决方案使用此解决方案来旋转一组对象。

---

(function onLoad() {
  var camera, scene, renderer, orbitControls, pivot;
  var rot = 0.02;
  
  init();
  animate();

  function init() {
    container = document.getElementById('container');
    
    renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(4, 1, 2);
    //camera.lookAt( -1, 0, 0 );

    loader = new THREE.TextureLoader();
    loader.setCrossOrigin("");

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(camera);
    
    window.onresize = function() {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    }
    
    orbitControls = new THREE.OrbitControls(camera);

    var ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.set(1,2,-1.5);
    scene.add( directionalLight );
    
    addGridHelper();
    createModel();

  }

  function createModel() {

    var material = new THREE.MeshPhongMaterial({color:'#80f080'});
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    
    var cube1 = new THREE.Mesh(geometry, material);
    cube1.position.set(0,-0.5,-0.5);

    var cube2 = new THREE.Mesh(geometry, material);
    cube2.position.set(0,0.5,-0.5);

    var cube3 = new THREE.Mesh(geometry, material);
    cube3.position.set(0,-0.5,0.5);

    var material2 = new THREE.MeshPhongMaterial({color:'#f08080'});
    var cube4 = new THREE.Mesh(geometry, material2);
    
    var bbox = new THREE.Box3().setFromObject(cube4);
    cube4.position.set(bbox.min.x, bbox.max.y, 0);

    pivot = new THREE.Group();
    pivot.add(cube4);
    pivot.position.set(-bbox.min.x, 0.5-bbox.max.y, 0.5);

    scene.add(cube1);
    scene.add(cube2);
    scene.add(cube3);
    scene.add(pivot);
  }

  function addGridHelper() {
    
    var helper = new THREE.GridHelper(100, 100);
    helper.material.opacity = 0.25;
    helper.material.transparent = true;
    scene.add(helper);

    var axis = new THREE.AxesHelper(1000);
    scene.add(axis);
  }

  function animate() {
    requestAnimationFrame(animate);
    orbitControls.update();
    pivot.rotation.z += rot;
    if (pivot.rotation.z > 0.0 || pivot.rotation.z < -Math.PI/2) rot *= -1;
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

另一答案

从第一张图片可以看出，红色瓷砖的枢轴位于其中心。

对于您想要的旋转，您最好将枢轴更改为多维数据集的右下角。如果不修改立方体的几何形状，这是不可能的。

但一个简单的技巧是在该枢轴点创建一个空节点，将您的多维数据集设置为该空白，并将您的旋转应用于空。 （别忘了删除你的翻译，你不再需要它了）

这是一些伪代码，假设您的红色框位于（0,0,0）并且宽度和高度为100：

// create an empty node at desired rotation pivot
var empty = new Object3D or group
empty.position = (50, -50, 0)

// parent your cube to the empty
var cube = your box
empty.add(cube)

// you may need to change the local position of your cube to bring it back to its global position of (0,0,0)
cube.position = (-50, 50, 0)

rotate empty by 45°

另一答案

我想你可以得到旋转对象的界限，如下所示：

bounds = new THREE.Box3().setFromObject( theRedObject )

然后根据bounds.min.y重新定位object.y

let scene, camera, controls, ambient, point, loader, renderer, container, stats;

const targetRotation = 0;
const targetRotationOnMouseDown = 0;
const mouseX = 0;
const mouseXOnMouseDown = 0;
const windowHalfX = window.innerWidth / 2;
const windowHalfY = window.innerHeight / 2;


init();
animate();
var box, b1, b2, b3;

function init() {
  // Create a scene which will hold all our meshes to be rendered
  scene = new THREE.Scene();

  // Create and position a camera
  camera = new THREE.PerspectiveCamera(
     60, // Field of view
     window.innerWidth / window.innerHeight, // Aspect ratio
    /*window.innerWidth / -8,
    window.innerWidth / 8,
    window.innerHeight / 8,
    window.innerHeight / -8,
    */
    0.1, // Near clipping pane
    1000 // Far clipping pane
  );
scene.add(camera)
  // Reposition the camera
  camera.position.set(0, 5, 10);
  // Point the camera at a given coordinate
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  // Add orbit control
  controls = new THREE.OrbitControls(camera);
  controls.target.set(0, -0.5, 0);
  controls.update();

  // Add an ambient lights
  ambient = new THREE.AmbientLight(0xffffff, 0.2);
  scene.add(ambient);

  // Add a point light that will cast shadows
  point = new THREE.PointLight(0xffffff, 1);
  point.position.set(25, 50, 25);
  point.castShadow = true;
  point.shadow.mapSize.width = 1024;
  point.shadow.mapSize.height = 1024;
  scene.add(point);

  group = new THREE.Group();
  group.position.y = 0;
  scene.add(group);
  rotationAnchor = new THREE.Object3D()
  group.add(rotationAnchor);

  box = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({
    color: 'grey'
  }))
  b1 = box.clone();
  b2 = box.clone();
  b3 = box.clone();
  b3.material = b3.material.clone()
  b3.material.color.set('red')
  group.add(box);
  group.add(b1);
  b1.position.y += 1
  group.add(b2);
  b2.position.z += 1
  rotationAnchor.add(b3);
  rotationAnchor.position.set(0.5, 0.5, 1.5)
  b3.position.set(-.5, -.5, -.5)
  // Create a renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  // Set size
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Set color
  renderer.setClearColor(0xf8a5c2);
  renderer.gammaOutput = true;
  // Enable shadow mapping
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  // Append to the document
  container = document.createElement("div");
  document.body.appendChild(container);
  document.body.appendChild(renderer.domElement);
  // Add resize listener
  window.addEventListener("resize", onWindowResize, false);

  // Enable FPS stats
  stats = new Stats();
  container.appendChild(stats.dom);

  var gui = new dat.GUI({
    height: 5 * 32 - 1
  });
  let params = {
    'test': 4,
    'bevelThickness': 1,
    'bevelSize': 1.5,
    'bevelSegments': 3
  }
  gui.add(params, 'test', 0, 10).onChange(val => {
    test = val
  })
}

function onWindowResize() {
  camera.aspect = window.innerWid
以上是关于设置3d立方体旋转原点的主要内容，如果未能解决你的问题，请参考以下文章
 
 Canvas实现3D效果-可旋转的立方体
 使用纯CSS代码实现3D旋转效果
 设置实体旋转的原点（Qt 3D）
 界面实例--旋转的3d立方体
 围绕世界原点旋转对象
 如何css制作3d旋转立方体效果？