The error message "THREE is not defined" indicates a problem

Hey there! I've been experimenting with running some three.js examples on my local machine. I ran into some security issues, so I set up a local server using Python. While the background image and text appear as expected, the animations are not working.

After checking the console, I noticed an error stating that "THREE is not defined." Despite downloading three.js and adding it to my project directory, I'm still not seeing any progress. Any thoughts on what could be causing this issue?

The animations run smoothly in the browser when accessing them from the three.js (examples) page. My script src matches the output of the pwd command while working in the command line within the three.js-master directory, as shown below:

<script src="/home/iiiiiii/Desktop/test/build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script src="js/loaders/PDBLoader.js"></script>

javascriptthree.js

Answer №1

One of the most common reasons for this issue is that it seems like you have not included Three.js in your project based on the code snippet provided: 

/home/iiiiiii/Desktop/test/build/three.js
However, the given path does not appear to be a valid location within your project. I would recommend moving the file to the project folder along with other JavaScript files as shown in the snippet. Alternatively, you can also use a CDN for Three.js in your project

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous"></script>

Answer №2

Place the 

<script src="three.js"></script>
directly underneath the opening <body> tag to ensure it works correctly.

Answer №3

Is it necessary to include this library at the beginning of your code or can it be added after the page loads? I see that you have not specified a type attribute when linking your libraries. You could try the following:

<script type="text/javascript" src="/path/to/three.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

Tips on ensuring Angular calls you back once the view is ready

My issue arises when I update a dropdown list on one of my pages and need to trigger a refresh method on this dropdown upon updating the items. Unfortunately, I am unsure how to capture an event for this specific scenario. It seems like enlisting Angular ...

javascriptjqueryangularjstwitter-bootstrap

Verification of three-dimensional password format with the use of AngularJS

I am trying to implement password validation in Angular.js that requires a combination of alphabetical, numerical, one upper case letter, one special character, no spaces, and a minimum length of 8 characters. How can I achieve this using Angular.js? Here ...

javascriptangularjsformsvalidation

Leveraging ThemeProvider Parameters with Global Styled-Components

When working with styled-components, how can I access the props of the ThemeProvider in the context of global.js? For instance, in my theme.js file, I have ${props => props.theme.fonts.fontSize} set to a default font size of 16px. const theme = { ...

javascriptreactjsstyled-components

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Within a single tag, I have a string as shown in the example below. My goal is to display the first 20-25 words on screen, then continue with the next set of words, and so forth. Once 20 words are displayed, the remaining text should be hidden. <p>Lo ...

javascripthtml

Can you provide a method for verifying an 'undefined' variable in AJAX queries?

How can we elegantly check if a variable is undefined in JavaScript? $.ajax({ type: method, url: url, success: function (data) { if (form != null || form != undefined){ data = $(form).serialize(); } var json ...

javascriptajaxundefined

What causes the sudden change in value of this array?

I can't seem to figure out what's going on with this question. It might be something silly, but I haven't been able to find any clues. Here is the array in question: const superVillains = [ { value: '1', label: 'Thanos&apo ...

javascriptarraysreactjsreact-hooks

Enhancing Web Service Calls with Angular 2 - The Power of Chaining

I am currently facing an issue where I need to make multiple web service calls in a sequence, but the problem is that the second call is being made before the .subscribe function of the first call executes. This is causing delays in setting the value of th ...

javascriptangulartypescript

Using `this` in a Jquery get() call to reference a callback function

Utilizing the this keyword in the callbacks of $.get() is my current challenge. The outline of my code looks like this: var myObject = { get: function() { $.get(server,data,function(data,status) { this.callback(); }); }, callback: func ...

javascriptjqueryajaxjquery-callback

Receiving a 200 ok status, but encountering a response error in Postman

Receiving a response with a 200 OK status, but encountering an error message in Postman. { "errors": "Unable to log you in, please try again.", "success": false } Post Url: [{"key":"Content-Type","value":"application/json","descript ...

javascriptpythonhtmlajaxdjango

Extract the JSESSIONID and generate a new Cookie using AngularJS

Currently, I am utilizing a Web RESTful API from my client within AngularJS. app.controller('LoginController', [ '$http', '$cookies', function($http, $cookies) { this.credentials = {}; this.http = $ ...

javascriptangularjshttpcookies

The issue of req.files being undefined in Express.js

I am aiming to upload files to s3 without depending on any middleware like multer. Below is the code snippet of my approach: <form role="form" action="/send" method="post"> <input type="file" name="photo" class="form-control"/> <button ...

javascriptnode.jsexpress

Debounce function fails to properly function when the state is modified within the same function

I've been working on implementing a search-as-you-type feature and I want to debounce the function search that handles API calls. Everything works well when I only call the debounced_search function within the event handler, but I also need to update ...

javascriptreactjs

Getting data from a response in Express.js involves using the built-in methods provided by

I am a beginner at Node.js and I'm currently experimenting with client-server communication. Below are the codes I've been working on: server: app.post('/zsa', (req, res) => { res.send("zsamo"); }); client: fetch(&qu ...

javascriptnode.jsexpress

In JS/JSON, a new line of data is generated every hour

Recently, I have been experimenting with DiscordJS and exploring its logging functionality. I am aware that the method I am using is outdated and may not be the most secure for actively changing data, but I am intrigued. let count = JSON.parse(fs.readFile ...

javascriptnode.jsjsondiscord.js

Using both Ajax and a standard submit can be applied to a single form in jQuery

I need to implement a confirm step on one of my pages. Here's what I want to achieve: When the user clicks 'submit', an AJAX request is triggered, which performs the necessary action and then displays a confirmation dialog If the user ...

javascriptjqueryajaxformsjquery-forms-plugin

How can I pass a variable name as an argument in Vue?

I am exploring ways to create a method that can efficiently load and assign JSON files to dynamic variables. Despite my efforts, varA and varB are not being populated as expected: data() { return { varA: Array, varB: Array } }, ...

javascriptvue.js

A guide to importing a Vue component in a JavaScript file

I am looking to achieve a specific behavior in my project: depending on a condition stored in my database, I want to load a particular vue.component instead of another. For example, within a file named discover.js, there is the following code: Vue.compone ...

javascriptlaravelvue.jscomponents

Entry module could not be located due to an unresolved 'babel-loader' error

As a newbie to the world of React, I found myself facing an issue while setting up the installation and loading all the necessary dependencies. Upon running the npm start command, I encountered the following error message: ERROR in Entry module not found: ...

javascriptjsonnode.jsreactjswebpack

NPM repository that is not accessible online

I have been looking into creating my own private NPM mirror/repository, but I'm not sure where to start. My objective is to create a repository within my private network that contains all the latest free NPM packages available on the NPM website. I w ...

javascriptnode.jsnpmserver

Preserve the previous and current state within a React application

Within my code, there is a state called newuser that undergoes changes based on the inputs entered into the input fields. This change occurs once all input fields are filled and the submit button is clicked. The goal I have in mind is to store the current ...

javascriptreactjs