Issue
I have a Tomcat running a JavaWebApplication within I want to use the <model-viewer>
element (info here) to display a 3D model with 'changable' textures. Therefore I want to get the necessary gltf file from a Servlet, so I can take impact on it, rather than just accessing a file. I know, that both (the gltf structure as well as the model-viewer in my webapp) work, as it works flawlessly if i refer the src like this:
<model-viewer
poster-color="black"
poster="<%=
"ressource?type=coloredmodelpic&key=" +
model +
"&ptype=" +
type +
"&color=" +
color
%>"
camera-controls
auto-rotate
alt="<%= "A 3D model of " + model + "-" + type %>"
src="data/RON-AA/RON-AA.gltf">
whereas obviously RON-AA.gltf holds the json structure. The call on the poster attribute also works flawlessly but when I want to use the same servlet (on which 'ressource' refers to) to stream the data it won't show the model.
<model-viewer
poster-color="black"
poster="<%=
"ressource?type=coloredmodelpic&key=" +
model +
"&ptype=" +
type +
"&color=" +
color
%>"
camera-controls
auto-rotate
alt="<%= "A 3D model of " + model + "-" + type %>"
src="<%=
"ressource?type=gltf&key=" +
model +
"&ptype=" +
type +
"&color=" +
color
%>"
>
I know the call itself is working, as when i directly call the url in any browser I do get the correct gltf to download. It also does provide the correct data as when I view the download in vim it seems to be alright. In the servlet I provide the data like (not exactly as it is spread upon a few methods, but overall like) this:
...
case "gltf":
key = request.getParameter("key");
ptype = request.getParameter("ptype");
colorString = request.getParameter("color");
response.setContentType("model/gltf+json");
response.setHeader("Content-Type", "model/gltf+json");
InputStream is;
OutputStream os = response.getOutputStream();
is = new FileInputStream(new File("...path to the same gltf... .gltf"));
byte[] buffer = new byte[1024];
int bytesRead;
while ((bytesRead = is.read(buffer)) != -1)
os.write(buffer, 0, bytesRead);
os.flush();
os.close();
is.close();
So I do set the correct(?) mimetype and do access the right 'template' to test the stream as the result in vim is the correct data. It even gets more confusing to me as when I try to stream the binary instead of the gltf for the same model-viewer element setup, it works. So the following is working just fine:
...
case "glb":
key = request.getParameter("key");
ptype = request.getParameter("ptype");
colorString = request.getParameter("color");
response.setContentType("model/gltf-binary");
response.setHeader("Content-Type", "model/gltf-binary");
InputStream is;
OutputStream os = response.getOutputStream();
is = new FileInputStream(new File("...path to the glb... .glb"));
byte[] buffer = new byte[1024];
int bytesRead;
while ((bytesRead = is.read(buffer)) != -1)
os.write(buffer, 0, bytesRead);
os.flush();
os.close();
is.close();[info here][1]
Could someone please give me a hint, what is going wrong as I am really out of ideas right now...
Solution
A JSON *.gltf
file, by itself, might or might not have all the parts of the model included. It may reference an external .bin
file, and textures as external .jpg
and .png
files. The BIN file in particular contains 32-bit float vertex data, so without that file you won't see a single polygon.
You can check the contents of the .gltf
to see if it's there: Search for .bin
, .jpg
, and .png
. The .bin
would be listed in a section called buffers
, and the images listed in a section called images
.
Also, check the DevTools Network tab, to see if <model-viewer>
actually requested those external files, and what the response was for each one.
For hosting on websites, .glb
is typically the best form, as all of these extra parts are bundled into a single download. GLB is intended to give the best performance on the web, of any of glTF's various flavors.
Answered By - emackey
Answer Checked By - Mildred Charles (JavaFixing Admin)