I'm new to threeJS and want to display a sphere. But somehow I cant. Please help

import * as THREE from "three";

const scene = new THREE.Scene();

//created the sphere
const geometry = new THREE.SphereGeometry(10, 64, 64);
const material = new THREE.MeshStandardMaterial({
  color: "#00ff83",
const mesh = new THREE.Mesh(geometry, material);

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 10, 10);

const camera = new THREE.PerspectiveCamera(45, 800 / 600, 1, 1000);
camera.position.z = 20;

const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(800, 600);
renderer.render(scene, camera);

I think your light is inside the sphere. Try making the sphere a tenth of its current size to verify that’s the problem

1 Like

I tried, but unfortunately the problem remains as it is :frowning:

Could you reduce your topic title to something shorter and put that description into the post please.

Here’s a code sandbox of a working project. I’ll let you figure out why your project isn’t working

1 Like

As a beginner, take a look at some simple examples and modify them for practice.

Use the Collection of examples from discourse.threejs.org


and the BeginnerExample

1 Like

ok done. pls check