Develop Reference

Broken Textures in Three.js GLTF export

I’m having weird issues exporting a model from Three.js and having it appear properly in PowerPoint. When exported to gltf and imported into PowerPoint it looks like this:
the black areas aren't the issue, its the overlapping faces across the model showing through that are the problem.
I’ve set and unset these flags on the export and nothing changes:
let options = {
binary: true,
forcePowerOfTwoTextures: true,
onlyVisible: true,
embedImages: true,
forceIndices: true,
}
But when i run it through the GLTF online converter by Lewy here: https://blackthread.io/gltf-converter/ with nothing but ‘embeded images’ turned on, it then works in PowerPoint without issue:
So I'm left wondering whether on his website, because the model is re-generated from the uploaded one, in the process of reading it, it's getting cleaned up by the GLTFLoader?
I’m at a complete dead end as to how to fix this within three.js without using the external uploader/re-exporter :(
UPDATE:
Seems to be an issue with alpha blend mode and material being set to transparent. If the blend mode is changed to 'mask' the issue disappears but then textures that have transparency alpha greater than the alphaTest value completely disappear. But this issue is only turning up for models imported to PowerPoint, when i upload to SketchFab it's all fine.

THREE.js not rendering .obj with .mtl - exporting files for THREE.js

***UPDATE***This has to be an issue with the files and the way they are exported, i just don't know what that issue is. I have downloaded some more example models and they all render just fine.
I am experiencing an issue with Three.js when loading .obj and .mtl files.
I have a bunch of objects and their corresponding material files exported from 3ds. I am not the one who has exported these files, I am not a 3d modeler however if this turns out to be an issue with the files I can ask the modeler to export them again.
I have used THREE.js a few times and never come across this issue, I am loading the .mtl and .obj file using the following:
mtlLoader.load("stands/objects/Table&Chairs.mtl", function(materials){
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("stands/objects/Table&Chairs.obj", function(object){
scene.add(object);
object.position.set(-5, 0, 4);
});
});
My problem is the object loads fine, there are no errors, however nothing is shown. The object is not being rendered to the scene.
If i download some example assets from other sources and switch out the files that are being uploaded, without changing anything else, the object renders.
This leads me to believe it could be an issue with the way in which the files are being exported.
screen showing of my .obj being rendered
Screen showing the example .obj being rendered
Any help as to what could be causing this would be much appreciated.
I have uploaded the objects and materials here.
Mine are the Table&Chairs, the example ones are the Tent_Poles_01 files.

The great thing about .OBJ files is that you can just open them up in the text editor of your choice and see what is inside. This will give you a rough idea of position and scale:
Looking at the vertices in your tent model, it seems to have a size of about 2 units in each dimension, centered around the origin.
Looking at the vertices in the Table & Chairs model, they have a size of a couple of hundred/thousand units, and start near (+6000,0,-2000).
In other words, the first suspect would be your model being rendered somewhere far outside the visible viewport.
Usually, when you work together with a 3D artist, you discuss the scale you want to work at beforehand, and have them nicely align the model with the origin.
You can (sort of) correct this in code, but it will not be as practical.
mesh.geometry.center() will recenter the geometry around (0, 0, 0)... but do note that is usually not what you want. For example, a table will then be half-way through the floor in it's default centered position.
to scale the geometry to an absolute size, use something like (pseudocode)
var currentSize = new THREE.Box3().setFromObject(model).getSize();
mesh.geometry.scale(
targetWidth / currentSize.X,
targetHeight / currentSize.Y,
targetDepth / currentSize.Z)

THREE.JS : How do I dynamically change a specific face for a JSON loaded model?

I have a JSON loaded mirror that I would like to hook up to a webcam. The mirror's reflection will be updated with video coming from a canvas. I was able to follow this source http://threejs.org/examples/#canvas_materials_video
to display a video on a canvas.
However, I need the video texture to run on the specific face of the object. I've tried targeting the object via geometry.faces[i]materialIndex to no avail. The animation is moving, so having a plane to emulate that the the texture is on the model is also not optimal. Is there any advice on what to do?

WebGL texture rendering partially

I am facing a very obscure issue.
I am loading .obj 3d models into a WebGL application I am working on. I am parsing them using a custom function. I know it works correctly. Because I get this:
Granted the texture is stretched way too much. But that's the way the UVs are mapped.
But, when I load a goose model here's what I get:
An untextured goose. I am using the same texture.
Weirder still is the fact that the texture renders only around the eyes. If I don't draw the wireframe, I get this:
Those two tiny specs that I've circled are the eyes.
Just to make sure that it wasn't this model, I tried another one:
I have no idea why it won't render the texture everywhere else.
Here's what I've tried:
Recalcuated normals and exported from Blender again. Same outcome.
Loaded models in Photoshop and they preview correctly. Meaning models are fine.
Checked my parsing of the .obj file into a usable format for WebGL over and over. Also, since the cube loads correctly, I assume it's not that.
Tried switching off MipMapping, disabling CULL_FACE and changing winding order. No difference.
Used different texture image. The texture images are all NPOT. Tried non NPOT. Nothing changed, except with different images the texels of the little eyes or the fragment on the axe changed to the texture.
Checked UV mappings, all look fine. No negative or out of range values.
I am totally out of ideas. If someone has had similar experiences, I'd appreciate pointers as to where to look next.
I generally don't like to ask questions without posting the code, but the code is very convoluted because I'm using sweet.js for custom javascript syntax. Let me know if anyone would like to look at the code and I could try and clean up some code and upload somewhere.

From your images i was wondering if you did not draw a constant number of polygon, or if the draw started then silently failed on its road because of some bug. That's why i asked if the drawn polygons were the first of the models.
And so it seems that indeed there was a hard coded limit to the number of drawn polygons.
Glad you found it !

Three.js CanvasRenderer, having problems setting an image texture to a plane

So basically, I'm attempting to emulate a UI sort of like those used in Halo Reach menus. I plan on going about this by setting the background of the webpage to some image, creating a plane in front of it, and setting its texture to an image with some semi-transparent rectangle shapes on it to be used as the main background of the UI itself. I'll worry about the buttons and what not in the future, but as of now I can no longer get it to render anything on the canvas. Previously it was able to render the plane in the correct spot with a white material, but at some point while attempting to apply a texture to it I managed to mix something up and as a result it doesn't render anything.
Here is a link to the source if anyone is able to help me:
https://dl.dropbox.com/u/40043006/test.zip\
Thanks in advance for any help!

I suspect you're hitting this. However, I would suggest using plain HTML/images for UI stuff.