相关疑难解决方法(0)

如何围绕轴旋转一个Three.js Vector3一定的角度？

我已经提到了以下关于对象旋转的问题.

• 链接1 链接2 链接3 链接4 链接5

但是无法准确理解如何围绕特定点旋转圆柱体？

我有一个Object3d在Three.JS这是一组有些网格对象.
我想围绕Y轴旋转这个组,在它的中心,远离世界中心(0,0,0).
我只知道Group.rotate.y += deg代码,但是对于每个轴方向,它总是围绕(0,0,0)旋转对象,而不是我的组中心!
我怎样才能解决这个问题？

更新:

阅读评论

我修改了这个旋转立方体,使其在Object3D中包含3个立方体

http://jsfiddle.net/VsWb9/1243/

在上面的例子中,它使用第一个立方体.我需要它在对象的正中心的单个轴上旋转.

object3D代码

  geometry = new THREE.CubeGeometry(50, 50, 50);
    material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Object3D();
    mesh1 = new THREE.Mesh(geometry, material);
    mesh1.position.x = 50;
    mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.x = 100;
    mesh3 = new THREE.Mesh(geometry, material);

    mesh.add(mesh1);
    mesh.add(mesh2);
    mesh.add(mesh3);

    scene.add(mesh);

这是轮换

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

编辑:只是说这是一个演示问题的例子,我的实际代码对象包含许多不同大小的形状.

我尝试torus沿 2 个轴旋转：Ox 和 Oz。我想通过dat.gui鼠标修改的滑块来应用此旋转。

我已经定义了torus：

var geometryTorus = new THREE.TorusGeometry( radius, 2*widthLine, 100, 100 );
var materialLine = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
torus = new THREE.Mesh( geometryTorus, materialLine );
scene.add(torus);

我的问题是沿旋转Ox axis工作正常，但沿旋转的情况并非如此Oz axis。

我通过调用以下函数来旋转圆环：

// Change great circle parameters
function changeGreatCircle(thetax, thetaz) {

// Update rotation angles 
torus.rotation.x = thetax;
torus.rotation.z = thetaz; 

}

对于上述函数，我调用了render('init')计算相机位置的函数。

如何使这个环面旋转Oz axis？为什么它是顺转而Ox axis不是顺转Oz axis …

在 Three.js 中似乎有相当多的旋转方式，我个人觉得不是很直观。请参阅示例
http://cloud.engineering-bear.com/apps/robot/robot.html

当我对多个对象应用旋转时，我得到了非常奇怪的意想不到的效果。例如，当我旋转已相互添加的对象并开始旋转父对象时，各个对象将突然彼此以不同的方式放置，而不是它们原来的位置。我现在正在尝试分组，并希望避免同样的效果。

请参阅http://pi-q-robot.bitplan.com/example/robot?robot=/models/thing3088064.json了解当前的情况，并查看https://github.com/BITPlan/PI-Q-Robot了解更多信息源代码。

因此，我根据不同的 API 选项搜索了正确的示例：

回转

function renderScene() {
    stats.update();
    //side1.rotation.z += 0.02;
    pivot.rotation.z += 0.02;

• https://jsfiddle.net/of1vfhzz/1/
• https://github.com/mrdoob/ Three.js/issues/1958

轴旋转

• Three.js 绕其中心 Y 轴旋转 Object3d
• 如何在轴 Three.js 上旋转 3D 对象？
• ThreeJS - 绕对象自身轴旋转

绕世界轴旋转

   object.rotateAroundWorldAxis(p, ax, r * Math.PI * 2 / frames);

• 如何在轴世界三.js 上旋转对象？
• /sf/answers/2242678581/
• https://jsfiddle.net/b4wqxkjn/7/
• THREE.js 在rotateOnWorldAxis之后更新对象的旋转属性

在世界轴上旋转

object.rotateOnWorldAxis( axis, angle );

• 绕世界轴旋转

旋转关于点

• 三个 JS 枢轴点
• Three.js 中的旋转锚点

设置从轴角度旋转

• https://trijs.org/docs/#api/en/core/Object3D.setRotationFromAxisAngle

setEulerFrom四元数

   quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );
   object.rotation.setEulerFromQuaternion( …