Question

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

2D功能位于此fiddle。

我在my own scene中实施它时遇到了麻烦。首先，获取元素＆＃39;对于three.js中的网格而言，id很棘手。

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

此示例代码中您为网格命名并传递它并不是为我做的 - 这标志着我能找到的唯一搜索结果。

另外，我不明白通过添加第三维如何编写三角函数。

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中使用它的担忧。

Answer 2

这是一种让three.js为您处理三角函数的替代方法：http://jsfiddle.net/SF9tX/438/

使用three.js

2 个答案: