gpt4 book ai didi

javascript - 三个js对象3D旋转

转载 作者:行者123 更新时间:2023-11-30 16:39:38 25 4
gpt4 key购买 nike

喂!我在三个 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);

最佳答案

您错误地计算了一个小半径和 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/

关于javascript - 三个js对象3D旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32200298/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com