I'm at a loss trying to troubleshoot this code. It refuses to render as expected. The goal is to load an .obj file with a custom .png texture applied to it. The user should then be able to rotate around the image by dragging the mouse. I have no clue what's causing the issue. Could it be that the object is not in the camera's field of view? Any assistance would be greatly appreciated! P.S. The .js files are loading correctly. I tested this setup with a simpler version and didn't encounter any new functionality quirks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/Detector.js"></script>
<script>
// Variables and functions for initializing and animating the 3D object
var container;
var camera, scene, renderer;
var group, text, plane;
var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var mouseY = 0;
var mouseYOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var finalRotationY;
// Initialize the scene
init();
animate();
function init() {
// Scene setup and object loading code here...
}
function animate() {
// Animation loop code here...
}
</script>
</body>
</html>