Three JS BufferGeometry with simple image texture - three.js

Is there any way to apply simple image texture to bufferGeometry created using new ObjectLoader? Earlier we use to create MeshBasicMaterial with map to apply texture to any Geometry, but that doesnt seems to be working directly with bufferGeometry. Can someone provide an example to apply any image texture on any BufferGeometry? Or any kind of Util library that will make life easy with bufferGeometry textures?

Related

Texture is rendering not correctly with meshStandardMaterial three.js

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

Custom geometry transformation distorts material

Custom geometry's mesh material gets distorted after applying matrix transformation to my custom geometry.
In the sample jsfiddle, I've included my custom TorusGeometry. My custom geometry is placed next to a built-in CylinderGeometry.
You can see the difference in material between these two meshes. If I remove the geometry transformation, both the mesh's materials look fine.
I guess, I'm messing the normals while doing matrix transformation, but not sure to fix it.
https://jsfiddle.net/arundhaj/nrdg2faL/

Glowing shader for PNG texture in Three.JS

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 to use part of a texture?

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

Duplicate existing Three.js materials to add displacement calculations

I need to do vertex displacements using a texture map in Three.js.
Is there an existing material that supports that?
If not, what is the best way to duplicate an existing Three.js shader so that I can add in some vertex displacement calculations? I would like to keep existing functionalities such as shadows and wireframe on the material.
Vertex displacements using a texture map are supported by THREE.ShaderTerrain[ "terrain" ] and THREE.ShaderLib[ "normalmap" ].
Examples of their use can be found in http://threejs.org/examples/webgl_terrain_dynamic.html and http://threejs.org/examples/webgl_materials_normalmap.html.
If these do not suit your needs, then you will have to write your own shader. Doing so is not easy. It is best to modify an existing shader.
three.js r.61

Resources