Mat, Colour and Light seem to not be working

First time coding with three.js. following this tut

Im at 13:30. but my sphere just comes out like this. I also had to change my renderer bg color to even see it.


import * as THREE from 'three';

const scene = new THREE.Scene();

//create sphere
const geo = new THREE.SphereGeometry(3, 64, 64)
const mat = new THREE.MeshStandardMaterial({ color: "#00ff83" })
const sphere = new THREE.Mesh(geo, mat)

const light = new THREE.PointLight('#FFFFFF', 1, 100)
light.position.set(0, 10, 10)

const camera = new THREE.PerspectiveCamera(45, 800 / 600)
camera.position.z = 10

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


<!doctype html>

Vite App


Try with a stronger light:

const light = new THREE.PointLight('#FFFFFF', 100, 100)
1 Like

Thank you! it worked! if its ok could u explain this to me a little :), or direct me to a place that would

Most likely the tutorial is using an old release of Three.js, where lights and their parameters were designed to use “nice” numbers. Since release 155 lights and their properties are closer to physical lights. You can find more details here:

1 Like