Spinning a 3D shape on its y-axis using three.js

Question

Spinning a 3D shape on its y-axis using three.js

Recently I delved into the world of three.js and came across an interesting project that I am trying to tweak.

I am curious to find out if there is a way to make the globe object rotate around its y-axis with minimal changes to the existing code, or if a complete rewrite is necessary.

var canvas = document.querySelector('canvas');
var width = canvas.offsetWidth,
height = canvas.offsetHeight;

// Remaining code remains the same as before

For full code implementation, you can check out the Codepen link - https://codepen.io/quickwaste/pen/PaGPdw

Thank you!

(As a bonus challenge, I aim to have the camera respond to mouse movements)

javascript three.js

Answer 1

Answer №1

To create a gentle, rotating effect on the globe, insert galaxy.rotateY(0.005 * Math.PI); into the render() function just before calling renderer.render(scene, camera), as shown below:

// excerpt from the CodePen
function render(a) {

    // ... code omitted for brevity

    prevHovered = hovered.slice(0);
    attributeSizes.needsUpdate = true;
    attributePositions.needsUpdate = true;

    galaxy.rotateY(0.005 * Math.PI);

    renderer.render(scene, camera);
}

The choice of multiplier 0.005 was made to imbue the globe with a slow and graceful rotation.

The object 'galaxy' is represented by a THREE.Group, acting as a container for multiple THREE.Object3D components. The Object3D provides an array of useful functions for manipulating 3D objects through rotations, translations, and transformations. Utilizing the rotateY() method will rotate the model around its local y-axis.

Answer 2

To create a gentle, rotating effect on the globe, insert galaxy.rotateY(0.005 * Math.PI); into the render() function just before calling renderer.render(scene, camera), as shown below:

// excerpt from the CodePen
function render(a) {

    // ... code omitted for brevity

    prevHovered = hovered.slice(0);
    attributeSizes.needsUpdate = true;
    attributePositions.needsUpdate = true;

    galaxy.rotateY(0.005 * Math.PI);

    renderer.render(scene, camera);
}

The choice of multiplier 0.005 was made to imbue the globe with a slow and graceful rotation.

The object 'galaxy' is represented by a THREE.Group, acting as a container for multiple THREE.Object3D components. The Object3D provides an array of useful functions for manipulating 3D objects through rotations, translations, and transformations. Utilizing the rotateY() method will rotate the model around its local y-axis.

Spinning a 3D shape on its y-axis using three.js

Answer №1

Similar questions

How can you prevent multiple instances of JavaScript objects from being disposed of after they have completed their task?

What causes the intersection observer handler to not trigger when using scrollTo or scrollIntoView?

Creating Angular UI states with parameters in TypeScript

Activate the Keypress event to update the input value in React upon pressing the Enter

Display a Vue.js div element based on conditions matching a specific variable value

How to Show a Div When Clicking using Javascript

Struggling with implementing checkboxes within an HTML div using JavaScript

How to update a nested object within an array in mongoose by referencing its specific id

Tracking tool for monitoring progress of HTTP POST requests

Methods for reloading the requirejs module

Error in Firebase Cloud Function: Function did not return the expected Promise or value and instead returned undefined

Guide to incorporating a fadeIn effect in Jquery triggered by a change event

Ways to display a block within the visible window by simply clicking on another block

Concealing and revealing the triangular indicator within a bullet diagram using the AngularJS-nvd3-directives library

Implementing a function trigger on button click using jQuery

Placing a hyperlink within template strings

Experiencing issues with the Google Drive file selection API due to JavaScript

Removing filters dynamically from ng-repeat in Angular

Revamping HTML table with AJAX in PHP

A guide to update values in mongodb using node.js