typescript - ThreeJS- خطای نوع: material.customProgramCacheKey یک تابع نیست

من دارم یک خطا میگیرم

TypeError: material.customProgramCacheKey یک تابع نیست

این خطا زمانی نمایش داده میشود که تابع this.animate() فراخوانی شود. مگر زمانی که URL خالی باشد، در این صورت هیچ خطایی وجود ندارد. این خطا از کجا میآید؟ من از material یا 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)
  }
}

پاسخ شماره ۱

خصوصی loader:THREEFULL.OBJLoader;

لطفاً OBJLoader را از مخازن شخص ثالث وارد نکنید. شما میتوانید آن را مانند کتابخانه اصلی، از بسته npm three وارد کنید. وارد کردن در ES6 به این شکل است:

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

//

this.loader = new OBJLoader();

اگر از کلاسهای دیگری از THREEFULL استفاده میکنید، از همان رویکرد بالا استفاده کنید.