# PLYreader on web but not showing data
**URL:** https://discourse.vtk.org/t/plyreader-on-web-but-not-showing-data/13692
**Category:** Support
**Created:** [April 11, 2024, 3:41am UTC](https://discourse.vtk.org/t/plyreader-on-web-but-not-showing-data/13692 "2024-04-11T03:41:04Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@\_BarryWang](https://discourse.vtk.org/u/_BarryWang)
#### Post date: [April 11, 2024, 3:41am UTC](https://discourse.vtk.org/t/plyreader-on-web-but-not-showing-data/13692/1 "2024-04-11T03:41:04Z")
Hey everyone,right now I’m working on a project that can show ply file on web pages.
I discovered that some file can be shown but somehow the file I downsampled cannot be shown.
Here is the code below:
```
const container = document.querySelector('#container');
let renderer = null;
let renderWindow = null;
const cone = vtk.Filters.Sources.vtkConeSource.newInstance();
const actor = vtk.Rendering.Core.vtkActor.newInstance();
const mapper = vtk.Rendering.Core.vtkMapper.newInstance();
const reader = vtk.IO.Geometry.vtkPLYReader.newInstance();
const openGLRenderWindow = vtk.Rendering.OpenGL.vtkRenderWindow.newInstance();
actor.setMapper(mapper);
mapper.setInputConnection(reader.getOutputPort());
// Render
function refresh() {
if (renderer && renderWindow) {
const resetCamera = renderer.resetCamera;
const render = renderWindow.render;
resetCamera();
render();
}
}
function update() {
renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance();
renderer = vtk.Rendering.Core.vtkRenderer.newInstance();
renderWindow.addRenderer(renderer);
// Create the full screen render window inside the container
openGLRenderWindow.setContainer(container);
openGLRenderWindow.setSize(1000, 1000);
renderWindow.addView(openGLRenderWindow);
// Interactor
const interactor = vtk.Rendering.Core.vtkRenderWindowInteractor.newInstance();
interactor.setView(openGLRenderWindow);
interactor.initialize();
interactor.bindEvents(container);
// Interactor style
const trackball = vtk.Interaction.Style.vtkInteractorStyleTrackballCamera.newInstance();
interactor.setInteractorStyle(trackball);
renderer.addActor(actor);
actor.getMapper().setScalarVisibility(true);
const clr = { r: 250 / 255.0, g: 250 / 255.0, b: 250 / 255.0 };
actor.getProperty().setColor(clr.r, clr.g, clr.b);
refresh();
}
const myContainer = document.querySelector('body');
const fileContainer = document.createElement('div');
fileContainer.innerHTML =
'Select a ply file or a ply file with its texture file.
';
myContainer.appendChild(fileContainer);
const fileInput = fileContainer.querySelector('input');
function handlePlyFile(file) {
const fileReader = new FileReader();
fileReader.onload = function onLoad(e) {
reader.parseAsArrayBuffer(fileReader.result);
update();
};
fileReader.readAsArrayBuffer(file);
}
function handleImgFile(file) {
const fileReader = new FileReader();
fileReader.onload = () => {
const image = new Image();
image.src = fileReader.result;
const texture = vtkTexture.newInstance();
texture.setInterpolate(true);
texture.setImage(image);
actor.addTexture(texture);
refresh();
};
fileReader.readAsDataURL(file);
}
function handleFile(event) {
event.preventDefault();
const dataTransfer = event.dataTransfer;
const files = event.target.files || dataTransfer.files;
if (files.length === 1) {
myContainer.removeChild(fileContainer);
handlePlyFile(files[0]);
} else if (files.length > 1) {
myContainer.removeChild(fileContainer);
Array.from(files).forEach((file) => {
const name = file.name.toLowerCase();
if (name.endsWith('.ply')) {
handlePlyFile(file);
}
if (
name.endsWith('.png') ||
name.endsWith('.jpg') ||
name.endsWith('.jpeg')
) {
handleImgFile(file);
}
});
}
}
fileInput.addEventListener('change', handleFile);
```
Also,I woould really like to know if there is any way I can show my ply file as points instead of polydata in Web interface.
Thank you!
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [April 11, 2024, 3:16pm UTC](https://discourse.vtk.org/t/plyreader-on-web-but-not-showing-data/13692/2 "2024-04-11T15:16:43Z")
The `parseAsArrayBuffer` is meant for binary PLY file while the `parseAsText` is meant for text PLY file. We don’t have any automatic detection built-in.
Can you explain what you mean by “points instead of polydata”… Your data is a polydata, but you can render that polydata as just points. You can [look at this example](https://kitware.github.io/vtk-js/examples/Cone.html) for toggling the actor representation.
---
### Author:  [@\_BarryWang](https://discourse.vtk.org/u/_BarryWang)
#### Post date: [April 11, 2024, 3:22pm UTC](https://discourse.vtk.org/t/plyreader-on-web-but-not-showing-data/13692/3 "2024-04-11T15:22:18Z")
> [@Sebastien\_Jourdain](#):
>
> `parseAsText`
Thank you for replying.
What I meant is that when I upload the ply file and visualize it, it looks like it is composed by many planes, but not displayed as point cloud.
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [April 12, 2024, 2:09pm UTC](https://discourse.vtk.org/t/plyreader-on-web-but-not-showing-data/13692/4 "2024-04-12T14:09:43Z")
Can you share your file?
---
### Author:  [@\_BarryWang](https://discourse.vtk.org/u/_BarryWang)
#### Post date: [April 13, 2024, 6:44am UTC](https://discourse.vtk.org/t/plyreader-on-web-but-not-showing-data/13692/5 "2024-04-13T06:44:14Z")
Sure! Here are my files:
[[cube\_model.ply - Google Drive](https://drive.google.com/file/d/1FDVr2YnPbxskkGBk1lmG6O0zG4krOnmg/view?usp=drive_link)]
and the downsampled one:
([Model\_downsampled.ply - Google Drive](https://drive.google.com/file/d/1f59920ygGQ9gABTEb7V5yrofv2JrTNkL/view?usp=drive_link))
---
### Author:  [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [April 16, 2024, 2:22pm UTC](https://discourse.vtk.org/t/plyreader-on-web-but-not-showing-data/13692/6 "2024-04-16T14:22:45Z")
So the first box load and render fine.
The second one is missing any cell definition so it won’t render anything unless you reference the points as vertex.