I encountered an issue
TypeError: material.customProgramCacheKey is not a function
The error pops up when I invoke the function this.animate(). However, no error occurs when the URL is empty. Where could this error be originating from since I don't utilize material or customProgramCacheKey.
Could it be due to the absence of material object? I even referred to the three.js documentation in search of a resolution but couldn't find one.
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)
}
}