After my previous question here, I'm attempting to give each side of this obj a different texture. However, despite applying everything in the correct order, nothing is showing up and there are no console errors.
It seems like a simple task but I've been struggling with it for quite some time now. Below is a snippet of the code:
(function onLoad() {
// Code implementation
})();
body {
background: transparent;
padding: 0;
margin: 0;
font-family: sans-serif;
}
#canvas {
margin: 10px auto;
width: 800px;
height: 350px;
margin-top: -44px;
}<body>
<div id="container"></div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/LoaderSupport.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/OBJLoader2.js"></script>
</body>I believe the issue might lie within the loadTexture function defined below:
function loadTexture(imgPath, scene, color, side, mesh) {
var loadedMesh = mesh;
textureLoader.load(imgPath,
function (texture) {
// Implementation logic here
},
undefined,
function ( err ) {
console.error( 'An error occurred...' );
}
);
}
This function is responsible for loading the required texture and applying it to the material of the mesh. It then triggers an update on the material. Is this approach correct?
While browsing through a related answer here, I noticed that the render function is only called after all settings are applied. However, I aim to make dynamic changes to textures and materials during runtime.
I assumed that setting
mesh.children[0].material.needsUpdate = trueAppreciate any guidance on this matter. Thank you.