What could be causing the axesHelper function to not display the axis on the screen?

I encountered an issue with my code while working with three.js. I am having trouble initializing certain components and objects such as the axis and cube, as they are not displaying on the screen. Can someone please help me identify where the error might be occurring?

function gameInit(axlesHelper) {
  (axlesHelper) ? gameComponent.setAxlesHelper() : null;
  gameComponent.setAambientLight();
  gameComponent.setDirectionalLight();
  gameComponent.setCameraPosition();
  gameComponent.renderer();
}

var gameComponent = {
  scene: new THREE.Scene(),
  axesHelper: new THREE.AxesHelper(10),
  ambientLight: new THREE.AmbientLight(0xffffff, 0,6),
  directionalLight: new THREE.DirectionalLight(0xffffff, 1),
  aspect: window.innerWidth / window.innerHeight,
  width: 10,
  height: this.width / this.aspect,
  camera: new THREE.OrthographicCamera(
    this.width * -2, // left
    this.width * 2, // right
    this.height * 2, // top
    this.height * -2, // bottom
    0, // near plane
    10000 // far plane
  ),
  render: new THREE.WebGLRenderer({ antialias: true }),

  setAxlesHelper: function () {
    console.log('Axles Helper called');
    this.scene.add(this.axesHelper);
  },
  .
  .
  .
  renderer: function () {
    console.log('Renderer called');
    this.render.setSize(window.innerWidth, window.innerHeight);
    this.render.render(this.scene, this.camera);
    document.body.appendChild(this.render.domElement);
  },
  rendererUpdate: function () {
    console.log('Renderer Update called');
    this.render.render(this.scene, this.camera);
  }

}
gameInit(true);

Answer №1

  height : this.width / this.aspect,
  camera : new THREE.OrthographicCamera(
    this.width * -2, // left
    this.width * 2, // right
    this.height * 2, // top
    this.height * -2, // bottom
    0, // near plane
    10000 // far plane
  ),

This particular code snippet is incorrect as it tries to access properties using this, resulting in undefined. As a consequence, the camera ends up holding NaN values which disrupts the rendering process. The correct implementation should be:

function initializeGame(axlesHelper) {
  (axlesHelper) ? gameComponent.setAxlesHelper(): null;
  gameComponent.renderer();
}

const width = 10;
const height = width / ( window.innerWidth / window.innerHeight );

