Exploring the world of Three.js for the first time, I am embarking on a project that involves leveraging a pre-existing 3D model and altering one of its materials to utilize a Fabric.js canvas as its texture. However, I've hit a roadblock where the texture absorbs the color of the canvas, but any images I attempt to incorporate remain invisible. Below is a snippet of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body { margin: 0; }
#controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
</style>
</head>
<body>
<div id="controls">
<div class="colorPicker"></div>
<canvas id="c"></canvas>
<button id="clear">Clear</button>
<input type="file" id="file">
</div>
<!-- Additional scripts and functionalities -->
Despite my efforts, the material fails to update upon uploading an image.