I'm looking to create a simple 3D model viewer with rotation capabilities, but I've run into an issue. When I add OrbitControls to my code, the page just shows up as blank:
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
Here's the full code:
<body>
<script src="js/OrbitControls.js"></script>
<script src="js/three.min.js"></script>
<script src="js/OBJLoader.js"></script>
<div id="ahoj" style="width:1000px; height:700px">
</div>
<script>
var container;
var camera, controls, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = 1000 / 2;
var windowHalfY = 700 / 2;
init();
animate();
function init() {
// Code here
}
function onWindowResize() {
// Code for resizing window
}
function animate() {
// Code for animation
}
function render() {
// Rendering function
}
</script>
</body>
Can anyone help me figure out what's causing this problem? I've tried following some tutorials without success.