Seeking assistance! I've been struggling all day to successfully load a texture onto my plane in Three.JS. Every time I attempt to add the desired link, it either fails or *poof* my plane disappears mysteriously. Please lend me your expertise with Three.JS to help me troubleshoot this issue; Error code
Below is my complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="THREE/build/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
40,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.PlaneGeometry(10, 12, 32); // width, height, depth
var texture = new THREE.TextureLoader().load(
"https://threejs.org/examples/textures/uv_grid_opengl.jpg", color = 0xeba6fb,
);
const material = new THREE.MeshBasicMaterial({
color: 0xeba6f5,
side: THREE.DoubleSide,
});
const plane = new THREE.Mesh(geometry, material, texture);
scene.add(plane);
camera.position.z = 40;
const animate = function () {
requestAnimationFrame(animate);
// plane.rotation.x += 0.005;
plane.rotation.y += 0.005;
//plane.rotation.z += 0.005;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>