I'm encountering some challenges with three.js as a beginner, specifically in rendering my scene and camera. Although I have successfully converted Adobe Illustrator vectors, I am struggling to render the scene properly. Even when removing the scene, camera & renderer code, there seems to be no impact on what is displayed in the browser.
Let's take a look at my HTML:
<canvas id ="slot">
</canvas>
Now, here is my JavaScript code:
var c = document.getElementById('slot');
c.height = 282;
c.width = 400;
var cx = c.getContext('2d');
// It appears that this part is not functioning correctly...
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// However, this section is working fine
cx.fillStyle = "rgba(255,255,255,0)";
cx.fillRect(0,0,1,1);
cx.fillRect(1,0,1,1);
//....(and so on)
var slot = new THREE.Mesh(cx);
// Setting up GridHelper
var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper(size, divisions);
// Ambient Light
var light = new THREE.AmbientLight(0x404040);
// Fog settings
var fogColor = 0xFFFFFF;
var near = 10;
var far = 100;
var fog = new THREE.Fog(fogColor, near, far);
// Adding elements to the scene
scene.add(slot, gridHelper, light, fog);
camera.position.z = 5;
renderer.render(scene, camera);
Any assistance with troubleshooting these issues would be highly appreciated.