var gameComponent = {
  scene: new THREE.Scene(),
  axesHelper: new THREE.AxesHelper(10),
  ambientLight: new THREE.AmbientLight(0xffffff, 0, 6),
  directionalLight: new THREE.DirectionalLight(0xffffff, 1),
  camera: new THREE.OrthographicCamera(
    width * -2, // left
    width * 2, // right
    height * 2, // top
    height * -2, // bottom
    0, // near plane
    10000 // far plane
  ),
  render: new THREE.WebGLRenderer({
    antialias: true
  }),

  setAxlesHelper: function() {
    this.scene.add(this.axesHelper);
  },

  renderer: function() {
    this.render.setSize(window.innerWidth, window.innerHeight);
    this.render.render(this.scene, this.camera);
    document.body.appendChild(this.render.domElement);
  },
  rendererUpdate: function() {
    console.log('renderer update invoked');
    this.render.render(this.scene, this.camera);
  }

}
initializeGame(true);
body {
      margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5a465c4b4b6e1e001f1d1f40060b090f05280b08030445">[email protected]</a>/build/three.min.js"></script>

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

Unchecked checkbox displays as checked in UI

I am facing an issue with checking checkboxes using JavaScript. Even though the checkbox appears to be checked in the program, it does not reflect the updates on the user interface. If anyone has a solution for this, please share. <!DOCTYPE html> ...

Rendering based on conditions with a pair of values

I am trying to render my component only if the id is equal to either 15 or 12. My current approach is not working as expected, it only renders the component when I check for one id at a time, but I need to check for both. {query_estate_id === 15 || q ...

External script implementing StratifiedJSIt is possible for an external script

Recently, I stumbled upon the amazing StratifiedJS library that offers many features I find essential. It functions flawlessly when implemented directly in my HTML file, like so: <script src="libraries/stratified.js"></script> <scr ...

What is the best way to transition to a new page within my application with React Material UI Select?

I am looking to implement a feature where a new page is displayed based on the selection made in a Material UI Select component. Below is the code for SelectFoodChange.js : import * as React from 'react'; import InputLabel from '@mui/materi ...

What is the best way to modify a node_module file consisting of only a few exported variables, which is heavily utilized in the entire module? (with demonstration)

I have integrated a node module with the file structure displayed below. Inside the file node_core_ctx.js, I found this code snippet: const EventEmitter = require('events'); let sessions = new Map(); let publishers = new Map(); let idlePlayers ...

Differences Between JavaScript Binding and Anonymous Functions

I came across this code in the mongoose-deep-populate library async.parallel([ User.create.bind(User, {_id: 1, manager: 2, mainPage: 1}), Comment.create.bind(Comment, {_id: 3, user: 1}), ... ], cb) which utilizes Function.prototype.bind to make ...

Uploading Images Dynamically with AJAX

Can someone assist me with a multiple upload form that utilizes AJAX to upload and display an image without the need for a submit button? My issue arises when dealing with repeating forms within table rows, causing only the first form to function properly. ...

What is the process for incorporating a script function into a React application?

Recently, I've been attempting to integrate the external application Chameleon into my React application. To achieve this, I need to incorporate the javascript function within my application. I prefer it to be invoked only in specific scenarios, so I ...

Organizing outcome searches through ajax

I have a result table displayed on the left side https://i.stack.imgur.com/otaV4.png https://i.stack.imgur.com/pp9m0.png My goal is to transform it into the format shown on the right side of the table In a previous inquiry found here, @Clayton provided ...

Establishing a minimum width for the value of zero in AmCharts column series by customizing the bullet labels

Here's an interesting example where I have arranged column series with bullet labels. However, you may notice that there are some 0 values present as well. My goal is to establish a minimum width for the series so that even if the value is small or 0, ...

What is the best way to incorporate arrowheads into the lines that have been sketched using canvas

I need assistance with incorporating arrowheads at the end of linear plots drawn on a coordinate grid using my custom function. You can view an example of the current setup in this JsFiddle: https://jsfiddle.net/zje14n92/1/ Below is the code snippet respo ...

Is it possible for Cypress to execute test files that are imported from outside of the Cypress folder

Currently, I am developing an E2E test framework using Cypress and encountered an issue while trying to import spec files from locations outside the traditional Cypress directory structure (which includes directories for fixtures, integration, plugins, and ...

I'm encountering an error when trying to return a value using the question mark operator in Vue.js - can someone explain why

When I attempted to retrieve the value using the question mark operator instead of using return twice, I encountered an error stating "Cannot read property 'omitDescription' of undefined." buttonText() { return this.omitDescription ? 'プ ...

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...

Having trouble passing data from router to View with EJS in Express. Despite trying, still encountering ReferenceError message

I encountered an issue when trying to display form errors to the user. I attempted to pass the errors from the router to my view file. Error Message ReferenceError: e:\2016\passport\views\register.ejs:38 36| 37| <div ...

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

I keep running into errors whenever I try to run npm install in my React JS project. The only way for me to successfully install dependencies is by using npm install --force. How can I go about resolving these

I am encountering this error message while working on my project: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681b1c11040d1b ...

Transform HTML entities to an escaped string in CSS content dynamically

I am aware that special html-entities like &nbsp; or &#246; or &#x0F0; cannot be incorporated within a css block like the following: div.test:before { content:"text with html-entities like `&nbsp;` or `&#246;` or `&#x0F0;`"; } ...

Having trouble syncing a controller with AngularJS

Despite numerous attempts, I am still struggling to make a single controller function properly. Lately, I've been working on Angular projects and no matter what I do, my controllers just won't cooperate. In my latest project, everything is withi ...

Is it possible to dynamically adjust texture UV mapping?

My geometry is a rectangle with dimensions W x H and a texture that is 2*W x H. I only want to display half of it: ... var pageGeometry = new THREE.PlaneGeometry(pageWidth, pageHeight, 1, 1); var texture = someTexture; pageGeometry ...