摆锤周围旋转0.85缸高

Question

我坚持做一件我需要做的工作，首先我需要创建一个基本上是2个球体和1个圆柱体的2个球体，上下两个球体是一个更大的1和一个更小的1，我需要什么要做的是钟摆应该不是围绕自己的中心移动，而是围绕着我的圆柱高度0.85的中心，我的想法是创建一个枢轴点，但是因为我不太清楚枢轴点是如何工作的所以我试了很多事情，我首先尝试将圆柱体添加到场景中，然后将球体添加到圆柱体，然后我创建了枢轴点并将枢轴点添加到圆柱体，在动画函数中我只是尝试旋转x中的轴心点轴没有任何反应：/

这是我的代码，希望有人可以帮我一把

var scene, camera, renderer;
var caixaGrande, caixaPequena1, caixaPequena2,cylinder,Cylinder2,esferaGrande;
var pivotPoint1, pivotPoint2;

const RAIOCILINDRO = 2.5;
const ALTURACILINDRO = 100;
const RAIOESFERAGRANDE = 15;
const RAIOESFERAPEQUENA = 5;
var rotacao = Math.PI/180;


window.onload = function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.up=new THREE.Vector3(0,1,0);
  camera.position.set(150,50,50);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  // Add a directional light to show off the object
  var light = new THREE.DirectionalLight( 0xffffff, 1.5);
  // Position the light out from the scene, pointing at the origin
  light.position.set(1.5, 1.5, 1);
  scene.add( light );

  var textureCylindro = new THREE.TextureLoader().load("CylinderTexture.png");
  var textureSphere = new THREE.TextureLoader().load("SphereTexture.png");

  geometry = new THREE.CylinderGeometry(RAIOCILINDRO,RAIOCILINDRO,ALTURACILINDRO);
  material = new THREE.MeshPhongMaterial( {color: 0xffffff , map:textureCylindro} );
  cylinder = new THREE.Mesh(geometry,material);
  scene.add(cylinder);


  pivotPoint1 = new THREE.Object3D();
  pivotPoint1.position.y=ALTURACILINDRO*0.15;
  cylinder.add(pivotPoint1);

  var geometry = new THREE.SphereGeometry(RAIOESFERAGRANDE);
  var material = new THREE.MeshPhongMaterial( {color: 0xffffff,map:textureSphere} );
  esferaGrande = new THREE.Mesh( geometry, material );
  esferaGrande.position.y = -ALTURACILINDRO/2;
  cylinder.add( esferaGrande );

  var geometry = new THREE.SphereGeometry(RAIOESFERAPEQUENA);
  var material = new THREE.MeshPhongMaterial( {color: 0xffffff,map:textureSphere} );
  var esferaPequena = new THREE.Mesh( geometry, material );
  esferaPequena.position.y = ALTURACILINDRO/2;
  cylinder.add( esferaPequena );

  Cylinder2 = cylinder.clone();
  Cylinder2.position.z = 3 * RAIOESFERAGRANDE;
  scene.add(Cylinder2);


  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );

  document.body.appendChild( renderer.domElement );
  animate();
}

function animate() {

  pivotPoint1.rotation.x += 10;

  requestAnimationFrame( animate );

  renderer.render( scene, camera );

}

Answer 1

您应该创建一个将其他3个元素添加到的Object3D，然后将该Object3D添加到场景中。然后当你想要旋转整个东西时，你可以旋转你的Object3D。

例如：

var axis = new Object3D();
sphere1.position.y = -.15 * pendulumLength;
sphere2.position.y = .85 * pendulumLength;
cylinder.position.y = .35 * pendulumLength; 
//assuming the cylinder is pendulumLength long, this^ puts it right between the two balls
axis.add(sphere1);
axis.add(sphere2);
axis.add(cylinder);
scene.add(axis);

然后在你的animate（）函数中，只需旋转你的轴：

axis.rotation.z += .01;

修改： 所以，这是我对所发生的事情的糟糕描述。如果你看这里，当旋转时定位在0,0处的圆圈绕轴旋转。再次将它向上移动到1,1时，它会围绕其中心点旋转，因为旋转相对于圆的中心点。

气缸也是如此。在0,0它围绕其中心旋转。在.5，.5处，它也围绕其中心旋转。它并不关心它在哪里，它会围绕它的位置旋转。

因此，如果我们想要将这两个作为一个组相对于其他点旋转，我们需要将它们作为另一个对象的子项，因为当我们移动父项时，子项维持它们与父项的关系，即使它们持仓量分别为1,1和0.5，.5。

它们以右边的方式旋转的原因是因为它们与父对象的关系是1,1和.5，.5相对于旋转为0弧度的父对象。当我们将父对象旋转一定数量的弧度时，它们需要移动才能保持原始关系。

另一种思考方式：你有一块木板，钉子完全穿过中心，你有一双鞋子。您将鞋子放在板子的右上角，脚趾指向远离您的位置。如果你旋转木板Math.PI / 2弧度，鞋子将不会留在右上角（相对于你），即使你把它放在那里，因为鞋已经添加到了板上，而你移动了董事会。现在，鞋子应该在右下方，并且将面向你的右侧。 Object3D.add（）就像将鞋子放在板上的过程一样。