The rotation function of a THREE.js object seems to be malfunctioning

Currently, I am facing an issue with a Blender object that I have successfully displayed on my web page using THREE.js. However, for some reason the object is not rotating when my loop function is called.

In my approach to working with JavaScript, I am trying to maintain an Object-Oriented Programming (OOP) methodology.

Below is a snippet of the code I have been working on:

var scene, camera, renderer, box;

function createScene() {
    // Code for creating the scene
}

function createLight() {
    // Code for creating light
}

function createBox() {
    // Code for creating the box object
}

// Definition of Box constructor and related methods

function loop() {
    // Looping through animation frames
}

function init() {
    // Initializing the scene, light, box, and loop functions
}

window.addEventListener('load', init, false);

Answer №1

It seems like there may be a scope issue in the code you provided, which could result in errors being thrown. To address this, try implementing the following solution:

Box = function() {
  this.mesh = false;
  var loader = new THREE.JSONLoader();
  var scope = this;
  loader.load('json/model.json', function(geometry, materials) {
      scope.mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
      scope.mesh.scale.x = scope.mesh.scale.y = scope.mesh.scale.z = 0.75;
      scope.mesh.translation = geometry.center();
      scene.add(scope.mesh);
  });
}

Box.prototype.rotateBox = function() {
    if (!this.mesh) {
        return;
    }

    this.mesh.rotation.x += .001;
    this.mesh.rotation.y += .01;
}

Additionally, it's important to address the unhandled scope of the "light" object in your code and make necessary adjustments.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to activate the nearby dropdown based on the user's selection?

On my html webpage, I have a form that consists of three dropdown menus each with different options: The first dropdown (A) includes choices from 1 to 6, as well as 'not set'. The second dropdown (B) allows selections from 1 to 7, and also has ...

Preserve dropdown selections in JavaScript even when the page is refreshed

Two dropdown menus are present, where the second dropdown menu is dependent on the selection made in the first dropdown. However, after refreshing the page following an ajax update, the second dropdown does not retain the previously selected choice. How ...

Guide on utilizing async/await in .ts files (Encountering error message: "async functions can only be used when targeting ECMAScript 6 or above")

Initially, my project consisted of only app.js using ExpressJS as the main file with numerous lines of code. My development manager instructed me to refactor the code and move some functions into a separate .ts file (transition from JavaScript to TypeScrip ...

Which regular expression should be used to validate names with international characters?

Currently in my PHP project using Codeigniter, I am implementing form validation. Specifically, I have configured the validation rules for the name field like this: $this->form_validation->set_rules('name', 'Nombre', 'requir ...

"NextAuth encounters an issue while trying to fetch the API endpoint: req.body

Trying to implement authentication in my Next.js app using NextAuth.js, I've encountered an issue with the fetching process. Here's the code snippet from the documentation: authorize: async (credentials, req) => { const res = await fetch ...

Utilizing dropbox.js in combination with OAuth 1: A step-by-step guide

I'm in the process of revamping a website that already exists, and although I have the code from the previous version, I'm encountering challenges replicating certain functionalities in the new iteration. Here's the situation: The user is ...

Exploring the power of "this" in Vue.js 2.0

Seeking help with a VueJS issue. I am trying to create a voice search button that records my voice and prints it out in an input form. <input type="text" name="inputSearch" id="inputSearch" v-model="inputSearch" class="form-control" x-webkit-speech> ...

Why is my AngularJS application triggering two events with a single click?

<button id="voterListSearchButton" class="serachButton" ng-click="onSearchButton1Click()">find</button> This button allows users to search for specific information: $scope.onSearchButton1Click = function() { var partId = $("#partIdSearch" ...

Loading events for a fullCalendar in node.js using the jade library

I successfully integrated fullCalendar into my nodeJS application using jade and Express, and I have managed to load the calendar. Within the jade file, I pass an array containing events information. How can I display these events on the calendar within th ...

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

Sending a null value through AJAX to a controller

I've been working on adjusting my save routine to pass a null value to id_cellcarrier in my codeigniter controller. The code snippet below showcases what I've attempted so far, but it doesn't seem to be functioning correctly. I'm omitti ...

Encountering the error "object object" while attempting to pass parameters to my servlet through AJAX

Experiencing an issue where my ajax call is ending up in the error function. I have noticed that my success function is empty, but I was expecting to receive messages from my servlet whether the data provided is correct or incorrect. The popup dialog displ ...

Dealing with multiple input fields that are generated using the map method in combination with react-redux

I am working on a project where I have a product list in JSON format stored in json-server. I am using React-Redux to fetch the data and render it in a table. Additionally, I have an input field where users can enter the quantity of each product. I need to ...

Adjust the background color of children based on the parent's mouseover event

Seeking a solution to fill three bars with varying percentages: <div class="bars" style="width:0%; background-color: red;"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </ ...

Using ReactJS and Redux to dispatch notifications

I have a query regarding displaying notifications for successful or failed user registration actions. Utilizing Redux, I've implemented the following action page: export function registerUserFail(error){ return { type:REGISTER_USER_FAIL, ...

The tooltip in chart.js stubbornly holds onto past data even after it's been

Utilizing chart.js, I have implemented a feature where a tooltip displays when a user hovers over the chart successfully. However, I encountered an issue. I added an option for users to un-check data-points, which works correctly. But now, the tooltip fun ...

How to Retrieve Content from an iFrame Using jQuery?

I am facing a challenge with an HTML form that is directed to an IFRAME upon clicking "submit". The iframe then loads a page after the submission, which indicates whether the user-input data is valid or not. It simply displays on screen as "TRUE" or "FALSE ...

Execute a function every 10 seconds after it finishes running (JavaScript)

I am currently facing a challenge with a function that utilizes the "post" method to retrieve data from the server for processing. The amount of data retrieved varies, leading to longer completion times (around 30 seconds). My goal is to have this functi ...

Bring the element into view by scrolling horizontally

I am facing a challenge with a list of floated left divs inside another div. This inner block of divs can be hovered over to move it left and right. Each inner div, known as 'events', has class names that include a specific year. Additionally, t ...

"Is it possible to access variables declared in the main app.js file from separate route files in Node.js Express 2.5.5 and if so

Recently, I've started using the latest version of Express (2.5.5) which now automatically creates a ./routes directory in addition to ./views and ./public In the routes directory, there is an index.js file that includes: /* * GET home page. */ e ...