Project image and update texture on a Three.js object [duplicate] - three.js

This question already exists:
THREEJS : Vertex Color Baking
Closed 8 years ago.
I am building a paint tool with which want to "paint" an image on an object texture.
I have found a very interesting example of texture projection here:
http://www.evpopov.com/threejstest/test_spot_projtexture.html
I was just wondering there is a way to "paint" this projection on the object texture?
This is related to this post:
Calculating the position on spotlight cone in Phong shader

The subject is answered in this thread:
THREEJS : Vertex Color Baking
There are no easy way to do it.

Related

How to load a glb file with WebGL without using Threejs [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am new to computer graphics and I have been experimenting lighting and shading with threejs. Now I am looking into WebGL and I would like to write some shaders to improve the image quallity of a glb file. Is there a quick way to load it in the scene without Threejs? Or Should I mix Threejs and WebGL?
WebGL doesn't support .GLB files. WebGL just draws triangles, points, and lines. Making a full .GLB viewer requires pretty much reproducing all of three.js. You can do it if you want. You'll need to write shaders that support various kinds of lights, shadows, likely physically based rendering, skinning, morph targets, environment maps, ambient occlusion, normal maps, and more. You'll need to make some kind of scene graph to load it all into since .GLB uses a scene graph to organize the scene. To support shadows you'll need to be able to draw the scene once per light to generate shadow maps. You'll likely need to generate your shaders at runtime to optimize for each object to only use the features it needs. You'll further need to write your own texture loaders, implement some kind of material system, and an animation system. You'll probably want post processing so you can do tone mapping, glow, and depth of field effects.
Or you could just continue to use three.js where it's all been written already. It's open source so if you want to improve the shaders then just start editing it.

Unity 3D Does Not Apply Texture To Object Properly

I have got a problem with texturing an object in Unity 3D. I have made a simple object in 3Ds Max and inserted it into Unity and then tried to apply an image as texture but it does not apply the texture and it only changes the color of the object! This is the print screen:
As you can see I have got two models. One of them is made in 3Ds Max and does not apply the texture and the other one is made in Unity and it's a cube and it gets the texture correctly.
So what's going wrong here ? Not that I also changed the tiling and offset settings of model's shader but still nothing's changed at all! :(
You didn't UV Unwrapped the 3d object before exporting to Unity3D.
To apply the textures on 3d mesh, any engine needs to know coordinates for texture, and this is called UV Mapping.
WIKIPEDIA - UV_mapping

Three.js Merge objects and textures

My question is related to this article:
http://blog.wolfire.com/2009/06/how-to-project-decals/
If my understanding is correct, a mesh made from the intersection of the original mesh and a cube is added to the scene to make a decal appear.
I need to save the final texture. So I was wondering if there is a way to 'merge' the texture of the original mesh and the added decal mesh?
You'd need to do some tricky stuff to convert from the model geometry space into UV coordinate space so you could draw the new pixels into the texture map. If you want to be able to use more than one material that way, you'd also probably need to implement some kind of "material map" similar to how some deferred rendering systems work. Otherwise you're limited to at most, one material per face, which wouldn't work for detailed decals with alpha.
I guess you could copy the UV coordinates from the original mesh into the decal mesh, and the use that information to reproject the decal texture into the original texture

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

Render scene shadows to texture (texture baking)

Does anyone know how to render a shadow map in threejs? I have a terrain mesh in my scene and instead of having all the objects cast a shadow on the terrain, I was hoping I could maybe render a nice shadow map to a texture that is applied to the mesh.
Does anyone have ideas of how to accomplish this - or perhaps some documentation on the subject that I could apply to three?
** EDIT **
Just to clarify for future references, I was wondering if there are any techniques available to render / bake textures that can later be applied as uniforms to a mesh.
have a look at his example:
http://threejs.org/examples/#webgl_materials_lightmap
What you are after are called "light maps" in threejs, in other places they are also referred to as oclusion textures/maps.
[Edit]
It is possible to bake a light-map from geometry using other tools, such as Blender: https://blender.stackexchange.com/questions/13956/how-do-you-bake-ambient-occlusion-for-a-model

Resources