Is it possible to fix the shadow map problem below? Basically the shadowmap doesn't seem to respect the alpha test. The shadow is of the tree planes geometry and not of the leaves. Would this be something to do with depth-write perhaps?
I am just using a standard
THREE.MeshPhongMaterial
When casting shadows, objects are treated as solid from the point of view of the light.
But what you can do is specify a customDepthMaterial that utilizes alphaTest. This custom depth material is used in the shadow calculation.
There is an example of this technique here: http://threejs.org/examples/webgl_animation_cloth.html.
three.js r.63
Related
I'm tring to developing a configurator. It's about cups. These should be displayed in 3D. A design should be uploaded. It works by uploading a texture like this.
Otherwise the design will not fit. Is there a way to load a full-size rectangular image as a texture? The Texture may like to be stretched. The texture should not be made cubic by the user, but automatically in the background maybe.. I hope you understand me.
This is the OBJ-File
Your UV mapping looks difficult to apply a texture to. Especially because it has so much empty space, and is skewed in an arc, so you would need to warp all your textures for them to fit nicely.
You should make the UV mapping work for you. Why don't you use the built-in CylinderBufferGeometry class to apply a texture on top of your cup geometry? You could use its attributes to match the side of your cup's shape:
CylinderBufferGeometry(
radiusTop,
radiusBottom,
height,
radialSegments,
heightSegments,
openEnded,
thetaStart,
thetaLength
);
With this approach, you could leave your cup geometry untouched, then apply a "sticker" texture on top of it. It could wrap all the way around the cup if you wanted, or it could be constrained to only the front. You could scale it up, rotate it around, and it would be independent of a baked-in UV mapping done in Blender. Another benefit is that this approach occupies the entire [0, 1] UV range, so you could simply use square textures, and you wouldn't be wasting data with empty space.
Look at this demo to see how you can play with the geometry's configuration.
based on previous questions: Outline object (normal scale + stencil mask) three.js
I am trying to make a material shader for threejs to render only the contour and not both with the object. Should this be the right reference or is there a more straighforward way to do it?
At the moment, the most straightforward solution I could find is from: https://stemkoski.github.io/Three.js/Outline.html with a slightly scaled marching cube using side: THREE.BackSide param in its material.
Is it possible to have a custom geometry emit light in Three.js?
There is a similar question from 5 years ago here.
In my particular case, I have created a TorusGeometry. I would like this torus to also give off light. Is that possible?
The only true way to do this is raytracing, in which case your torus becomes an "emitter" of photons and its geometry is used to calculate the initial directions of said photons.
Otherwise, light technically doesn't exist. Only (mathematical) descriptions of lights exist. (Remember, lights aren't visible/aren't rendered unless you're using a LightHelper.) These descriptions are used by material shaders, which use the light descriptions (and other objects in the scene, in the case of shadows) to determine the color the current fragment should contribute to a pixel.
With this in mind, if you could write a shader to handle a torus-shaped light, then all you need to do is provide that light's information to the shader. You can do this by extending a THREE.js light class to make your own TorusLight to add to the scene, then give the objects in your scene your custom shader.
THAT SAID, if you'd be satisfied with simulating the torus light, and want a visible torus, you can always add a PointLight at the position of your torus (or several throughout the body of the torus), and give your torus some kind of glow effect.
I want to see a chart with color specified per vertex and to get little bit of shading too.
But if I use MeshBasicMaterial I only get VertexColor with no dynamic shading.
On the other hand, if I use MeshPhongMaterial I just get shading but without emissiveness from my vertex colors.
As the THREE.JS PhongMaterial supports vertexColors, giving you a nice combination of dynamic lighting and vertex colors, I'm not quite sure I understand your question. Perhaps that is something you should investigate more?
However, as an alternative to writing a custom shader you could try rendering your model in multiple passes.
This will not give you as much control over the way the vertex colors and phong lighting are combined as a shader would, but often a simple add/multiply blend can give pretty decent results.
Algorithm:
- create two meshes for the BufferGeometry, one with the BasicMaterial and one with the PhongMaterial
- for the PhongMaterial, set
depthFunc = THREE.EqualDepth
transparent = true;
blending = THREE.AdditiveBlending(or MultiplyBlending)
- render the first mesh
- render the second mesh at the exact same spot
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