Hi Sebastien,
We tried and its working. It clears the renderer window. But when showed it again, it loaded the data two times it seems. Doing this repeatedly 5 to 6 times it shows down the mouse movements.
We are not able to figure out where we are doing wrong?
Your help will be highly appreciated.
Thanks a lot.
Best regards,
Sunita
Please find the details of the code as given below.
// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import "@kitware/vtk.js/Rendering/Profiles/Geometry";
import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import vtkXMLPolyDataReader from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
import vtkOpenGLRenderWindow from "@kitware/vtk.js/Rendering/OpenGL/RenderWindow";
import vtkRenderWindow from "@kitware/vtk.js/Rendering/Core/RenderWindow";
import vtkRenderWindowInteractor from
"@kitware/vtk.js/Rendering/Core/RenderWindowInteractor";
import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
import vtkInteractorStyleTrackballCamera from
"@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera";
//
const renderWindow = vtkRenderWindow.newInstance();
const renderer = vtkRenderer.newInstance({ background: [0, 0, 0] });
renderer.getActiveCamera().elevation(90);
renderer.getActiveCamera().azimuth(0);
renderer.getActiveCamera().setViewUp(0, 0, 1);
renderWindow.addRenderer(renderer);
//
const openGLRenderWindow = vtkOpenGLRenderWindow.newInstance();
//
const container = document.getElementById("contain");
openGLRenderWindow.setContainer(container);
renderWindow.addView(openGLRenderWindow);
//
const { width, height } = container.getBoundingClientRect();
openGLRenderWindow.setSize(width, height);
//
const interactor = vtkRenderWindowInteractor.newInstance();
interactor.setView(openGLRenderWindow);
interactor.bindEvents(container);
//
interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
//
function show_A(data) {
//
let br_reader = vtkXMLPolyDataReader.newInstance();
br_reader.parseAsArrayBuffer(data);
//
let br_mapper = vtkMapper.newInstance();
br_mapper.setInputConnection(br_reader.getOutputPort());
//
let br_actor = vtkActor.newInstance();
br_actor.getProperty().setRepresentation(2);
br_actor.getProperty().setOpacity(0.4);
br_actor.getProperty().setColor(1, 1, 1);
br_actor.setMapper(br_mapper);
//
renderer.addActor(br_actor);
renderer.resetCamera();
interactor.initialize();
}
//
function show_B(data) {
//
let nr_reader = vtkXMLPolyDataReader.newInstance();
nr_reader.parseAsArrayBuffer(data);
//
let nr_mapper = vtkMapper.newInstance();
nr_mapper.setInputConnection(nr_reader.getOutputPort());
//
let nr_actor = vtkActor.newInstance();
nr_actor.getProperty().setRepresentation(2);
nr_actor.getProperty().setOpacity(0.6);
nr_actor.getProperty().setColor(0, 1, 0);
nr_actor.setMapper(nr_mapper);
//
renderer.addActor(nr_actor);
}
//
function show_C(data) {
//
let ed_reader = vtkXMLPolyDataReader.newInstance();
ed_reader.parseAsArrayBuffer(data);
//
let ed_mapper = vtkMapper.newInstance();
ed_mapper.setInputConnection(ed_reader.getOutputPort());
//
let ed_actor = vtkActor.newInstance();
ed_actor.getProperty().setRepresentation(2);
ed_actor.getProperty().setOpacity(0.6);
ed_actor.getProperty().setColor(1, 0, 0);
ed_actor.setMapper(ed_mapper);
//
renderer.addActor(ed_actor);
}
//
function show_D(data) {
//
let et_reader = vtkXMLPolyDataReader.newInstance();
et_reader.parseAsArrayBuffer(data);
//
let et_mapper = vtkMapper.newInstance();
et_mapper.setInputConnection(et_reader.getOutputPort());
//
let et_actor = vtkActor.newInstance();
et_actor.getProperty().setRepresentation(2);
et_actor.getProperty().setOpacity(0.6);
et_actor.getProperty().setColor(1, 1, 0);
et_actor.setMapper(et_mapper);
//
renderer.addActor(et_actor);
}
//
function reader(file, res) {
const reader = new FileReader();
reader.onload = function onLoad(e) {
if (res == "f1") {
show_A(reader.result);
} else if (res == "f2") {
show_B(reader.result);
} else if (res == "f3") {
show_C(reader.result);
} else if (res == "f4") {
show_D(reader.result);
} else {
console.log("Wrong Image!!");
}
};
reader.readAsArrayBuffer(file);
}
function converter(fileUrl, fileName) {
return fetch(fileUrl)
.then((response) => response.blob())
.then((blob) => new File([blob], fileName, { type: blob.type }));
}
async function main() {
let keyA = document.getElementById("keyA").value; // 1
let keyB = document.getElementById("keyB").value; // 2
let keyC = document.getElementById("keyC").value; // 3
let keyD = document.getElementById("keyD").value; // 4
let btnC = document.getElementById("btnC").value; // Btn
const fileA = await converter(keyA, "A");
const fileB = await converter(keyB, "B");
const fileC = await converter(keyC, "C");
const fileD = await converter(keyD, "D");
if (btnC == 0) {
// clear
} else if (btnC == 1) {
reader(fileA, "f1");
reader(fileB, "f2");
reader(fileC, "f3");
reader(fileD, "f4");
} else if (btnC == 2) {
reader(fileA, "f1");
reader(fileB, "f2");
} else if (btnC == 3) {
reader(fileA, "f1");
reader(fileC, "f3");
} else if (btnC == 4) {
reader(fileA, "f1");
reader(fileD, "f4");
}
}
main();