我正在使用粒子系统在球体上均匀分布点。这很好用。 然后,我将给定几何体的实例放在这些点上。这部分也有效。 我现在想要旋转这些几何形状以匹配球体的表面角度。
这是迄今为止的功能:
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);
}
}
我是Three js的新手,所以如果有更好的方法可以做到这一切,请告诉我。这是我的WIP。在渲染几何体之前,您必须给它一秒钟正确放置粒子。我可以加快速度,但我喜欢动画:)
答案 0 :(得分:3)
如果您希望旋转立方体使其与球体相切,则将每个立方体视为棒的末端。
棒是位于原点的Object3D
。立方体是位于( 0, 0, r )
的棒子。现在将棍子旋转到您想要的位置。 (但避开北极和南极。)
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