I am embarking on my first three.js project, but unfortunately my scene is appearing entirely black. I am utilizing Vite as my local server.
Below is the JavaScript code I am currently using:
import * as THREE from 'three'
//Scene
const scene = new THREE.Scene()
//Create a sphere
const geometry = new THREE.SphereGeometry(3, 64, 64)
const material = new THREE.MeshStandardMaterial({
color: "#00ff83",
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh);
//Light
const light = new THREE.PointLight(0xffffff, 1, 100)
light.position.set = (0, 10, 10)
scene.add(light)
//Camera
const camera = new THREE.PerspectiveCamera(45, 800 / 600)
camera.position.z = 20
scene.add(camera)
//Renderer
const canvas = document.querySelector(".webgl")
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(800, 600)
renderer.render(scene, camera)
To include the canvas in my HTML file, I used the following code:
<canvas class="webgl"></canvas>