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...