What could be causing my canvas element to only display a blank black screen?

Question

What could be causing my canvas element to only display a blank black screen?

Setting up a 3d asset viewer in Three.js can be quite challenging, especially for someone who is new to JavaScript like myself. After following the advice to wrap my code within an 'init();' function, I encountered a new issue - a black screen instead of the expected 3d model.

I spent a significant amount of time troubleshooting various problems, such as the absence of the 'canvas' inside the 'container' div and the issues with the 'onWindowResize' function. Despite resolving all these issues and ensuring there are no errors in the code, the problem persists.

Although I understand the importance of keeping the code concise, I'm unable to pinpoint the exact source of the problem. Hence, I've included most of the code on the page:

<div id="container" ></div>
    <script>
    ...
    ...
    // Code where the issue might be originating
    ...
    ...
    </script>

Prior to encapsulating the code within the 'init();' function, everything was working perfectly fine. The expected outcome was to see a simple ship model floating in water, accompanied by a cloud skybox. The interactive controls were functioning, including auto-rotation.

However, the current state of the project is far from this ideal scenario. Despite successful obj loading, as indicated in the console log, the screen remains black with no visible content.

If anyone experienced with Three.js can assist me in resolving this issue, I would greatly appreciate it!

javascript three.js

Answer 1

Answer №1

one line

start;

must be a function call

start();

Also, you may need to adjust the code below where you define the start function from

var start = function(){

Change it to

function start(){

The reason being that named functions are defined when the code is loaded, while variables var are created when the code is executed. So, in code like this

init();
start();

var start = function(){ ...

start does not actually exist at the point the code tries to call it. However, with this code

init();
start();

function start(){ ...

it does exist

You could also rearrange the code so, for example, define start before you use it, which should work.

var start = function(){ 
   ...
};

init();
start();

It also seems that some variables are declared inside init, which means they are not available to start. For example,

var renderer = new THREE.WebGLRenderer({antialias : true});

declares a new variable renderer that only init can see. If you want to set the renderer variable that is outside of init, change the code to

 renderer = new THREE.WebGLRenderer({antialias : true});

controls is never defined, so you may need to define it or comment it out

 controls.update();

to

 // controls.update();

Note: you might find these tutorials helpful. If you are new to JavaScript, it is recommended to spend time learning JavaScript.

Answer 2

one line

start;

must be a function call

start();

Also, you may need to adjust the code below where you define the start function from

var start = function(){

Change it to

function start(){

The reason being that named functions are defined when the code is loaded, while variables var are created when the code is executed. So, in code like this

init();
start();

var start = function(){ ...

start does not actually exist at the point the code tries to call it. However, with this code

init();
start();

function start(){ ...

it does exist

You could also rearrange the code so, for example, define start before you use it, which should work.

var start = function(){ 
   ...
};

init();
start();

It also seems that some variables are declared inside init, which means they are not available to start. For example,

var renderer = new THREE.WebGLRenderer({antialias : true});

declares a new variable renderer that only init can see. If you want to set the renderer variable that is outside of init, change the code to

 renderer = new THREE.WebGLRenderer({antialias : true});

controls is never defined, so you may need to define it or comment it out

 controls.update();

to

 // controls.update();

Note: you might find these tutorials helpful. If you are new to JavaScript, it is recommended to spend time learning JavaScript.

What could be causing my canvas element to only display a blank black screen?

Answer №1

Similar questions

How can I remove the back button that the Ionic framework adds when using $state.go('app.home') to navigate to a page?

Eliminate unnecessary CSS classes from libraries such as bootstrap when working on a React project

How to emphasize a portion of an expression in AngularJS using bold formatting

Troublesome CSS conflicts arise when using minified assets with AngularJS and Webpack

utilizing a Bootstrap modal element throughout multiple HTML documents

Ways to determine the types of props received by a function when the arguments vary for each scenario?

HTML5 database error: Uncaught TypeError due to illegal invocation

The Threejs collada 3D model is experiencing rendering issues at certain viewing angles

The absence of the iframe in ie8 is causing problems that cannot be fixed with relative positioning

Unable to fetch Rails response through Ajax

The challenges encountered with JSONP/Ajax Script - displaying 'Undefined'

Error: Axios header not refreshing automatically in React. User must manually refresh the page

When clicking on an element, all elements will change, not just the specific one

Javascript enables dynamic field addition to tables

Rotate an object upwards in three.js in order to achieve dynamic movement and enhance

Extracting JavaScript variable data to PHP using Ajax technology

Rotation of a point cloud geometry within three.js

Adjusting the timing of a scheduled meeting

The BufferGeometry fails to refresh its data even when the needsupdate flag is toggled to true

Delete auto-generated list using handlebars JS