围绕球体旋转三个物体

问题描述

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

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

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

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