javascript - 三个js对象3D旋转

Question

喂! 我在三个 JS(r71)/THREEx (THREEx.LaserBeam) 中遇到了一个奇怪的问题。我在旋转 Object 3D 时遇到问题。

我正在计算纬度，姿态指向 phi,theta，如下所示: (或 50/-51 的任何其他变量)

var phi = (90 - 50) * Math.PI / 180;
var theta = (-51) * Math.PI / 180;

在此之后，我使用以下代码在该位置放置一个球体:

var geometry = new THREE.SphereGeometry( 0.005, 15, 15 );
var material = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
var sphere = new THREE.Mesh( geometry, material );

scene.add( sphere );

sphere.position.x = 0.5 * Math.sin(phi) * Math.cos(theta);
sphere.position.y = 0.5 * Math.cos(phi);
sphere.position.z = 0.5 * Math.sin(phi) * Math.sin(theta);

然后我使用以下代码将我的光线旋转到相同的位置:

laserBeam.rotation.y = -theta
laserBeam.rotation.z = phi

laserBeam 在 Object3D 中实际上充当“线”。光线的原点位于 (0,0)。所以我一点也不知道为什么它没有穿过球体(参见 screenshot )。

有什么想法吗？

---编辑--- 或者这里是一个简单的例子

var phi = (90 - 50) * Math.PI / 180;
var theta = (-51) * Math.PI / 180;
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(1 * Math.sin(phi) * Math.cos(theta), 1* Math.cos(phi), 1 * Math.sin(phi) * Math.sin(theta)));
var material = new THREE.LineBasicMaterial({
                                    color: 0x0000ff
                                });
var line = new THREE.Line(geometry, material);
containerLine   = new THREE.Object3D();
containerLine.add( line );
scene.add(containerLine);

Answer 1

您错误地计算了一个小半径和 y 坐标:

var rm = R * Math.cos(phi); // vs `R * Math.sin(phi)`
sphere.position.x = rm * Math.cos(theta);
sphere.position.y = R * Math.sin(phi); // vs `R * Math.cos(phi)`
sphere.position.z = rm * Math.sin(theta);

http://jsfiddle.net/sxen2kLd/