PlaneGeometry + MeshPhongMaterial + SpotLight

Questions
,
1

Hi everyone,
I need someone to explain lighting with Mesh types.
PROBLEM:
When I want to use SpotLight I can’t see any lights on my PlaneGeometry.
I was trying with different mesh types(I know that some of them are not affected by lights) with zero effects. I don’t get it…

// Define colours
const [color1, color2, color3] = [
  '#111B27',
  '#757E83',
  '#42687c',
]

const sceneColor1 = new THREE.Color(color1)
const sceneColor2 = new THREE.Color(color2)
const sceneColor3 = new THREE.Color(color3)

// Change background color
scene.background = sceneColor1

// Create wall function
const createWall = (width, height, color) => {
  const geometry = new THREE.PlaneGeometry(width, height)
  const material = new THREE.MeshPhongMaterial({color: color, side: THREE.DoubleSide})
  const wall = new THREE.Mesh(geometry, material)
  wall.receiveShadow = true

  return wall;
}

// Add walls
const backWall = createWall(500, 200, sceneColor1)
scene.add(backWall)

// Add floor
const floor = createWall(200, 200, sceneColor1)
scene.add(floor)

// Position walls
floor.rotation.x = Math.PI / 2
floor.position.y = -25
floor.position.z = -100

// Lights
const spotLight = new THREE.SpotLight('#f00', Math.PI , 1100, Math.PI / 10);
spotLight.target = floor
spotLight.castShadow = true;

const ambLight = new THREE.AmbientLight('#fff', 8)
spotLight.position.set(0, 70, -100);
const spotLightHelper = new THREE.SpotLightHelper(spotLight);

scene.add(ambLight, spotLight, spotLightHelper);

// Camera settings
camera.position.y = 0;
camera.position.z = -320;
scene.rotateY(0.202)
scene.rotateX(-0.202)
camera.lookAt(new THREE.Vector3(0, 0, 0));

// Draw canvas
const drawCanvas = () => {
  // scene.rotateY(0.002)
  renderer.render(scene, camera);
  // renderer.setAnimationLoop(drawCanvas)
};

drawCanvas();

Thanks in advance,
Luke

2

Suggestion:

3

https://threejs.org/examples/?q=spot#webgl_lights_spotlight

This example helped.
Thanks iHast for the video. Really interesting YT chanel.

Thread can be closed.

1 Like
4

Hi @Wookier …
I got Your code and tried in version147.
It worked, but I think is better goto the newer versions. :wink:

The link:

https://jrlazz.eu5.org/anim/draw1.html

1 Like
5

Thanks @jrlazz . I’m using version 171.
OrbitControls are surprisingly easy to use. Great stuff.
I definitely must read more about lights.
For example; why the second parameter has to be soooo high? position.y is only 170 but I still have to use intensivity = 1000000 to get normal light.
Of course my code is now a bit different.

const spotLight1 = createSpotlight( 0xFFFFFF, 1000000, 220, Math.PI / 5, 1, [0, 170, -100])

I just need more time to figure it out :slight_smile:

6

Hi @Wookier …

I got the Three.js example

https://threejs.org/examples/?q=spot#webgl_lights_spotlight

and saw that intensity value 100 is good for the scene.

I suggest You to work with this example to develop Your project.

PS. I made a more simple page from this reference for You to try:

https://jrlazz.eu5.org/anim/spot002.html

2 Likes
7

why the second parameter has to be soooo high?

Recent versions of threejs have switched to a more physics/physically based lighting model which necessitated a change of units for lighting.

I’m also not sure about the parameters you’re passing to the spotlight constructor… it appears you’re passing an array instead of the float “decay” parameter. That could also be part of the problem.

https://threejs.org/docs/#api/en/lights/SpotLight

8

Hi @manthrax

I’m also not sure about the parameters you’re passing to the spotlight constructor… it appears you’re passing an array instead of the float “decay” parameter.

This array contains x, y and z position. It’s not a decay parameter and this entire function was made by me :slight_smile:

9

Ohh my bad. :smiley: I read it wrong.

1 Like
10

Hi @Wookier …

I found why the so great necessary values of intensity… the decay!

I did another page in versiion 171, with very near code your posted, with some changes. :wink:

The link:

https://jrlazz.eu5.org/anim/draw2.html

1 Like
11

Thanks @jrlazz :slight_smile: . And sorry for the delay. Christmas time…
Decay indeed is responsible :slight_smile: