Rotating a 3D object in Three.js around any axis using the Loop Rotation feature

Question

Rotating a 3D object in Three.js around any axis using the Loop Rotation feature

I'm currently attempting to create a 3D object that rotates continuously on any axis, similar to a classic cube or sphere. However, I'm encountering an issue where the object is not moving at all and I'm unsure why. Here is the code I'm using:

var scene6, camera6, renderer6, light, shipMtl, shipObj;

function init() {
    scene6 = new THREE.Scene();
    camera6 = new THREE.PerspectiveCamera(35, 1, 1, 1000);
    camera6.position.z = 400;

    //LIGHTS
    light = new THREE.PointLight(0xffffff, 2, 0);
    light.position.set(200, 100, 300);
    scene6.add(light);


    //3D MODEL
    shipMtl = new THREE.MTLLoader();
    shipMtl.load('../models/spaceCraft1.mtl', function(materials) {
        materials.preload();
        shipObj = new THREE.OBJLoader();
        shipObj.setMaterials(materials);
        shipObj.load('../models/spaceCraft1.obj', function(object) {
            object.scale.set(10, 10, 10);
            object.rotation.x += .01;
            scene6.add(object);
        });
    });

    renderer6 = new THREE.WebGLRenderer({ canvas: document.getElementById('model'), antialias: true });
    renderer6.setClearColor(0x000000);
    renderer6.setPixelRatio(window.devicePixelRatio);

    animate6();
}

function animate6() {

    requestAnimationFrame(animate6);
    renderer6.render(scene6, camera6);

}

window.onload = init;

Any assistance you can provide would be greatly appreciated.

javascript 3d three.js

Answer 1

Answer №1

The object's rotation will only be altered once - during the loading of the model.

If you wish for the object to rotate continuously, you must update its rotation every frame. To achieve this, you should move the object.rotation.x += 0.01 line inside the animate() function.

var scene6, camera6, renderer6, light, shipMtl, shipObj;
var obj; // reference to the loaded model

function init() {
    scene6 = new THREE.Scene();
    camera6 = new THREE.PerspectiveCamera(35, 1, 1, 1000);
    camera6.position.z = 400;

    //LIGHTS
    light = new THREE.PointLight(0xffffff, 2, 0);
    light.position.set(200, 100, 300);
    scene6.add(light);

    //3D MODEL
    shipMtl = new THREE.MTLLoader();
    shipMtl.load('../models/spaceCraft1.mtl', function(materials) {
        materials.preload();
        shipObj = new THREE.OBJLoader();
        shipObj.setMaterials(materials);
        shipObj.load('../models/spaceCraft1.obj', function(object) {
            object.scale.set(10, 10, 10);
            // rotation adjustment should be done in the animate function
            obj = object; // save object as global reference
            scene6.add(object);
        });
    });

    renderer6 = new THREE.WebGLRenderer({ canvas: document.getElementById('model'), antialias: true });
    renderer6.setClearColor(0x000000);
    renderer6.setDevicePixelRatio(window.devicePixelRatio);

    animate6();
}

function animate6() {
    requestAnimationFrame(animate6);

    obj.rotation.x += 0.01;

    renderer6.render(scene6, camera6);
}

window.onload = init;

Answer 2

The object's rotation will only be altered once - during the loading of the model.

If you wish for the object to rotate continuously, you must update its rotation every frame. To achieve this, you should move the object.rotation.x += 0.01 line inside the animate() function.

var scene6, camera6, renderer6, light, shipMtl, shipObj;
var obj; // reference to the loaded model

function init() {
    scene6 = new THREE.Scene();
    camera6 = new THREE.PerspectiveCamera(35, 1, 1, 1000);
    camera6.position.z = 400;

    //LIGHTS
    light = new THREE.PointLight(0xffffff, 2, 0);
    light.position.set(200, 100, 300);
    scene6.add(light);

    //3D MODEL
    shipMtl = new THREE.MTLLoader();
    shipMtl.load('../models/spaceCraft1.mtl', function(materials) {
        materials.preload();
        shipObj = new THREE.OBJLoader();
        shipObj.setMaterials(materials);
        shipObj.load('../models/spaceCraft1.obj', function(object) {
            object.scale.set(10, 10, 10);
            // rotation adjustment should be done in the animate function
            obj = object; // save object as global reference
            scene6.add(object);
        });
    });

    renderer6 = new THREE.WebGLRenderer({ canvas: document.getElementById('model'), antialias: true });
    renderer6.setClearColor(0x000000);
    renderer6.setDevicePixelRatio(window.devicePixelRatio);

    animate6();
}

function animate6() {
    requestAnimationFrame(animate6);

    obj.rotation.x += 0.01;

    renderer6.render(scene6, camera6);
}

window.onload = init;

Rotating a 3D object in Three.js around any axis using the Loop Rotation feature

Answer №1

Similar questions

Reload the page when the value reaches 1

Error encountered: Firebase cloud function in Node.js V10 has experienced a parsing issue due to an unexpected token 'select

Guide to creating a transition effect for opacity in React Fiber and Drei by utilizing the <Text> component

Limit the use of map() to only the immediate children of the parent element

Is it possible to use the `fill` method to assign a value of type 'number' to a variable of type 'never'?

The db.all method does not provide an array as its return variable

``motioning a component beneath another component that may be in a state

Efficient method for retrieving the values of each cell in a row within an array

Unable to load the requested resource: net::ERR_FAILED

Converting MSK time to SST time using JavaScript: A Handy Guide

Retrieve the original jqXHR object from the success callback of the $.ajax function

What is the best way to create a line break within a loop in React?

Using the integrated pipeline mode in IIS is necessary for this operation to be

"Could you please help me understand the process of receiving a JSON in an Express

Exploring Vue and Nuxt JS: What Causes the Issue of Unable to Create the Property 'display' on the String 'bottom:30px;right:30px;'

Shifting the MUI DataGrid Pagination table to the left with CustomPagination: A step-by-step guide

What is the best way to incorporate AngularJS data into JavaScript for use in Google Chart?

Initiate Child Event within Parent Component

Use $.ajax to display the menu by capturing an array of elements {0}

Experiment with jQuery and JavaScript compatibility specifically on Internet Explorer 6