ThreeJS- TypeError: material.customProgramCacheKey 不是函数答案

【问题标题】：ThreeJS- TypeError: material.customProgramCacheKey is not a functionThreeJS- TypeError: material.customProgramCacheKey 不是函数
【发布时间】：2021-06-29 22:40:44
【问题描述】：

我遇到了一个错误

TypeError: material.customProgramCacheKey 不是函数

调用函数this.animate() 时显示错误。除非 URL 为空，否则不会出现错误。该错误来自哪里我不使用材料或customProgramCacheKey。

这是因为物体没有材料吗？我还检查了three.js 文档，但找不到解决此问题的方法。

export class CanvasComponent implements OnInit, AfterViewInit {

  private loader: THREEFULL.OBJLoader;
  private scene : THREE.Scene = new THREE.Scene()
  private renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer( {antialias: true})
  private width =  window.innerWidth/1.5
  private height = window.innerHeight/1.7
  private objects = [];
  private camera: THREE.Camera = null
  @ViewChild('canvas') canvas : ElementRef;
  object = localStorage.getItem('obj');
  mtl = localStorage.getItem('mtl');
  constructor() { }
  
  ngOnInit() {
    
   this.showObject(); 
       
    this.basic();
  }
  ngAfterViewInit() {
    this.canvas.nativeElement.appendChild(this.renderer.domElement)
    this.renderer.setSize(this.width,this.height)
    this.renderer.setClearColor(new THREE.Color(0xeeeeee))
  }
  showObject(){

    this.camera = new THREE.PerspectiveCamera(90,this.width/this.height, 1, 15000)
    this.camera.position.set(100,10,100)
    this.camera.lookAt(this.scene.position)

    let light = new THREE.PointLight()
    light.position.set(10000,10000,10000)
    this.scene.add(light)

    
    light = new THREE.PointLight(0xffffff, 0.8, 18);
    light.position.set(-3,6,-3);
    light.castShadow = true;
    light.shadow.camera.near = 0.1;
    light.shadow.camera.far = 25;
    this.scene.add(light);
    this.scene.add(new THREE.AxesHelper(5000))

    const byteNumbers = new Array(this.object.length);
      for (let i = 0; i < this.object.length; i++) {
       byteNumbers[i] = this.object.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      const url = URL.createObjectURL(new Blob([byteArray], {type: 'model/obj'}));
    

    this.loader = new THREEFULL.OBJLoader()
    this.loader.load(url,obj=>{
      this.scene.add(obj);
      (obj as THREE.Group).children.forEach(o => this.objects.push(o));
    
     this.animate(obj,0.01) 
    })
  }
  private animate(obj: THREE.Object3D, angle:number) {
    obj.scale.x = 3
    obj.scale.y = 3
    obj.scale.z = 3
    obj.translateOnAxis(new THREE.Vector3(0,2,-10),0.2)

    this.render();
    requestAnimationFrame(() => this.animate(obj,angle))
  }
  private render() {
    this.renderer.render(this.scene, this.camera)
  }
}

【问题讨论】：

afaik 这发生在加载资产的构建过程中。我不确定一个好的解决方案，但您可以尝试使用不同的导入/要求机制加载 THREE.OBJLoader。

标签： typescript three.js

【解决方案1】：

私有加载器：THREEFULL.OBJLoader;

请不要从第三方仓库导入OBJLoader。您可以像核心库一样从three npm 包中导入它。 ES6 导入如下所示：

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

//

this.loader = new OBJLoader();

如果您使用THREEFULL 中的其他类，请使用与上述相同的方法。

【讨论】：