Mat, Colour and Light seem to not be working

Questions
1

First time coding with three.js. following this tut https://youtu.be/_OwJV2xL8M8.

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.

Screenshot 2023-10-21 at 13.49.03
Screenshot 2023-10-21 at 13.49.032880×1800 228 KB

JS.

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)
scene.add(sphere)

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

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


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

html

<!doctype html>

Vite App

```
2

Try with a stronger light:

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

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

4

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