Oops! An error occurred because it seems like the property 'render' is being read from an undefined value

While experimenting with ThreeJS to create some animations, I encountered an error message that says "Uncaught TypeError: Cannot read properties of undefined (reading 'render')". I am completely lost on what this error means as this is my first time delving into the world of ThreeJS and I have limited knowledge about it.

<body>
<script src="main.js" type="module" defer></script>

<script type="module">
    import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ce8f4eef9f9dcacb2adaea8b2ac">[email protected]</a>/build/three.module.js';
    let scene, camera, renderer, starGeo, stars;

    function init() {
      //create scene object
      const scene = new THREE.Scene();
      
      //setup camera with facing upward
      const camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 1;
      camera.rotation.x = Math.PI/2;
      
      //setup renderer
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

        starGeo = new THREE.Geometry();
            for(let i=0;i<6000;i++) {
                let star = new THREE.Vector3(
                Math.random() * 600 - 300,
                Math.random() * 600 - 300,
                Math.random() * 600 - 300
            );
            star.velocity = 0;
            star.acceleration = 0.02;
            starGeo.vertices.push(star);
            }
            let sprite = new THREE.TextureLoader().load( 'star.png' );
            let starMaterial = new THREE.PointsMaterial({
                color: 0xaaaaaa,
                size: 0.7,
                map: sprite
            });

            stars = new THREE.Points(starGeo,starMaterial);
            scene.add(stars);

      animate(); 
    }
    //rendering loop
    function animate() {
        starGeo.vertices.forEach(p => {
            p.velocity += p.acceleration
            p.y -= p.velocity;
            
            if (p.y < -200) {
            p.y = 200;
            p.velocity = 0;
            }
        });
    starGeo.verticesNeedUpdate = true;
    stars.rotation.y +=0.002;
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
    }
    init();
 </script>

Thank you!

Answer №1

Make the necessary alteration to this line: let player = new Character(); so that it reads: player = new Character();

The issue arose from failing to initialize the let player variable at a global level and having another constant with the same name within the startGame() function, which is not accessible in the updateScore() function.

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

Refresh Angular component upon navigation

I have set up routes for my module: const routes: Routes = [ { path: ":level1/:level2/:level3", component: CategoriesComponent }, { path: ":level1/:level2", component: CategoriesComponent}, { path: ":level1", component: ...

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

VueJS together with Firebase: The guide to password validation

I am currently working on a web form developed using VueJS that enables authenticated users to modify their passwords. The backend system relies on Firebase, and I am facing a challenge in validating the user's current password before initiating the p ...

Utilizing Jquery for ASP.NET, an AJAX call dynamically populates a list

My user interface is designed to populate a select dropdown menu using data retrieved from a database through an AJAX call. The C# web method responsible for this operation is structured as follows: private static List<List<string>> componentT ...

I have the ability to effectively open a modal whenever necessary, but I struggle with closing it afterwards

I've been working on implementing a React bootstrap modal, and while I can successfully open it when needed, I'm running into issues with closing it. I'm not sure what mistake I might be making. Here's my markup: <Modal show={this. ...

Linking to an external website using AngularJS for navigation

After developing my angular app, I included an array of menu items that are displayed in the template: <nav id="menu"> <ul> <li ng-repeat="i in menuItems" ui-sref="{{ i | removeSpacesThenLowercase }}" ui-sref-active=" ...

Switching from "Straight Quotes" to "Curly Quotes"

Looking for a solution to convert regular straight quotes into curly quotes in a Javascript-based rules engine application. Rather than just using a simple string.replace for ["], I need a method that will insert the correct curly quote depending on its po ...

TextGeometry in Three JS is designed to always face the user

Here is the source code I have been working on. My main goal is to make sure that TextGeometry is always facing the camera. Is this possible? Code: var stats; var camera, controls, scene, renderer; init(); render(); functi ...

Loading templates (partials) in Angular.js on the fly

Is there a way to dynamically load templates into an Angular app based on a parameter within a ng-foreach loop? <body ng-app="MyApp" ng-controller="ExampleController as example"> <div ng-repeat="item in example.items" class="someClass" ng-swi ...

In the Rails environment, it is important to verify that the data sent through $.post method in jQuery is correctly

I’m facing an issue with my jQuery script when trying to post data as shown below: $.post({ $('div#location_select').data('cities-path'), { location_string: $('input#city_name').val() }, }); Although this code work ...

How can Javascript be used to interact with buttons and select options?

Can anyone help me with creating a JavaScript code that can select an option from a drop down, click on that option, and then add it to the cart by clicking another button? So far, I have attempted the following: browser.getelementbyid("id").invokemembe ...

"Exploring the World Wide Web with Internet Explorer Driver and Webdriver

After trying everything I know to make internet explorer work with webdriver.io, I've encountered a confusing issue. To start, download the internet explorer driver from this link: http://www.seleniumhq.org/download/. The file is an .exe named ' ...

React: Issue with input values not correctly updating across multiple fields when changing state toggles

I am working on a React component that needs to update input values for multiple players independently. However, I am facing an issue where toggling a state causes the first input's value to incorrectly propagate to all other inputs. Additionally, cle ...

Tips for Adding Items to an Infinite Loop

Could you please review This Demo and advise me on how to continuously load items into the ul list in an endless manner? Currently, I have this code set up to display the list but I want it to keep adding new items to the end every time. var item = $(". ...

Angular 8 allows for the creation of custom checkboxes with unique content contained within the checkbox itself, enabling multiple selection

I'm in need of a custom checkbox with content inside that allows for multiple selections, similar to the example below: https://i.sstatic.net/CbNXv.png <div class="row"> <div class="form-group"> <input type ...

The function ensure_csrf_token is failing to set the CSRF cookie in the cookies section

I am facing an issue with setting up a CSRF token in my application. Firstly, I have a simple generic view in Python: class GetCSRFToken(views.APIView): permission_classes = [AllowAny, ] @method_decorator(ensure_csrf_cookie) def get(self, ...

What is the best way to showcase validation errors based on required fields in PHP?

When dealing with a form, the challenge arises when there are multiple validation errors to display. The dilemma is whether to show all errors at once or individually as per each field requirement. For instance, consider having fields like Name, Email, an ...

Is it necessary for me to create distinct MongoDB models in individual files?

Lately, my focus has been on working with mongodb using a single model. As I started exploring the idea of adding a second model, I anticipated encountering some challenges. To begin, here is the code for the single model: riskRating.js const mongoo ...

Obtain the result of the Mongoose find operation

Greetings, I am facing a challenge with accessing elements returned from a find operation in Mongoose due to the asynchronous nature and callback functions. Below is the code for reference: function retrieveBudgets(email, callback) { models.User.f ...

Creating a condensed version of the process: Utilizing jQuery for thumbnail preview on hover to create an image slideshow

I've created a video preview slideshow function using jQuery. As a newcomer to jQuery, I'm questioning if there's a more efficient way to achieve this. Having separate timers for each frame feels cumbersome and limits the flexibility in chan ...