Hi, vtk.js experts:
I try to learn how to use vtkOBJReader, and this is my html code for testing. I write this code based on online exmaple ( vtk.js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vtk.js OBJReader</title>
</head>
<body>
<script src="https://unpkg.com/vtk.js"></script>
<script>
const vtkActor = vtk.Rendering.Core.vtkActor;
const vtkFullScreenRenderWindow = vtk.Rendering.Misc.vtkFullScreenRenderWindow;
const vtkMapper = vtk.Rendering.Core.vtkMapper;
const vtkMTLReader = vtk.IO.Misc.vtkMTLReader;
const vtkOBJReader = vtk.IO.Misc.vtkOBJReader;
const OBJPath = 'http://kitware.github.io/vtk-js/data/obj/space-shuttle-orbiter/space-shuttle-orbiter.obj';
const MTLPath = 'http://kitware.github.io/vtk-js/data/obj/space-shuttle-orbiter/space-shuttle-orbiter.mtl';
const fileName = 'space-shuttle-orbiter';
// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
background: [0.5, 0.5, 0.5],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
const resetCamera = renderer.resetCamera;
const render = renderWindow.render;
// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------
const reader = vtkOBJReader.newInstance({ splitMode: 'usemtl' });
const materialsReader = vtkMTLReader.newInstance();
const scene = [];
function onClick(event) {
const el = event.target;
const index = Number(el.dataset.index);
const actor = scene[index].actor;
const visibility = actor.getVisibility();
actor.setVisibility(!visibility);
if (visibility) {
el.classList.remove('visible');
} else {
el.classList.add('visible');
}
render();
}
materialsReader
.setUrl(MTLPath)
.then(() => {
reader
.setUrl(OBJPath)
.then(() => {
const size = reader.getNumberOfOutputPorts();
for (let i = 0; i < size; i++) {
const polydata = reader.getOutputData(i);
const name = polydata.get('name').name;
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();
actor.setMapper(mapper);
mapper.setInputData(polydata);
materialsReader.applyMaterialToActor(name, actor);
renderer.addActor(actor);
scene.push({ name, polydata, mapper, actor });
}
resetCamera();
render();
// Build control ui
const htmlBuffer = [
'<style>.visible { font-weight: bold; } .click { cursor: pointer; min-width: 150px;}</style>',
];
scene.forEach((item, idx) => {
htmlBuffer.push(
`<div class="click visible" data-index="${idx}">${item.name}</div>`
);
});
fullScreenRenderer.addController(htmlBuffer.join('\n'));
const nodes = document.querySelectorAll('.click');
for (let i = 0; i < nodes.length; i++) {
const el = nodes[i];
el.onclick = onClick;
}
});
});
// -----------------------------------------------------------
// Make some variables global so that you can inspect and
// modify objects in your browser's developer console:
// -----------------------------------------------------------
window.reader = reader;
window.materialsReader = materialsReader;
window.scene = scene;
window.fullScreenRenderer = fullScreenRenderer;
</script>
</body>
</html>
However, there is error message when I open the html file by browser:
vtk.js:2 Uncaught (in promise) SecurityError: Failed to execute 'texSubImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded.
Could you provide some suggestions? Thanks a lot for the help!
The code can generate subsequent results once I comment out materialsReader.applyMaterialToActor(name, actor);
