After browsing through similar questions on various sites, I have attempted all the recommended suggestions. From adjusting camera positioning to calling the render function and setting ambient light, I've tried everything mentioned in forums but nothing seems to be working.
Could someone please take a look at this fiddle and provide guidance on what mistakes I might be making?
https://jsfiddle.net/4mxybs5h/1/
// HTML
<main>
<div id="threeContainer">
hi
<canvas #canvas id="canvas"></canvas>
</div>
</main>
// JS
//this.animate(null);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
boxGeometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshBasicMaterial({color: 0xff0000});
mesh = new THREE.Mesh( boxGeometry, material );
canva = document.getElementById("canvas");
renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva });
startScene();
animate();
function startScene() {
//let scene = new THREE.Scene();
//let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let light = new THREE.AmbientLight( 0xffaaff );
scene.add( mesh );
light.position.set(10,10,10)
scene.add( light );
camera.position.set(500, 500, 500);
mesh.castShadow = true;
mesh.receiveShadow = true;
//this.renderer.setClearColor('#E5E5E5')
renderer.setClearColor(0xEEEEEE);
//this.renderer.setSize(window.innerWidth, window.innerHeight)
//this.renderer.render(this.scene, this.camera)
//this.renderer.setAnimationLoop(this.animate.bind(this))
//document.body.appendChild(this.renderer.domElement)
// window.addEventListener('resize', () => {
// this.renderer.setSize(window.innerWidth, window.innerHeight)
// this.camera.aspect = window.innerWidth / innerHeight
// this.camera.updateProjectionMatrix();
// })
}
function animate() {
camera.aspect = window.innerWidth / innerHeight
camera.updateProjectionMatrix();
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
//this.mesh.rotation.y += 1;
//document.body.appendChild(this.renderer.domElement)
renderer.render(scene, camera);
}
I have a feeling it might be something minor or obvious that I am overlooking. Any assistance would be greatly appreciated.