I'm trying to get dds textures to work with three.js. I have a model in json (converted from .obj + .mtl using three.js converter) using baked textures in jpg/png format. I've created a dds texture (DXT1 with mipmaps). When I load model (using JSONLoader) which uses DDS texture the UV map doesn't seems to be applied. I'm getting no mapping at all.
For example plane with jpg texture:
And by switching to DDS I am getting this:
is it expected behavior? Or maybe DDS textures doesn't support uv maps? Or maybe it is some sort of bug in three.js?
I would really use any help guys.
As explained here https://github.com/mrdoob/three.js/issues/4316 dds textures can't be flipped like normal jpg/png images so they appear upside down. The solution would be to flip the source image and then compress it or make a shader aware of that and flip uv coords.
Related
I'm trying to render texture to material but it rendered is not correctly, maybe my texture is wrong, but when i add the texture in blender it renders correctly. I don't know why.
Sorry I just learned threejs, but the current project needs to render in 3d. So I came here to ask if anyone has a solution, please help me.
Here is my Codesanbox:
https://codesandbox.io/s/hero-kdhox?file=/src/App.js
The texture I have added in Blender something like this:
https://imgur.com/dYkD5u8
You must flip your textures vertically, threejs will by default flip them when you import them using 'useLoader' there is a property flipY for textures but it hasn't been working reliably
Your best bet is to flip them vertically manually before importing
Alternatively, pack the textures in your GLB on blender itself
I have arbitrary PNG with a silhouette. Could use it to texture plane in Three.js.
Transparency works fine. But I need to create dynamic glowing around given shape.
More likely, have to use a shader, but could find any reliable example with texture, not object.
Is it possible to make it or the only way is to convert the shape to OBJ or any other format and to apply a glowing shader to mesh, like here?
How do I create a three.js material/geometry which uses part of a texture?
I am first rendering a scene to a texture. This texture is used for a Mesh with a CubeGeometry and a MeshLambertMaterial. What I would like to do now is have only a part of the texture displayed on the cube face (like a window into the texture).
I've done this before using OpenGL ES directly, with shaders, but I don't see what parameters might make it possible using the standard three.js library.
That is what texture coordinates are for. See this question and answer:
http://stackoverflow.com/questions/19366991/drawing-part-of-open-gl-texture/19367844#19367844
I want to load a 3D model with a diffuse texture and a normal map using the asset loader of libgdx.
As far as I figured out the fbx (and the converted g3dj/g3db) format can contain a diffuse texture, as I could see in the fbx-conv example. (knight.g3db)
How do I add a normal map texture to it?
Do I have to write my own shader for that or is there a simplified method for that? (like for the diffuse texture)
Normal map is supported from FBX all the way up to the DefaultShader class. So if your model (FBX file) contains a normal map, it should be available in your shader. However the default shader (GLSL files) don't support normal map. So you'll have to write your own shader. The tests contain some examples on normal mapping (ShaderCollectionTest) although it might be a bit hard to read.
The uniform name is u_normalTexture, and set here: https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g3d/shaders/DefaultShader.java#L228
Is there a way to control 'properties' when mapping a video to a mesh in THREE.js in webGL (i.e,.the video "texture" is not aligned where i would like on the mesh/is this something that can only be handled through UV-mapping in Blender or other modeling program?)-I am loading a video programmatically as 'texture' onto a simple 3d model. Thanks!
You can certainly change the UVs of your three.js mesh, and as a result, control the alignment of your video texture.
Here is an example where that is done: http://mrdoob.github.com/three.js/examples/webgl_materials_video.html