Exploring the functionality of Three.js has been my recent project. I have a Collada model stored in a dae file and a dedicated Three.js webpage to showcase it. However, upon rendering, the model appears as a black shape without any discernible edges. Despite multiple light sources present in the scene and a small red cube serving as an indicator, they seem to have no effect on the Collada object.
Below is the HTML page used:
<html>
<head>
<title>Test 3</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<!-- JavaScript scripts for Three.js setup -->
<!--
your script here
-->
</script>
</body>
</html>
In addition, here is the Collada model structure:
<!-- COLLADA model XML data -->
<!--
your XML data here
-->
Despite successful loading and display of the model, it remains entirely black and unaffected by lighting. Various attempts to modify materials, colors, and parameters yielded no improvement. Comparing the model's appearance in Google Earth revealed similar results - a plain colored object with no visible features or reflections. Numerous online resources address similar issues of objects appearing black, usually relating to texture mapping and other factors. I am seeking assistance to resolve this matter, as I believe there may be a misstep in my approach...