围绕球体旋转三个物体 [英] Three js rotation of objects around a sphere

问题描述

我正在使用一个粒子系统来均匀分布球体上的点。这很好。
然后，将给定几何图形的实例放置在这些点上。这部分也适用。
我现在想旋转这些几何图形以匹配球体的表面角度。

I am using a particle system to evenly distribute points on a sphere. That works great. I then place instances of a given geometry on those points. This part also works. I would now like to rotate those geometries to match the surface angle of the sphere.

到目前为止，这个函数是：

Here is the function so far :

function placeGeometryAtPlatonicPoints (points) {
  var len = points.length -1,
    x, y, z,
    geometry,
    // subgroup a group to apply the rotations to
    subgroup = new THREE.Object3D(),
    mesh,
    material = new THREE.MeshLambertMaterial({
      color: 0x0992299
    }),
    r,
    theta,
    varphi;

  // I wait to append this group because I am waiting for the 
  // particles to settle into there positions
  scene.add(group);

  for (len; len >= 0; len -= 1) {
    // Geometry could be any geometry I am just using a cube to test.
    geometry = new THREE.CubeGeometry( 25, 25, 25, 1, 1, 1 );
    x = points[len].x;
    y = points[len].y;
    z = points[len].z;

    // Move the geometry to the point on the sphere. 
    geometry.applyMatrix( new THREE.Matrix4().makeTranslation(x, y, z) );

    mesh = new THREE.Mesh( geometry, material );
    subgroup.add(mesh);

    // This next portion is just some guess work about 
    // polar and azimuth coordinates
    r = Math.sqrt(Math.pow(x,2) + Math.pow(y,2) + Math.pow(z,2));
    theta = Math.acos(z/r);
    varphi = Math.atan(y/x);

    theta = theta * (180/Math.PI);
    varphi = varphi * (180/Math.PI);

    console.log({
      theta : theta,
      varphi : varphi
    });

    // This would be the implementation of the rotation degrees.
    subgroup.rotation.x = 0;
    subgroup.rotation.y = 0;
    subgroup.rotation.z = 0;

    group.add(subgroup);
  }
}

我是三个js的新手，所以如果有的话一个更好的方法来做到这一点，请让我知道。这是我的 WIP 。在渲染几何体之前，您必须先给它一秒才能正确放置粒子。我可以加快速度，但我喜欢动画：）

I am new to Three js, so if there is a better way to do all of this please let me know. Here is my WIP. You will have to give it a second to place the particle correctly before rendering the geometry. I could speed this up but i like the animation : )

推荐答案

如果你想让你的立方体旋转，然后将每个立方体想象成一个棒的末端。

If you want you cubes to be rotated so they are tangent to the sphere, then think of each cube as being on the end of a stick.

该棒是一个 Object3D 位于原点。立方体是位于（0，0，r）处的棒的孩子。现在旋转棒到你想要的地方。 （但避免南北两极）。

The stick is an Object3D located at the origin. The cube is a child of the stick located at ( 0, 0, r ). Now rotate the stick to where you want. ( But avoid the north and south poles. )

var parent = new THREE.Object3D();
scene.add( parent );

var stick = new THREE.Object3D();
var point = new THREE.Vector3( x, y, z );
stick.lookAt( point );
parent.add( stick );

var geometry = new THREE.CubeGeometry( 25, 25, 25, 1, 1, 1 );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, r );
stick.add( mesh );

three.js r.64

three.js r.64

这篇关于围绕球体旋转三个物体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！