[英]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);
}
}
I am new to Three js, so if there is a better way to do all of this please let me know. 我是Three js的新手,所以如果有更好的方法可以做到这一切,请告诉我。 Here is my WIP .
这是我的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. 如果您希望旋转立方体使其与球体相切,则将每个立方体视为棒的末端。
The stick is an Object3D
located at the origin. 棒是位于原点的
Object3D
。 The cube is a child of the stick located at ( 0, 0, r )
. 立方体是位于
( 0, 0, r )
的棒的子( 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.