Error loading Shaders in an Angular App with Three.js

Question

Here is the component: https://www.npmjs.com/package/app3d-three-template

And here is the Plnkr: https://plnkr.co/edit/bdkshJFzhwmLNdgO?preview

The error is that the fire Shader doesn't show the color and when OrbitControls are loaded (actually are commented in the Plnkr code), then I have a new error with the Shader.

import * as THREE from 'three';
import { Injectable, ElementRef, OnDestroy, NgZone } from '@angular/core';
import { RenderService } from './render.service';

//declare var OrbitControls: any;

declare var LavaShader: any;

@Injectable({
  providedIn: 'root'
})
export class MyRenderService implements RenderService {

  private start = Date.now();

  private canvas: HTMLCanvasElement;
  private renderer: THREE.WebGLRenderer;
  private camera: THREE.PerspectiveCamera;
  private scene: THREE.Scene;
  private light: THREE.AmbientLight;
  private directionalLight: THREE.DirectionalLight;
  //private ms_Controls;

  private material: THREE.ShaderMaterial;

  private SEPARATION = 120;
  private AMOUNTX = 70;
  private AMOUNTY = 70;
  private particles: THREE.Sprite[];
  private particle: THREE.Sprite;
  private count = 0;

  private marsMesh: THREE.Mesh;
  private moonMesh: THREE.Mesh;
  private venusMesh: THREE.Mesh;

   //implement for create objects in scene
    createObjects(scene: THREE.Scene, renderer: THREE.WebGLRenderer, camera: THREE.PerspectiveCamera, light: THREE.AmbientLight) {

      // Initialize Orbit control       
        /*
    this.ms_Controls = new OrbitControls(camera, renderer.domElement);
        this.ms_Controls.userPan = false;
        this.ms_Controls.userPanSpeed = 0.0;
        this.ms_Controls.maxDistance = 5000.0;
        this.ms_Controls.maxPolarAngle = Math.PI * 0.495;
    */
    this.particles = new Array();

    var PI2 = Math.PI * 2;

    var materialParticle = new THREE.SpriteMaterial( { color: 0x2aabd2, opacity: 1.0 } );

    var i = 0;

    for ( var ix = 0; ix < this.AMOUNTX; ix ++ ) {

      for ( var iy = 0; iy < this.AMOUNTY; iy ++ ) {

        this.particle = this.particles[ i ++ ] = new THREE.Sprite( materialParticle.clone() );
        this.particle.position.x = ix * this.SEPARATION - ( ( this.AMOUNTX * this.SEPARATION ) / 2 );
        this.particle.position.y = -200;
        this.particle.position.z = iy * this.SEPARATION - ( ( this.AMOUNTY * this.SEPARATION ) / 2 );
        scene.add( this.particle );

      }

    }

    // sphere with fire
    this.material = new THREE.ShaderMaterial( {

      uniforms: {
        tExplosion: {
          type: "t",
          value: new THREE.TextureLoader().load('/assets/textures/explosion.png')
        },
        time: {
          type: "f",
          value: 0.0
        }
      },
      vertexShader: LavaShader.vertexShader,
      fragmentShader: LavaShader.fragmentShader

    } );

    let mesh = new THREE.Mesh(
        new THREE.IcosahedronGeometry( 40, 4 ),
        this.material
    );
    mesh.translateY(150);
    scene.add( mesh );

    camera.lookAt(mesh.position);

    var geometry1   = new THREE.SphereGeometry(1000, 32, 32);
    var material1  = new THREE.MeshBasicMaterial();
    material1.map   = new THREE.TextureLoader('/assets/textures/2k_mars_little.jpg');
    material1.side  = THREE.BackSide;
    this.marsMesh = new THREE.Mesh(geometry1, material1);
    this.marsMesh.position.x = -40000;
    this.marsMesh.position.y = 5000;
    this.marsMesh.position.z = 20000;

    scene.add(this.marsMesh);

    var geometry2   = new THREE.SphereGeometry(1000, 32, 32);
    var material2  = new THREE.MeshBasicMaterial();
    material2.map   = new THREE.TextureLoader('/assets/textures/2k_venus_surface_little.jpg');
    material2.side  = THREE.BackSide;
    this.venusMesh = new THREE.Mesh(geometry2, material2);
    this.venusMesh.position.x = -50000;
    this.venusMesh.position.y = 8000;
    this.venusMesh.position.z = 10000;

    scene.add(this.venusMesh);

    var geometry3   = new THREE.SphereGeometry(1000, 32, 32);
    var material3  = new THREE.MeshBasicMaterial();
    material3.map   = new THREE.TextureLoader('/assets/textures/2k_moon_little.jpg');
    material3.side  = THREE.BackSide;
    this.moonMesh = new THREE.Mesh(geometry3, material3);
    this.moonMesh.position.x = 1000;
    this.moonMesh.position.y = 2500;
    this.moonMesh.position.z = 25000;

    scene.add(this.moonMesh);
    }

    //implement for render animation of objects
    renderObjects(scene: THREE.Scene, renderer: THREE.WebGLRenderer, camera: THREE.PerspectiveCamera, light: THREE.AmbientLight) {
      this.material.uniforms[ 'time' ].value = .00025 * ( Date.now() - this.start );

    var i = 0;

    for ( var ix = 0; ix < this.AMOUNTX; ix ++ ) {

      for ( var iy = 0; iy < this.AMOUNTY; iy ++ ) {

        this.particle = this.particles[ i++ ];
        this.particle.position.y = -200 + ( Math.sin( ( ix + this.count ) * 0.3 ) * 50 ) +
          ( Math.sin( ( iy + this.count ) * 0.5 ) * 50 );
        if(this.particle.position.y >= -110) {
          this.particle.material.color = new THREE.Color(0x925f01);
        } else if(this.particle.position.y > -140 && this.particle.position.y < -110) {
          this.particle.material.color = new THREE.Color("orange");
        } else if(this.particle.position.y > -170 && this.particle.position.y < -140) {
          this.particle.material.color = new THREE.Color(0xf85d09);
        } else {
          this.particle.material.color = new THREE.Color(0x2aabd2);
        }
        this.particle.scale.x = this.particle.scale.y = ( Math.sin( ( ix + this.count ) * 0.3 ) + 1 ) * 4 +
          ( Math.sin( ( iy + this.count ) * 0.5 ) + 1 ) * 4;

      }

      //this.moonMesh.rotateX(0.00001);
      //this.moonMesh.rotateY(0.00001);
      //this.moonMesh.rotateZ(0.00001);

    }

    this.count += 0.1;

    //this.ms_Controls.update();
    }

}

Can anyone help me?

Answer 1

The shaders look like they're from different versions of three. The shader you are using is trying to access a variable that doesn't exist.

It's also possible that this specific one mapTexelToLinear is generated dynamically, and that some enum is not correctly set that's supposed to generate it.

It may make sense to post an issue on the component's repo.