相关疑难解决方法(0)

我有一个很好的关于旋转的问题.我希望在我的一个游戏中旋转我的3D立方体.

//init
geometry = new THREE.CubeGeometry grid, grid, grid
material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:THREE.FlatShading, overdraw:true, transparent: true, opacity:0.8}
for i in [1...@shape.length]
    othergeo = new THREE.Mesh new THREE.CubeGeometry(grid, grid, grid)
    othergeo.position.x = grid * @shape[i][0]
    othergeo.position.y = grid * @shape[i][1]
    THREE.GeometryUtils.merge geometry, othergeo
@mesh = new THREE.Mesh geometry, material

//rotate
@mesh.rotation.y += y * Math.PI / 180
@mesh.rotation.x += x * Math.PI / 180
@mesh.rotation.z += z * Math.PI / 180

和(x,y,z)可以是(1,0,0)

然后立方体可以旋转,但问题是立方体在其自己的轴上旋转,因此在旋转后,它不能按预期旋转.

我找到页面如何围绕轴旋转Three.js Vector3？,但它只是让Vector3点围绕世界轴旋转？ …

在 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( …