I'm just starting out on this website and I'm eager to dive into learning javascript.
My initial attempt at following this example from resulted in an error without any animation or background showing up. Instead, all I see is a photo displaying the error I encountered.
To troubleshoot, I downloaded the three.js files to my computer and placed them in the /js directory as illustrated in the image.
While researching solutions, I came across posts like Allow anything through CORS Policy and Cors policy not allowing upload, but the technical details are a bit overwhelming for me as a beginner.
Considering my limited understanding and language barrier, I would greatly appreciate a simplified explanation. Thank you.
The provided code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - cloth simulation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
padding: 10px;
width: 100%;
text-align: center;
}
a {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<div id="info">Simple Cloth Simulation<br/>
Verlet integration with relaxed constraints<br/>
<a onclick="wind = !wind;">Wind</a> |
<a onclick="sphere.visible = !sphere.visible;">Ball</a> |
<a onclick="togglePins();">Pins</a>
</div>
<script src="../build/three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/Cloth.js"></script>
<script>
// JavaScript code omitted for brevity
</script>
</body>
</html>
EDIT 1: @prisoner849 I attempted the second method suggested, but unfortunately, it did not resolve the issue. I'm uncertain if I implemented it correctly - would providing a public Google Drive link be sufficient, or does it need to be hosted on a specific server? I also experimented with a Discord web link, but the problem persists even after trying different methods. I made changes to the path lines as follows:
var clothTexture = loader.load('https://cdn.discordapp.com/attachments/402574308532027422/475765536735756302/circuit_pattern.png');
and
var groundTexture = loader.load('https://drive.google.com/open?id=1VdGnJBALOWDsp9GWbskwa6rnqF_gghP9' );