Whenever I try to relocate my HTML file that references three.js, the three.js library seems to malfunction and stop

Something strange is happening...

I recently downloaded three.js into a directory named 'brick':

git clone https://github.com/mrdoob/three.js.git

which created a subdirectory:

brick/three.js/

After navigating to

brick/three.js/examples

and opening the file

brick/three.js/examples/webgl_geometry_cube.html

in Firefox, I was able to see a fantastic rotating cube. However, when I copied the file (brick/three.js/examples/webgl_geometry_cube.html) into the 'brick' directory and updated the reference to three.min.js in the new brick/webgl_geometry_cube.html accordingly, the cube no longer appeared when I opened it in Firefox.

Let me delve deeper into the reference to three.min.js in webgl_geometry_cube.html. The initial content of brick/three.js/examples/webgl_geometry_cube.html looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - geometry - cube</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="../build/three.min.js"></script>

        <script>

            var camera, scene, renderer;
            var mesh;

After transferring it to

brick/webgl_geometry_cube.html

I modified the line

<script src="../build/three.min.js"></script>

to:

<script src="three.js/build/three.min.js"></script>

I double-checked that this updated reference was functional by opening

brick/webgl_geometry_cube.html

in Firefox, viewing the source, and following the reference to three.min.js. Seeing the source code of three.min.js (which I did) should have been a success.

Then why is the cube not rotating when I open the transferred file in Firefox? I am puzzled. There don't appear to be any other path-related references in webgl_geometry_cube.html. The complete source code of webgl_geometry_cube.html can be viewed here:

webgl_geometry_cube.html on Github

Furthermore, how can I debug this issue? Is there a way to step through the code to pinpoint where the files differ in execution?

Answer №1

This demonstration incorporates a texture that requires the modification of the file path textures/crate.gif within the JavaScript code to ensure successful retrieval of the texture.

Answer №2

After some thorough investigation, I discovered yet another reference within webgl_geometry_cube.html that had previously gone unnoticed: The beloved crate.gif file is actually mentioned in line 34, and it is imperative that we update this reference to accurately reflect the new relative location of crate.gif:

three.js/examples/textures/crate.gif

Credit for this insightful solution goes to the skilled user known as techwizard. Much appreciated!

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

Exploring the realm of unit testing in the NestJS CQRS architecture journey

We're currently working on writing unit tests using Jest for our application and are facing difficulties in testing sagas. Specifically, we're having trouble testing the saga itself. During our unit testing process, we've encountered an iss ...

Create a solution that is compatible with both web browsers and Node.js

I am developing a versatile library that can be utilized in both the browser and in node environment. The project involves three json config files, with the latter two extending the tsconfig.json. tsconfig.json (contains build files) tsconfig.browser.js ...

When an input is disabled in "react-hook-form", it may return undefined

Within my React application, there exists a form containing various input fields. I have enclosed these fields using FormProvider imported from react-hook-form and utilized register within each field. import { useForm, FormProvider, useFormContext } from & ...

The functionality of CSS3 animations may sometimes be unreliable following the onLoad event

Here is a snippet of code to consider: $(function() { $('#item').css({ webkitTransform: 'translate(100px, 100px)' }); }); The element I am attempting to move has the following CSS properties: transform: translate3d(0 ...

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

Synchronize data bidirectionally between parent and child components in Vue 2

This special wrapper I created for the Vue-multiselect package acts as a child component within this scenario. <template> <div> <multiselect v-model="items" :options="filteredList" ...

When invoking the jQuery ".load('pageName')" method, HTML pages are not loaded from the application cache

I have been working on incorporating the html5 offline caching functionality into our html pages, and everything seems to be running smoothly with jQuery version 1.4. However, I encountered a problem when I upgraded to jQuery 1.8. Specifically, issues aro ...

Struggling to send an array through Ajax to Django view?

I am just starting to work with ajax and I want to pass an array from JavaScript to my view. Here is the template. I have a form that takes the course ID number and score from students, creates a table, and adds how many courses the student wants to add. ...

Can three.js be executed in Jupyter's ijavascript kernel?

Seeking assistance in integrating my library built with three.js into an ijavascript (jupyter + ijavascript) notebook environment. Any insights on whether this is achievable? It seems like three.js is compatible when using require('three'), but ...

Superimpose a canvas onto a div element

I'm struggling to overlay a canvas on top of a div with the same dimensions, padding, and margins. Despite using position: absolute and z-index as suggested in similar questions, the canvas keeps appearing underneath the div. Here's my current co ...

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Currently, I am utilizing PHP, HTML5, and JavaScript for my project. The task at hand involves creating a webpage that will be connected to a database. However, I have encountered an issue wherein the page proceeds to the next step and sends data even when ...

Transform a numerical variable into a string data type

I am faced with a situation where I have a variable named val which is currently set to the number 5. Now, my goal is to update the value of val so that it becomes a string containing the character "5". Could someone guide me on how to achieve this? ...

Iterate over a JSON object to calculate the total sum of values based on distinct nested properties

Here is a JSON object that contains cost and author information. I am working on this in Express.js and using Underscore. [ { "Cost": 250, "author": { "id": "2", "name": "Joe", "workId": "5" } }, { ...

The node module.exports in promise function may result in an undefined return value

When attempting to log the Promise in routes.js, it returns as undefined. However, if logged in queries.js, it works fine. What changes should be made to the promise in order to properly return a response to routes.js? In queries.js: const rsClient = req ...

What is the appropriate command for "building" a fresh NPM project?

I'm currently working on a JS website with Three.js. I kicked off my project like this: $ npm init $ npm install three Can anyone guide me on where to place my code utilizing Three.js, and which npm command should I use to "compile" my script for dep ...

Execute a JavaScript function on a Node server following a click event in an HTML document

Hello everyone, I am currently working on a project using node.js in a Windows environment. With the help of the express module, I am trying to create a static page that includes a Submit form. When someone clicks the "Submit" button, I intend to execute a ...

Updating Sailsjs Localization Settings

After working with Sails.js for a while, I am interested in finding out if it is possible to manually adjust the localization from the controllers based on the URL. For example, accessing http://example.com/en would display the English version, while http ...

JavaScript utilizing an API to retrieve specific data values

Below is some API Data that I have: [ { "symbol": "AAPL", "name": "Apple Inc.", "price": 144.98, "changesPercentage": -1.22, "change": -1.79, ...

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Why isn't the video div sliding down and displaying properly in the beginning? Any ideas on how to fix it? Here is the snippet of HTML code and JavaScript: <!DOCTYPE HTML> <html> <head> <title>Team Songs</title> <link ...

Node.js equivalent of hash_hmac

I am facing an issue while trying to sign the URL in a Node.js application similar to how it is done in my PHP app. In PHP, I use the following code to sign the URL: private static function __getHash($string) { return hash_hmac('sha1', $stri ...