Troubleshooting JavaScript Errors Post-Upload on Server

On my webpage, I am accessing JS files from Dropbox, but unfortunately errors are being displayed in the inspector and the JS is not functioning properly (the three.js shader should be visible but only the background color appears).

Interestingly, when these files are hosted locally everything works perfectly fine. It's only when they are moved online that the issues begin to arise.

Is there anyone out there who can help me resolve this issue? How can I make it work without encountering errors?

Any assistance is greatly appreciated.

link:

errors:errors logged in console

javascriptthree.jssyntax-error

Answer №1

It appears that you may be loading development files or files from node_modules on your webpage causing errors.

The canvasrenderer.js file from Dropbox requires additional files as specified in its import statements. Therefore, attempting to call functions on it will result in errors.

Instead of using the Dropbox source, try including the following code to see if it resolves the issue:

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js">    </script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>

If possible, consider utilizing WebGLRenderer as demonstrated in this fiddle.

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

Additionally, the performance is significantly enhanced with the WebGL renderer.

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

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Is there a way to display a preview of a selected image before uploading it to the server? Here is an example in HTML: <div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)"> <p>drag one or more files to ...

javascriptangulartypescript

Coming back from the setState callback

In my code, I have a scenario where the Parent component is calling a function from the Child component using refs. Within the Child component function, there is a this.setState method with a callback function embedded in it. handleSaveProject = async () ...

javascriptreactjs

Performing calculations while transferring information via Mongoose to the MongoDb database

Seeking assistance with calculating a user's BMI and storing it in my MongoDB atlas database. The BMI will be determined based on the height and weight provided by the users. I have created a Mongoose Schema to define the necessary functions, but I am ...

javascriptnode.jsmongodbmongoosemongodb-atlas

Is there a way to launch QTP from JavaScript without relying on ActiveXObject?

Is there a way to call QTP from JavaScript without relying on ActiveXObject? I would appreciate any guidance on how to accomplish this task. Thanks in advance, Ramya. ...

javascriptqtpactivexobject

A guide on utilizing nodejs to automatically open the default browser and direct it to a specific web address

I am currently developing a program using Node.js. One of the features I aim to implement is the ability to launch the default web browser and direct it to a particular URL. I want this functionality to be compatible across Windows, Mac, and Linux operat ...

javascriptnode.js

Can the URL in angular.js be modified without having to invoke the controller

My current issue involves the following scenario: I am using the url http://localhost:8080/#/dashboard to display features in my dashboard. For instance, when the url changes to http://localhost:8080/#/dashboard/20, I need to load cities where the country ...

javascriptangularjsurlpushstate

Tips on inserting table data into a textarea input using a button

Is there a way to display the text from the table in a textarea box when clicking the "add" button, without removing the data once it's added? I simply want the text "Add this text to textarea" to show up in the textarea box. https://jsfiddle.net/bj ...

javascriptjqueryhtml

Is TowerJS possible without CoffeeScript?

Exploring the potential of Node.js in web development has been quite intriguing. Coming from a background of coding in ASP.NET MVC 3, TowerJS and Geddy seem like comfortable choices due to their familiarity with the MVC pattern. However, my reservations l ...

javascriptnode.jscoffeescripttowerjscoffeekup

Creating a dual-direction infinite scroll effect with CSS through mouse dragging

I'm currently working on implementing an infinite scroll component for a project. After consulting this tutorial, I've encountered an issue. It seems that I can only achieve infinite scroll in one direction. Whenever I add elements to the leftmo ...

javascriptjqueryhtmlcssscroll

Including an identical field within the parameters of a MongoDB search query

In my mongodb collection testdata, there is a field named insertTime. Our goal is to remove data older than 60 days. Previously, to accomplish this, I would use the logic of finding the deletion date and then comparing it against the updateTime: var date = ...

javascriptmongodbmongodb-queryaws-documentdb

Guide to displaying marker location in React Leaflet from localStorage

After several attempts, I still can't seem to display the saved marker location upon page refresh. You can check out the deployed App here: This app is quite simple, designed to determine if User 2 falls within the range of User 1. Users can mark loc ...

javascriptreactjsleafletreact-leaflet

What methods can be used to initiate form error handling in React/Javascript?

I am currently utilizing Material-UI Google Autocomplete, which can be found at https://material-ui.com/components/autocomplete/#google-maps-place, in order to prompt users to provide their address. https://i.stack.imgur.com/nsBpE.png My primary inquiry ...

javascriptreactjsreduxmaterial-ui

Master your code with Rxjs optimization

Looking at a block of code: if (this.organization) { this.orgService.updateOrganization(this.createOrganizationForm.value).subscribe(() => { this.alertify.success(`Organization ${this.organization.name} was updated`); this.dialogRef.close(true ...

javascriptangulartypescriptrxjs

When setting up a firebaseApp, be sure to globally configure the region to europe-west1 for httpsCallable functions, rather than the default us-central1

I am looking for a way to globally set the region from which an httpsCallable function is being called. Currently, I am initializing my app in the following manner: const app = firebase.initializeApp(firebaseConfig) app.functions('europe-west1') ...

javascriptnode.jsfirebasegoogle-cloud-functions

Arranging elements within an outer array by the contents of their inner arrays

I need help organizing an array based on the alphabetical order of a specific value within the inner arrays. For example: I want to sort this array by the prefix "old," so old A, old B, etc. const array = [ { personName: "Vans", personTags: ["young", " ...

javascriptarraystypescriptsorting

Building responsive grids in React using Material-UI components

https://i.sstatic.net/d2CIo.png On the left side, there is a map with controls, and on the right side, there are fields displaying the last update, a table, and an input field. I am looking to create a responsive design where when it reaches a certain si ...

javascriptreactjsresponsive-designgridmaterial-ui

How can JavaScript be used to populate a textbox value from a URL parameter?

After a user submits the script below, I want to redirect them back to the same page and fill in the dropdown menu and input box with values from the URL parameters. However, the fields are not populating after the redirect. Additionally, I need to remove ...

javascriptjqueryhtml

Using JavaScript to skip duplicate rows in an HTML table based on group

My current task involves fetching multiple data from a database using AJAX and PHP. Once I retrieve the data successfully, I need to group the results in a specific format like the images shown below, including having a textarea field for each group. Here ...

javascriptajaxgrouping

Use the spread operator to assign a value to the keyname

Would it be possible to dynamically assign key names to the spread operator? For instance, consider the following: 'first, second, third'.split(','); // Array(3) : [ 'first', 'second', 'third' ] I would ...

javascriptecmascript-next

Extract the chosen option from a dropdown menu, and then transfer it to another dropdown menu with a new corresponding value

Below is a select box I currently have: <td align="center"> <select id="selectW" name="type" onChange="this.form.submit()"> <option value="select...">select</option> <option value=" ...

javascriptphphtmlmysqlajax