Currently, I'm facing an issue while trying to showcase a globe using Three.js. Everything works perfectly until I attempt to use my own canvas. It seems that when I place my canvas before the JavaScript file in the HTML structure, it doesn't display correctly and instead shows a blank canvas. Below is the code snippet initializing the canvas:
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: myCanvas });
renderer.setSize(width, height);
console.log(renderer.domElement)
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera();
camera.aspect = width/height;
camera.updateProjectionMatrix();
scene.add(new THREE.AmbientLight(0xbbbbbb));
scene.add(new THREE.DirectionalLight(0xffffff, 0.6));
camera.position.z = 300;
camera.position.x = 0;
camera.position.y = 0;
scene.add(camera);
scene.fog = new THREE.Fog(0x545ef3, 400, 2000);
// Add camera controls
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.minDistance = 101;
controls.rotateSpeed = 1;
controls.zoomSpeed = 0.3;
window.addEventListener("resize", onWindowResize, false);
window.addEventListener('click', onClick, false);
//document.body.appendChild(renderer.domElement);
If I comment out the last line, although the canvas is still there in the document object model (DOM), it remains empty. If I uncomment it, the canvas appears at the end of the body as expected, but it displays as a black canvas. Does anyone have insights into why this behavior is occurring?