使用 Three.js 在 Angular 应用程序中加载着色器时出错

Question

组件如下：https://www.npmjs.com/package/app3d-three-template

这是 Plnkr：https://plnkr.co/edit/bdkshJFzhwmLNdgO?preview

错误是火焰着色器没有显示颜色，当加载 OrbitControls 时（实际上在 Plnkr 代码中有注释），然后我有一个新的着色器错误。

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();
    }

}

谁能帮帮我？

Answer 1

着色器看起来像是来自三个的不同版本。您正在使用的着色器正在尝试访问不存在的变量。

也有可能这个特定的 mapTexelToLinear 是动态生成的，并且某些应该生成它的枚举设置不正确。

post 组件回购上的问题可能有意义。

使用 Three.js 在 Angular 应用程序中加载着色器时出错

Error loading Shaders in an Angular App with Three.js

shader

runtime-error

three.js

plnkr.co

angular