如何使用 THREE.js 围绕行星旋转一些卫星? [英] How do I rotate some moons around a planet with THREE.js?

问题描述

我认为这张图片最能说明我的问题:

I think this picture best explains my issue:

首先我沿红线翻译框.接下来，我希望旋转的效果是 a 中的蓝线，但实际发生的更像是 b 中的蓝线.感觉改变旋转总是相对于原始对象空间，但平移(尽管首先发生)总是相对于父对象，并不会真正影响与对象空间相关的几何点.如果这令人困惑，我深表歉意；显然我是新手.

First I translate the box along the red line. Next, I want the effect of rotation to be the blue line in a, but what's actually happening is more like the blue line in b. It feels like changing the rotation is always relative to the original object space, but the translation (despite happening first) is always relative to the parent, and doesn't really affect the geometry points in relation to the object space. I apologize if that's confusing; clearly I'm new at this.

产生这种效果的代码的重要部分如下.请记住，图像的方向与此代码生成的方向不同；图片只是一个例子，可以清楚地展示效果.

The important part of the code which produces this effect is below. Please keep in mind that the orientation of the image is different than this code produces; the image is merely an example to show the effect clearly.

var objectContainer = new THREE.Object3D();

var tubeRadius = 100;
var tubeGeometry = new THREE.CylinderGeometry(tubeRadius, tubeRadius, tubeRadius * 3, 36, 1, false);
var tube = new THREE.Mesh(tubeGeomtry, material);
scene.add( tube );

var boxes = new THREE.Object3D();
var boxEdge = 50;
var boxGeometry = new THREE.CubeGeometry(boxEdge, boxEdge, boxEdge);
var box1 = new THREE.Mesh( boxGeometry, material );
box1.translateX(tubeRadius + boxEdge / 2 + 5);
box1.translateY(boxEdge / 2);
box1.rotation = new THREE.Vector3(0, 2*Math.PI/3*0, 0);
boxes.add(box1);
var box2 = box1.clone();
box2.rotation = new THREE.Vector3(0, 2*Math.PI/3*1, 0);
boxes.add(box2);
var box3 = box1.clone();
box3.rotation = new THREE.Vector3(0, 2*Math.PI/3*2, 0);
boxes.add(box3);
scene.add( boxes );

我能想到的唯一解决方案是将每个盒子包裹在另一个对象空间中并围绕它旋转，但这似乎是多余的工作.实现我正在寻找的结果的首选方法是什么?

The only solution I can think of is to wrap each box in another object space and rotate about that, but it seems like excessive work. What is the preferred method to achieve the result I'm looking for?

推荐答案

有几种方法可以做你想做的，但我认为最简单的就是这样:

There are several ways of doing what you want, but I think the easiest is like so:

// parent
parent = new THREE.Object3D();
scene.add( parent );

// pivots
var pivot1 = new THREE.Object3D();
var pivot2 = new THREE.Object3D();
var pivot3 = new THREE.Object3D();

pivot1.rotation.z = 0;
pivot2.rotation.z = 2 * Math.PI / 3;
pivot3.rotation.z = 4 * Math.PI / 3;

parent.add( pivot1 );
parent.add( pivot2 );
parent.add( pivot3 );

// mesh
var mesh1 = new THREE.Mesh( geometry, material );
var mesh2 = new THREE.Mesh( geometry, material );
var mesh3 = new THREE.Mesh( geometry, material );

mesh1.position.y = 5;
mesh2.position.y = 5;
mesh3.position.y = 5;

pivot1.add( mesh1 );
pivot2.add( mesh2 );
pivot3.add( mesh3 );

然后在你的渲染循环中:

Then in your render loop:

parent.rotation.z += 0.01;

更新小提琴:https://jsfiddle.net/edqf7ugc/

three.js r.116

three.js r.116

这篇关于如何使用 THREE.js 围绕行星旋转一些卫星?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！