# PlaneGeometry + MeshPhongMaterial + SpotLight

**URL:** <https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389>\
**Category:** Questions\
**Tags:** lighting, mesh\
**Created:** [December 19, 2024, 9:36pm UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389 "2024-12-19T21:36:16Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wookier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wookier/32/54869_2.png) [@Wookier](https://discourse.threejs.org/u/Wookier)\
**Post date:** [December 19, 2024, 9:36pm UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/1 "2024-12-19T21:36:16Z")

</div>

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…

```javascript
// 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

---

<div class="post-metadata">

**Author:** ![iHast](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ihast/32/34649_2.png) [@iHast](https://discourse.threejs.org/u/iHast)\
**Post date:** [December 20, 2024, 5:34am UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/2 "2024-12-20T05:34:57Z")

</div>

Suggestion:

[![](https://img.youtube.com/vi/T6PhV4Hz0u4/maxresdefault.jpg "Three.js Lighting Tutorial (JavaScript) | Light Types Explained!") ](https://www.youtube.com/watch?v=T6PhV4Hz0u4)

---

<div class="post-metadata">

**Author:** ![Wookier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wookier/32/54869_2.png) [@Wookier](https://discourse.threejs.org/u/Wookier)\
**Post date:** [December 20, 2024, 10:22am UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/3 "2024-12-20T10:22:41Z")

</div>

[https://threejs.org/examples/?q=spot#webgl\_lights\_spotlight](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.

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [December 21, 2024, 4:14pm UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/4 "2024-12-21T16:14:12Z")

</div>

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

The link:

> **[draw1.html](https://jrlazz.github.io/anim/draw1.html)**

---

<div class="post-metadata">

**Author:** ![Wookier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wookier/32/54869_2.png) [@Wookier](https://discourse.threejs.org/u/Wookier)\
**Post date:** [December 21, 2024, 5:55pm UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/5 "2024-12-21T17:55:19Z")

</div>

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.

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

```

I just need more time to figure it out 🙂

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [December 21, 2024, 10:12pm UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/6 "2024-12-21T22:12:08Z")

</div>

Hi @Wookier …

I got the Three.js example

> **[three.js examples](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:

> **[spot002.html](https://jrlazz.github.io/anim/spot002.html)**

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [December 22, 2024, 7:51am UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/7 "2024-12-22T07:51:25Z")

</div>

> 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](https://threejs.org/docs/#api/en/lights/SpotLight)

---

<div class="post-metadata">

**Author:** ![Wookier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wookier/32/54869_2.png) [@Wookier](https://discourse.threejs.org/u/Wookier)\
**Post date:** [December 22, 2024, 11:53am UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/8 "2024-12-22T11:53:09Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [December 22, 2024, 3:19pm UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/9 "2024-12-22T15:19:43Z")

</div>

Ohh my bad. 😃 I read it wrong.

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [December 23, 2024, 12:47am UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/10 "2024-12-23T00:47:15Z")

</div>

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. 😉

The link:

> **[draw2.html](https://jrlazz.github.io/anim/draw2.html)**

---

<div class="post-metadata">

**Author:** ![Wookier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wookier/32/54869_2.png) [@Wookier](https://discourse.threejs.org/u/Wookier)\
**Post date:** [January 9, 2025, 6:06pm UTC](https://discourse.threejs.org/t/planegeometry-meshphongmaterial-spotlight/75389/11 "2025-01-09T18:06:20Z")

</div>

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