三个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 中充当 "line"。光线的原点位于 (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/

Answer 2

啊终于....不知道我现在是如何以及为什么太累而无法理解，但发布它

function latLongToVector3(lat, lon, radius, heigth) {
                    var phi = (lat)*Math.PI/180;
                    var theta = (lon-180)*Math.PI/180;

                    var x = -(radius+heigth) * Math.cos(phi) * Math.cos(theta);
                    var y = (radius+heigth) * Math.sin(phi);
                    var z = (radius+heigth) * Math.cos(phi) * Math.sin(theta);

                    return new THREE.Vector3(x,y,z);
                }

var helper = latLongToVector3(51.227821,51.3865431,0.5,0);
    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 = helper.x
    sphere.position.y = helper.y
    sphere.position.z = helper.z
    ----------------------------------------------------
    var helper = latLongToVector3(51.227821,51.3865431,0.5,0);
    function rotateAroundWorldAxis(object, axis, radians) {
      rotWorldMatrix = new THREE.Matrix4();
      rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
      rotWorldMatrix.multiply(object.matrix);
      object.matrix = rotWorldMatrix;
      //object.rotation.setEulerFromRotationMatrix(object.matrix);
      object.rotation.setFromRotationMatrix(object.matrix);
    }


    laserBeam.useQuaternion  = true;

    var origVec = new THREE.Vector3(1, 0, 0);
    var targetVec = helper;
    targetVec.normalize();
    var rotateQuaternion = new THREE.Quaternion();
    var axis = new THREE.Vector3(0, 0, 0); 
    var angle = Math.acos(origVec.dot(targetVec));
    axis.cross(origVec, targetVec);
    axis.normalize();

    rotateAroundWorldAxis(laserBeam,axis,angle);

三个js对象3D旋转

Three js Object 3D rotation

javascript

rotation

three.js