Transforming 2D rotation into 3D using three.js

Question

Transforming 2D rotation into 3D using three.js

I stumbled upon a fascinating snippet that allows elements to rotate around another element, mimicking planetary rotation. I'm eager to incorporate this 2D rotation feature into a three.js project for a more immersive 3D experience.

The demo showcasing the 2D functionality can be found in this example.

However, I'm encountering difficulties while trying to integrate it into my own scene. Identifying the IDs of meshes in three.js poses a challenge initially.

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

The suggested method of naming and retrieving meshes didn't work out as expected - unfortunately, it was the only reliable solution I could locate.

Furthermore, I am struggling to comprehend how to adjust trigonometric functions when transitioning from 2D to 3D.

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

It seems there are complexities beyond my current skill level. If anyone could shed light on how this functionality should look like in a 3D environment, I would greatly appreciate your assistance.

javascript three.js

Answer 1

Answer №1

It's interesting that you encountered difficulties implementing this, as you could simply copy and paste from the snippet you discovered.

I'm not familiar with JSFiddle either. I clicked update, but I'm uncertain if you can view the changes. That's why I'll include them here too.

//Setting up 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);

//Creating 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);
//Setting positions
sphere1.position.set(0, 0, 0);
sphere2.position.set(-10, 0, 0);

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

//Default camera position
camera.position.z = 400;

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

//Function for rotation (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
    };
}

//Rendering 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)

I believe this can also be utilized in 3D, as adding the z-axis only introduces depth. Feel free to elaborate on any concerns you may have regarding its usage in 3D.

Answer 2

It's interesting that you encountered difficulties implementing this, as you could simply copy and paste from the snippet you discovered.

I'm not familiar with JSFiddle either. I clicked update, but I'm uncertain if you can view the changes. That's why I'll include them here too.

//Setting up 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);

//Creating 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);
//Setting positions
sphere1.position.set(0, 0, 0);
sphere2.position.set(-10, 0, 0);

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

//Default camera position
camera.position.z = 400;

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

//Function for rotation (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
    };
}

//Rendering 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)

I believe this can also be utilized in 3D, as adding the z-axis only introduces depth. Feel free to elaborate on any concerns you may have regarding its usage in 3D.

Answer 3

Answer №2

Check out this innovative method that leverages three.js to handle trigonometry effortlessly: http://jsfiddle.net/SF9tX/438/

Key code snippet:

var sphere2Rig = new THREE.Object3D();

sphere2.position.x = -10;
sphere2Rig.add(sphere2);
scene.add(sphere2Rig);

var render = function () {
    sphere2Rig.rotation.z -= 0.025;
    renderer.render(scene, camera);

    requestAnimationFrame(render);
};

By creating a "rig" positioned at the origin and containing the sphere2-object placed elsewhere, you can easily rotate all children simultaneously by rotating the rig itself. The rig's origin serves as the central rotation point for all child elements.

Answer 4

Check out this innovative method that leverages three.js to handle trigonometry effortlessly: http://jsfiddle.net/SF9tX/438/

Key code snippet:

var sphere2Rig = new THREE.Object3D();

sphere2.position.x = -10;
sphere2Rig.add(sphere2);
scene.add(sphere2Rig);

var render = function () {
    sphere2Rig.rotation.z -= 0.025;
    renderer.render(scene, camera);

    requestAnimationFrame(render);
};

By creating a "rig" positioned at the origin and containing the sphere2-object placed elsewhere, you can easily rotate all children simultaneously by rotating the rig itself. The rig's origin serves as the central rotation point for all child elements.

Transforming 2D rotation into 3D using three.js

Answer №1

Answer №2

Similar questions

Delay the HTTPs request until the password encryption is complete

Stanza.io encountered difficulties in generating a WebRTC answer

Ensure that the folder name contains specific characters

A guide on efficiently traversing a disk directory, recursively fetching all paths in relative format, and converting them into a JSON stream with node.js

When Electron's WebView.loadURL is called, it initiates a reloaded page

Optimizing performance: Enhance readback operations in Canvas2D by enabling the willReadFrequently attribute for faster getImageData processing

Having trouble with the placeholder blur feature on images in Next.js?

The radio button fails to trigger the setState function in React

The latest alpha version of Angular2 Material Design (alpha.9-3) encountered a "404 not found" error when trying to access @angular

Manipulate your table data with jQuery: add, update, delete, and display information with ease

Discover the best approach for transforming a complicated JSON object/array into a map using inheritance coding techniques

Incorporating an HTML Canvas element within a CSS grid design

Clicking on the Material-UI slider that uses multiple useState causes duplication issues

Efficiently add an object to the beginning of an array in React/Redux by utilizing the spread

Restricting movement in Jquery draggable through the drag function

Add empty objects to an array using a push function following the Vue JS constructor function

Adding elements to a list using the appendChild method

What is the technique for utilizing JavaScript to toggle the opening and closing of a Bootstrap 5 navbar dropdown?

How can user input be converted into a JavaScript variable?

Unable to transmit an object containing a property that includes an array of other objects