Tips for creating immersive 3D games on the web

I am fairly new to the world of HTML and Javascript, but I am diving into the Udacity interactive 3D course and experimenting with three.js + WebGL. I have managed to create and somewhat understand this:

So far. (I am struggling to comprehend the API and integrate cannon.js and other interesting mechanics, any tips on learning APIs like threejs?)

I am seeking advice from anyone who can offer guidance for someone aiming to develop a game that resembles a hybrid of: REZ, Exteel, Armored Core or Zone of The Enders versus mode.

My objective is to include features such as: rail shooting (using cannon.js?), health bars, NPC boss battles with multiple stages, animated movements, a crosshair, level boundaries, character upgrades concepts. To be more specific, a 5-level game with PointerLockControl + shooting interface, where each level completion involves reducing a boss's health bar to zero. The enemy would have a vulnerable mesh area where bullet objects trigger a collision event, decreasing its health. If health <= 25, it speeds up and becomes harder to defeat. After its defeat, the screen blacks out and restarts with a new boss, and so on. I would like to incorporate victory screens, failure screens, and ideally cutscenes with disabled user control and cinematic camera views. Preferably, all of this in-browser like Quake, but if not feasible, I am open to other options.

Apologies if this question seems broad or unusual, as my ambition is to pursue a career in game development. I would truly appreciate any feedback, especially if someone experienced can recommend current resources or helpful websites based on the type of game I aspire to create.

Currently, I am exploring webGL and threejs, although I have considered Unity3D, which unfortunately I cannot use on my Linux machine. In the future, I hope to develop full-fledged games in C++.

Answer №1

When you design with precision, you break down the project into manageable tasks with clear objectives. This way, when you're feeling unsure about what to work on, you can refer back to your detailed design and pick a task to focus on for that day.

I apologize if this response isn't directly related to WebGL, as your question was quite broad.

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

Downloading an empty excel file in PHP using iframes

I am trying to create a frame with a header that includes buttons for listing, PDF, and Excel options. The data from the database is displayed under the header, and everything works fine with the listing option. However, when I attempt to download an Excel ...

Remove Request (MongoDB, express, handlebars)

Struggling with implementing a delete request in my application. I have a database filled with reviews that I manipulate through my app. Currently, I'm attempting to create a function that will remove a document from the database and then redirect th ...

Recent Google algorithm changes impact websites built on AngularJS and JavaScript

Exciting news from Google today (May 28, 2014) - JavaScript content will now be rendered by the Googlebot itself! This means there's no need to worry about serving pre-rendered pages just for crawling purposes. You can find out more details on this an ...

How does the Express next() function trigger the execution of the following middleware?

Can someone please explain how the next() function is able to call the subsequent middleware or route? I've searched everywhere but can't seem to find a good resource with the actual code. If anyone could share where I may find this information, ...

Combine two redux actions and access the modified state in the second action

I'm facing a dilemma with a straightforward problem that I believe I have a solution for, but I'm uncertain about the effectiveness of my idea. Essentially, in the current state of things, I have an array property that requires updating just bef ...

Is there a way I can retrieve a cookie stored in an Express middleware even if the req.cookies object is returning empty?

I am currently working on validating a cookie using the cookie-parser module to verify if the user is authenticated to access restricted routes within my application. My technology stack includes NodeJS and Express for the server, and Sveltekit for the fro ...

How can I efficiently handle making 50 API requests simultaneously given the restriction of only 10 calls per second for the Rotten Tomatoes API?

My application needs to make 50 to 100 API calls in a loop, but Rotten Tomatoes has a limit of 10 calls per second. As a result, my requests fail and I get different results each time. How can I effectively make these 50 requests without exceeding the 10 ...

Error in React+Redux: Trying to access the "address" property of a null value is not permitted

I am new to using react and encountering an issue with my ecommerce app. The app runs smoothly until I log out and then log back in at the shipping address page, which triggers the following error: TypeError: Cannot read property 'address' of nu ...

What is the best method to determine the mean score by utilizing the ID values obtained from API responses?

These are the responses retrieved from the API: const attractions = [ {"id": 1,"name": "drive on avenue"}, {"id": 2, "name": "diving"}, {"id": 3,"name": "visiting ma ...

Is it possible to loop through a subset of a collection using *ngFor?

Is it possible to iterate through a specific range of elements in a collection using *ngFor? For instance, I have a group of checkboxes with their form control name and label specified as follows: [{id: 'c1', label: 'C1'}, ...] Assum ...

The term "Highcharts does not exist"

I'm encountering an issue with my code: <html> <head> <title><%=sAtaskaitaTitle%></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name=vs_targetSchem ...

Check the validity of a watched variable's value and block any assignments that do not meet the specified requirements without triggering the watch function

Check out my jsBin snippet here I am experimenting with watching a variable's value and handling failed validation by returning its previous value without triggering the watch function again. I am considering the following scenario: If validation ...

The Angular framework may have trouble detecting changes made from global window functions

While working, I came across a very peculiar behavior. Here is the link to a similar issue: stackblitz In the index.html file, I triggered a click event. function createClause(event) { Office.context.document.getSelectedDataAsync( Office.Coerci ...

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

What methods can be used to transfer data from mapped objects to their parent component in React?

I'm in the midst of creating a cutting-edge shopping cart application. Each item is beautifully displayed as a card component within the app. To achieve this, I've utilized mapping with dummy object data: const Home = () => { const dumm ...

When I switch tabs in ReactJS, my timer pauses unexpectedly

Exploring the world of javascript, I recently created a counter that seems to be functioning well. However, I noticed that when I switch tabs and make the current tab inactive, the counter stops running only to resume when I return to the page. Take a look ...

How to effectively utilize wrapAsync in MeteorJS when working with callbacks in the vzaar API?

Issue to Resolve: My current challenge involves retrieving an uploaded video ID asynchronously from an API in order to incorporate it into my code once the video upload process is completed. Unfortunately, I am encountering issues where the returned value ...

Troubleshooting Vue Single File Components Displaying Missing Styles

I'm currently attempting to incorporate styles into a vuejs single file component. I've successfully achieved this in a node app previously, but now I am working with a python/flask backend (not that it should make a difference). The Vue componen ...

Is Polymer more of a comprehensive framework compared to just a library? What is the best way to implement web components in a modular fashion

Web components aim to modularize the web, independent of any specific framework being used. The Polymer project offers the ability to create web components without being tied to a particular framework, meaning they should be compatible with any framework. ...

Display a loading dialog for several asynchronous requests being made via AJAX

When making two asynchronous ajax calls, a loading dialog box is displayed for each call using the code below: jQuery('#msg_writter').show(); After a successful request, the loading dialog is hidden with the following code: jQuery('#msg_w ...