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?

pailhead · Accepted Answer · 2020-03-26 19:22:26Z

2

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.

answered Mar 26, 2020 at 19:22

pailhead

5,5272 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Martinez Ros Over a year ago

But I don't understand, because in local project it works, but on plnkr.co demo doesn't.

pailhead Over a year ago

Can you verify which version of three is in your repo and the package, and also both for local and plunkr. It may also be that they're all different, but still work in some particular combination of versions, but not another. Also might be good to paste the error message into your question.

pailhead Over a year ago

This is a long shot, but it's also possible (depending on the version) that importing orbit controls overrides your three. So maybe adding to the mix, see where OrbitControls is coming from, because it could be from yet another version.

David Martinez Ros Over a year ago

I don't know to resolution the plunker error, so I publish my project in a github.io url. Here is the url: davidmartinezros.github.io/3dThreeTemplateDemo

Collectives™ on Stack Overflow

Error loading Shaders in an Angular App with Three.js

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related