Hi All,
I’ve been getting this error when trying to add another geometry to an existing scene. I’m also sing viewport, not sure if that’s related. And after reading a .drc file to geometry I’m adding a colors attribute.
From the answers I’ve been reading, they all talk about the loader or the material, but I don’t see how it’s related to my code.
Would appreciate your help!
Here’s the stack trace:
And this is my code. I’m first calling the create scene and then the loadDracoModel function:
public createScene(canvas: ElementRef<HTMLCanvasElement>, modelIndex: number): void {
if (modelIndex === 0){
this.scenes = [];
}
if (!this.canvas || !this.renderer){
this.canvas = canvas.nativeElement;
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas,
alpha: false,
antialias: true
});
}
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.canvasColor = new THREE.Color('#0f0c29');
const camera = new THREE.OrthographicCamera( window.innerWidth / - 2,
window.innerWidth / 2,
window.innerHeight / 2,
window.innerHeight / - 2,
-300, 1000 );
this.setCameraPosition(camera);
this.camera = camera;
const scene = new THREE.Scene();
scene.name = 'Scene ' + modelIndex;
scene.background = null ;
scene.add(this.camera);
scene.userData.camera = camera;
console.log('camera was added to scene');
const light = new THREE.AmbientLight( 0xffffff, 2 );
scene.add(light);
scene.userData.ligth = light;
this.scenes.push(scene);
this.controls = new OrbitControls( this.camera, this.renderer.domElement );
this.controls.maxPolarAngle = Math.PI;
this.controls.minPolarAngle = 0;
this.controls.minAzimuthAngle = 0;
this.controls.maxAzimuthAngle = 0;
this.controls.enableZoom = true;
this.controls.minZoom = 1;
this.controls.maxZoom = 10;
console.log('controls added successfully');
}
public loadDracoModel(visualModel: string, isMeasurement: boolean,
measurementsValuesUrl: string, colorMapName: string, minMapValue: number,
maxMapValue: number): Promise<THREE.BufferGeometry> {
return new Promise<THREE.BufferGeometry>(async (resolve, reject) => {
this.loading = true;
this.dracoLoader = new DRACOLoader();
this.dracoLoader.setDecoderPath( '../../assets/' );
this.dracoLoader.setDecoderConfig( { type: 'js' } );
this.dracoLoader.load(visualModel, ( geometry ) => {
geometry.computeVertexNormals();
this.dracoLoader.dispose();
return resolve(geometry);
},
( xhr ) => {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded model ' + visualModel);
});
});
}
private setMesh(geometry: THREE.BufferGeometry, material: THREE.Material, xPosition: number,
yPosition: number, zPosition: number, scene: THREE.Scene): void {
const mesh = this.createMesh(geometry, material, xPosition, yPosition, zPosition);
scene.add(mesh);
mesh.position.set(xPosition, yPosition, zPosition);
}
public render(): void {
if (!this.renderer){
return;
}
this.frameId = requestAnimationFrame(() => {
this.render();
});
const scope = this;
this.renderSingleView();
}
private renderSingleView(): void {
const camera = this.scenes[0].userData.camera;
this.renderer.setViewport(252, 40, this.canvas.width - 500, this.canvas.height - 80);
this.renderer.setScissor(252, 40, this.canvas.width - 500, this.canvas.height - 80);
this.renderer.render(this.scenes[0], camera);
}
public animate(): void {
this.ngZone.runOutsideAngular(() => {
this.render();
window.addEventListener('resize', () => {
this.resize();
});
});
}
Thanks!