javascript - 使用 three.js 将 2D 旋转到 3D

Question

我正在尝试重新创建一个片段的功能，我发现它可以围绕另一个元素旋转任何给定元素，非常类似于行星自转。我想将这个 2D 旋转系统用于 three.js 的 3D 项目。

2D 功能在此 fiddle 中.

我在 my own scene 中实现时遇到问题尽管。对于初学者来说，获取 three.js 中网格的元素 ID 是很棘手的。

myObject.name = "objectName";
...
var object = scene.getObjectByName( "objectName" );

这个您命名网格并通过它的示例代码并不适合我 - 它标志着我能找到的唯一搜索结果。

此外，我不明白通过添加第三维需要如何编写三 Angular 函数。

return {
        x: Math.cos(ang) * r - Math.sin(ang) * r + coorX, 
        y: Math.sin(ang) * r + Math.cos(ang) * r + coorY 
    };

因此，其中涉及的一些工作完全超出了我的能力范围。这就是为什么我看不到 3D 环境的功能需要是什么样子的原因？如果你能帮我解决这个问题，谢谢。

Answer 1

我不知道为什么您在实现它时遇到困难，因为您几乎可以从找到的代码段中复制粘贴。

我不知道如何使用 JSFiddle。我点击了更新，但我不知道您是否可以看到更改。这就是我将它们也张贴在这里的原因。

//creates the scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 500 / 400, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex( 0xffffff, 1 );
renderer.setSize(625, 500);
document.body.appendChild(renderer.domElement);

//creates the two objects
var geometry = new THREE.SphereGeometry(1.5, 50, 50);
var material = new THREE.MeshPhongMaterial( {color: 0x9a806e} );
var sphere1 = new THREE.Mesh(geometry, material);
var sphere2 = new THREE.Mesh(geometry, material);
//sets positions
sphere1.position.set(0, 0, 0);
sphere2.position.set(-10, 0, 0);

//adds the two spheres to the scene
scene.add(sphere1);
scene.add(sphere2);

//default camera pos
camera.position.z = 400;

var object = {speed: 1.2, spin: 100, side: 0.0};

// copied from snippet
function rotation(coorX, coorY, object) {
object.side +=  (1.0 / object.speed); 
var ang = object.side * 2.0 * Math.PI / 180.0; 
var r = object.spin;

return {
    x: Math.cos(ang) * r - Math.sin(ang) * r + coorX, 
    y: Math.sin(ang) * r + Math.cos(ang) * r + coorY 
};
}  

//renders the scene
var render = function () {
    newpos = rotation(sphere1.position.x, sphere1.position.y, object);
  sphere2.position.x = newpos.x;
    sphere2.position.y = newpos.y;
renderer.render(scene, camera);    
};

setInterval(render, 1000 / 60)

我还认为您也可以在 3d 中使用它。因为 3d 只添加了 z 轴，我认为这没有什么区别。但也许你可以向我解释一下你对在 3d 中使用它的担忧。