SpotLight & Helper is not visible

Hi,

I’m trying to make some cools anims using GSAP & Three in my Nuxt 2 project. It actually works pretty nice but my two SpotLight are not working & the helper show NOTHING.
Actually my objets are juste made of flat color so… Looks like a flat shape, not 3D one.
I think i miss something but i don’t have the point after some researches…

Here is my class :

import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  Group,
  MeshPhysicalMaterial,
  Mesh,
  IcosahedronGeometry,
  Vector3,
  PCFSoftShadowMap,
  ACESFilmicToneMapping,
  Color,
  sRGBEncoding,
  AmbientLight,
  SpotLight,
  SpotLightHelper
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

class Three {
  constructor({ context }) {
    this.context = context;
    this.settings = {
      frontLight: {
        color: new Color(0xbe7c7c),
        intensity: 13.6,
        distance: 26.9,
        penumbra: 0,
        x: 10,
        y: 14,
        z: 20,
      },
      backLight: {
        color: new Color(0xc9f0f0),
        intensity: 13,
        distance: 23,
        penumbra: 0,
        x: -19,
        y: -5.3,
        z: 3,
      },
    };
  }

  init({ container }) {
    this.container = container;
    this.createScene();
  }

  createScene() {
    const pixelRatio = window.devicePixelRatio;
    const AA = pixelRatio <= 1;

    this.renderer = new WebGLRenderer({
      antialias: AA,
      alpha: true,
    });

    this.renderer.setPixelRatio(pixelRatio);

    this.renderer.toneMappingExposure = 0.6;
    this.renderer.outputEncoding = sRGBEncoding;
    this.renderer.toneMapping = ACESFilmicToneMapping;
    this.renderer.powerPreference = "high-performance";

    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = PCFSoftShadowMap;


    this.container.appendChild(this.renderer.domElement);

    this.scene = new Scene();
    this.camera = new PerspectiveCamera(
      32,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    this.camera.position.y = 5;
    this.camera.position.z = 10;

    this.camera.lookAt(new Vector3(0, 0, 0));

    // this.controls = new OrbitControls(this.camera, this.container);
    // this.controls.update();

    const ambientLight = new AmbientLight('blue');
    this.scene.add(ambientLight);

    this.createLights;
    this.addObjects();
    this.onResize();
    this.render();
  }

  addObjects() {
    this.meshesContainer = new Group();
    this.scene.add(this.meshesContainer);

    const objects = [
      {
        size: 1,
        position: {
          x: -1,
          y: 1,
          z: 0,
        },
        speed: -3,
        color: 0x2b6cb0,
      },

      {
        size: 1,
        position: {
          x: 1,
          y: -5,
          z: -8,
        },
        speed: 1,
        color: 0x2b6cb0,
      },
    ];

    objects.forEach((el, index) => {
      const material = new MeshPhysicalMaterial({
        color: el.color,
      });

      const obj = new IcosahedronGeometry(el.size);
      const ico = new Mesh(obj, material);
      ico.name = "mainCube" + index;
      ico.position.set(el.position.x, el.position.y, el.position.z);

      ico.scale.set(0, 0, 0);
      this.meshesContainer.add(ico);

      gsap.to(ico.rotation, {
        y: el.speed * 3,
        z: el.speed * 3,
        ease: "power1.inOut",
        scrollTrigger: {
          trigger: "#fullscreen",
          endTrigger: "footer",
          scrub: 1,
          end: "bottom bottom",
        },
      });

      gsap.to(
        ico.scale,
        {
          x: 1,
          y: 1,
          z: 1,
          duration: 2,
          ease: "power1.inOut",
          scrollTrigger: {
            trigger: "#fullscreen",
            start: "top top",
            scrub: 1,
            end: "bottom bottom",
          },
        },
        1
      );
    })
  }

  createLights() {
    this.frontLight = new SpotLight(
      this.settings.frontLight.color,
      this.settings.frontLight.intensity,
      this.settings.frontLight.distance
    );

    this.frontLight.castShadow = true;
    this.frontLight.shadow.mapSize.width = 1024; // default
    this.frontLight.shadow.mapSize.height = 1024; // default
    this.frontLight.shadow.camera.near = 0.5; // default
    this.frontLight.shadow.camera.far = 500;
    this.frontLight.shadow.normalBias = 0.2;

    this.scene.add(this.frontLight);

    this.backLight = new SpotLight(
      this.settings.frontLight.color,
      this.settings.frontLight.intensity,
      this.settings.frontLight.distance
    );
    this.backLight.castShadow = true;
    this.backLight.shadow.mapSize.width = 1024; // default
    this.backLight.shadow.mapSize.height = 1024; // default
    this.backLight.shadow.camera.near = 0.5; // default
    this.backLight.shadow.camera.far = 500;
    this.backLight.shadow.normalBias = 0.2;
    this.backLight.penumbra = this.settings.backLight.penumbra;

    this.scene.add(this.backLight);

    this.frontLight.position.set(
      this.settings.frontLight.x,
      this.settings.frontLight.y,
      this.settings.frontLight.z
    );
    this.backLight.position.set(
      this.settings.backLight.x,
      this.settings.backLight.y,
      this.settings.backLight.z
    );

    const spotLightHelper2 = new SpotLightHelper(this.backLight);
    this.scene.add(spotLightHelper2);

     const spotLightHelper1 = new SpotLightHelper(this.frontLight);
     this.scene.add(spotLightHelper1);
  }

  render() {
    this.renderer.render(this.scene, this.camera);

    window.requestAnimationFrame(() => {
      this.render();
    });
  }

  onResize() {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }

  getObject({ name }) {
    console.log(this.scene);
    return this.scene.getObjectByName(name);
  }
}

export default (context, inject) => {
  const init = () => {
    const scene = new Three({ context: context });
    inject("three", scene);
  }
  init()
}

Thanks a LOT

@Etienne_Moureton can you provide a live example?

Things that can help

  1. spotLight by default looks at 0, 0, 0 coordinates. Take a look to target to change the default 0, 0, 0 target

  2. Try to call spotLightHelper.update() on the render function