Currently, I am working on learning three.js, and my progress has been going well. I successfully programmed a cube on the canvas using JS Fiddle. However, when I attempted to implement Orbit Controls to rotate the cube, the canvas displayed only a black screen.
Despite researching on the three.js website and reviewing examples of working Orbit Controls, I have been unable to resolve the issue.
<script src='http://threejs.org/build/three.min.js'></script>
<script src='http://threejs.org/examples/js/controls/OrbitControls.js'></script>
<script>
let container, renderer, scene, camera, controls;
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xccccff);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 4;
controls = new THREE.OrbitControls(camera, renderer.domElement);
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial({color: 0x000000});
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);
window.addEventListener('resize', resizeFunction);
}
let resizeFunction = function() {
let width = window.innerWidth;
let height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
let animate = function() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
init();
animate();
</script>
Despite checking my code repeatedly, I did not encounter any error messages. I was anticipating a rotating black cube on a lighter background as the output, but instead, the screen remained entirely black. Any assistance in identifying the issue would be greatly appreciated!