I'm having trouble getting this demo to run on my computer using three.js and cannon.js on the sandbox platform

Check out this demo link, even though I have all the dependencies, it still shows that some modules are missing: https://tympanus.net/codrops/2020/02/11/how-to-create-a-physics-based-3d-cloth-with-cannon-js-and-three-js/

Does anyone know how to code this on your personal computer using the sandbox example?

When I include 'three' in my js files, I encounter an error saying "Uncaught SyntaxError: Cannot use import statement outside a module".

<!DOCTYPE html>
<html>
  <head>
    <title>Physics Slideshow - 03</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <section class="container">
        <article class="tile">
          <figure class="tile__figure">
            <img
              src="https://images.unsplash.com/photo-1541737923-4dc81f2d1d41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80"
              class="tile__image"
              alt="My image"
              width="400"
            />
          </figure>
        </article>
      </section>

      <canvas id="stage"></canvas>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

<—— figure.js——>

import * as THREE from "three";
import C from "cannon";

const size = 8;
const mass = 1;

export default class Figure {
  constructor(scene, world) {
    // Implementation of code here...
  }

  // Methods implementation goes here...

}

<—— scene.js——>

import * as THREE from "three";
import Figure from "./Figure";
import Wind from "./Wind";
import C from "cannon";

// Class and methods implementation for Scene script...

<—— wind.js——>

import SimplexNoise from "simplex-noise";
import { Clock, Vector3 } from "three";
import gsap from "gsap";

// Class and methods implementation for Wind script...

<—— index.js——>

// Main entry point script...

<—— styles.css ——>

// CSS styling for the project...

Answer №1

It seems that the issue lies within the technique rather than a single error. There may be a cascade of errors stemming from the initial crash, which are not being displayed. Have you tried systematically troubleshooting your project to identify the root cause? Start by ensuring that `scene.js` is functioning correctly on your system before progressively building the other components. Begin piecing together your project starting from the specified line in the `scene.js` file and investigate each element using debugging methods:

this.renderer = new THREE.WebGLRenderer({
  canvas: this.container,
  alpha: true
});

If you simply copied and pasted large portions of code into your project without understanding it thoroughly, you may encounter significant hurdles. Wishing you success in resolving the issue!

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

What steps can be taken to ensure that the onchange event functions properly with radio input

I am facing an issue with my input field as the value changes automatically when an option is selected. However, I want this functionality to also work the same way when a radio input option is selected. How can I modify the code to achieve this? func ...

Can the fluctuations in resolution of webRTC streaming video be detected?

We are currently working on a project involving WebRTC and have specific requirements that involve detecting when the resolution of the streaming video (remote stream) changes in WebRTC. Is there a way for us to achieve this? Any tips or guidance would be ...

Unexpected behavior with MongoDB update function

If I have a model like this: var stuffSchema = new mongoose.Schema({ "id": 1, "cars": { "suv": [], "sports": [], "supercar": [{ "owner": "nick", "previousOwners": [ ObjectId("574e1bc0abfb4a180404b17f"), ObjectId ...

Calling Number() on a string will result in returning a value of NaN

Currently, I am working on the following code snippet: app.put("/transaction/:value/:id1/:id2", async(req,res) => { try { const {value,id1,id2} = req.params; const bal1 = await pool.query("Select balance from balance where id=$1",[i ...

What could be causing the error.status value to not be displayed on my Embedded Javascript (EJS) page?

Currently utilizing ejs, node.js & express along with other packages I'm facing an issue where the error.status and error.stack values are not appearing on the rendered page. I suspect that the error variable may be undefined or inaccessible within t ...

The functionality to open the menu by clicking is experiencing issues

I'm attempting to replicate the Apple website layout. HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte ...

Deciphering Google location data using JavaScript

It appears that this code is not functioning properly for unknown reasons let url = "https://maps.googleapis.com/maps/api/place/search/json?"; url += "location="+lat+","+lng+"&"; url += "radius=500&"; url += "types=&"; url += "name=&"; url ...

Difficulty: Issue with displaying Backbone collection using Mustache template

I'm new to backbone js and Mustache. I want to load a backbone collection on page load from rails json object to avoid making an extra call. However, I'm facing issues when trying to render the backbone collection using a mustache template. Here ...

How to dynamically apply the orderBy filter in AngularJS

Attempting to input ordering criteria from a text box and dynamically order the content. The current code is functioning properly, but when attempting to change: orderBy:'age' to orderBy:'{{criteria}}' the functionality breaks. Her ...

Sending arrays' values in JavaScript

Here is a list of different groups to choose from: <select multiple="multiple" name="groups[]" id="groups[]" class="myclass"> <option value="1">Employees</option> <option value="2">Vendors</option> <option valu ...

Unexpectedly, optimization causing issues on Angular site without explanation

Currently, I am utilizing Angular to construct a front-end website that searches for and showcases information obtained through API requests. Whenever I compile the project into a file bundle for static deployment using ng build, I notice that the resultin ...

What is the process for determining the text direction of a website's title?

My website is having trouble displaying the title in the correct direction. I've attempted to add dir="rtl" to various tags like html, head, and title, but nothing seems to be working. In the English version I have "Select a service:" In the Arabic ...

JavaScript string manipulation function

Hey everyone, I need help finding a one-line solution in JavaScript to determine if a string contains a semicolon without using a loop. If anyone knows how to do this, please share your knowledge! ...

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

Transferring Data between Rails and Angularjs using JSON

Utilizing Angularjs to fetch JSON data from a Rails test app deployed on Heroku is proving to be a bit challenging. Below you can find the snippets of my Angular and Rails code. An error message displayed in my Firebug console reads: "NetworkError: 404 N ...

Is there a way to apply the same class exclusively to the first child within a group?

How can I include specific classes for only the initial group of items in a nested ul li list? <ul> <li class="first-group"> <ul> <li></li> </ul> </li> <li class="first-group"></li> & ...

In the Node environment, why does null evaluate as less than 3 while also being greater than 3?

How come null is false when compared to 3 in node, and true when compared to 3? $ node > null > 3 false > null < 3 true ...

Combining Jquery with Objects and Strings

Having a bit of trouble with a small issue that I can't seem to figure out. Let me explain... So, I'm creating an input like this... var input = $('<input/>'); When I append it like this, everything works fine: $(this).append( ...

Assess transcluded content prior to template compilation in an AngularJS directive

I am currently developing a custom "collapseText" directive using AngularJS. The purpose of this directive is to display a specified maximum number of characters and provide a "Read More" option to expand the text if it exceeds the limit. My goal is for t ...

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

I'm currently utilizing file-saver within my Angular application to retrieve a PDF generated from the backend. The library functions smoothly on desktop and Android devices, but I'm encountering issues with downloading files on iOS. Contrary to w ...