Display issue with Three.js scene

I have encountered an issue with Three.js. I successfully created a scene with a 3D model that could rotate, but when I attempted to implement Object Oriented Programming (OOP) in JavaScript for the scene, I ended up with a black screen and the scene not rendering as expected.

Below is the code snippet causing the problem:

function deg2radians(degs)
{
return Math.PI * degs / 180.0;
}

var OBJLoaded = function()
{
this.createRender();
this.createScenes();
this.createCamera();
this.createLights();

this.loadModel();

this.render();
};

// Code continues here...

If anyone can provide insight into why this OOP implementation is not functioning correctly, it would be greatly appreciated. Thank you!

EDIT : Here is my working code without "OOP":

var scene, camera, renderer, controls;
var object;
var OBJLoaded;

init();
animate();

// More code follows...

Answer №1

It appears that the specific line in your code.

this.renderer.render(this.scene, this.camera);

is being skipped due to a missing initialization of the this.needupdate flag as true. Instead, it remains undefined.

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

Modify a JavaScript object in JSON format using another object as reference

Consider two JSON formatted JavaScript objects: obj1 = { prop1: 1, prop2: 2, prop3: 3 } obj2 = { prop1: 1, prop2: 3 } In the context of jQuery or Angular, what is the recommended practice to update obj2 into obj1 while also re ...

The current error received from navigator.geolocation.getCurrentPosition is "Position acquisition error: Unknown."

I am currently exploring the geolocation API in my project. After allowing my browser - whether it's on localhost or a web host - to access my location, I noticed that my console.log is displaying: Unknown error acquiring position I'm puzzle ...

"Enhance your online shopping experience with a React.js popup modal for

In the midst of developing a shopping cart, I find myself facing a challenge in making the modal pop up when clicking on the shopping cart icon. The semantic-ui documentation for modals has not provided clear instructions on achieving this functionality, s ...

Attempting to interpret HTML in Javascript

I have a text string that contains HTML tags. Initially, I attempted to insert this using innerHTML, but the tags were displayed as plain text. After some troubleshooting, I realized that I needed to properly parse the HTML content. Although jQuery prov ...

Implement a feature in Vue.js where clicking a button changes the background color

I'm working on an app using VUE JS and incorporating various components. Within one of the components, I have a button that I want to change color when clicked. This button is responsible for selecting different items from a table, so I'd like i ...

Issue with Angular2 and JavaScript: Error encountered due to missing parameters in the .map callback function

Currently, I am in the process of developing my very first Angular2 project. This project involves building a web application centered around Pokemon. However, as I attempt to load the page, I keep encountering the following error messages: failed to comp ...

The Angular 1.x Ajax request is not triggering the expected update in the view

I am encountering an issue with my Angular application where the data retrieved from a JSON file is not updating in the view when the JSON file is updated. It seems like the JSON file and the view are out of sync. As a newcomer to Angular, I am struggling ...

Issue with page not updating after local storage change and returning to previous page

I have encountered an issue where in Firefox and Safari, the value retrieved from localstorage on the first page is not updated until I manually refresh the page after setting the localstorage value on the second page. Disabling the cache did not resolve t ...

Verifying the activation status of a button within a Chrome extension

I have been working on a chrome plugin that continuously checks the status of a button to see if it is enabled. If it is, the plugin clicks on the button. I initially used an infinite for loop for this task, but realized that it was causing the browser to ...

How can I make a polygon or polyhedron using Three.js?

Is it possible to generate polygon or polyhedron shapes in three.js using alternative methods? var customShapePts = []; customShapePts.push( new THREE.Vector2 ( -50, 200 ) ); customShapePts.push( new THREE.Vector2 ( 100, 200 ) ); customShapePts.push( ne ...

Is it possible to utilize two nested routes in React Router Dom v6 while using the colon symbol ( : )?

I launched a new react website called My Website Take a look at my website for better understanding In the blog section, I implemented two nested routes <Route path="/blog" element={<Blog />} > <Route path="" e ...

No errors detected when utilizing bcrypt-node for callbacks

I have developed a node library file named encrypt.js. Inside this file, there are functions created using bcrypt-nodejs var bcrypt = require('bcrypt-nodejs'); exports.cryptPassword = function(password, callback) { bcrypt.genSalt(10, f ...

"Discover the step-by-step process of transforming an input field value into a checkbox with

I've been experimenting with creating a To-Do list using HTML, CSS, and Javascript. I've managed to capture the input field value in a fieldset so far. However, my goal is to find a way to transform the input field value from the textfield into a ...

Using iFrames to switch sources repeatedly

I have created an iFrame and I am looking to dynamically change its source to one of 10 different URLs each time it loads: Here is the desired behavior: iFrame loads => change to example.com => iFrame loads => change to example1.com => iFrame ...

What is the best way to perform an inner join in MongoDB using Mongoose and NestJS?

I need to merge customer and product data in the same request from a system using Mongoose with MongoDB in Nest JS. Here is an example of how the data is structured in the database: "_id": "621d2137abb45e60cf33a2d4", "pr ...

Automatically substitute a term with a clickable link

Is there a way to automatically turn every word into a hyperlink? I have specific words that need to be linked. For example, I want Ronaldo (Only for the First Appearance) to link to a certain page. However, my attempted method did not work. <p> Ro ...

What is the proper method for implementing an event listener exclusively for a left mouse click?

Is there a way to make Phaser recognize only left mouse clicks as click events, excluding right and middle clicks? Check out this Phaser example at the following link: https://phaser.io/examples/v2/basics/02-click-on-an-image. ...

Having trouble removing items from the data grid list in react material-ui, any thoughts on what might be causing the issue?

I'm facing an issue with deleting items from a basic list of customers rendered using material UI DataGrid. Even though I can retrieve the specific customer id when logging to the console, I am unable to delete the item from the list. You can view my ...

Tips for rotating Object3D in three.js around its own center using TransformControls

I'm attempting to rotate the Object3D (which is a mesh group) using the TransformControls. To achieve this, I have attached the TransformControls to the Object3D and positioned the TransformControls at the center of the Object3D. Here is the code I ...

Using multiple header tags in HTML

I have been tasked with developing a webpage featuring a prominent header at the top of the page. This header will include the navigation bar, logo, and website title. As the user begins to scroll, I want the header to transform into a compact version that ...