Three.js: Light on decal look weird - three.js

I need help about decal light point issue. I added decal into main object then light it look weird on decal that i added.
When i move camera to bottom for object light it fine but for decal it away turn to black.
If i turn camera to top then decal can turn to normal color of image.
Please see in example picture you will see what i mean.
(Object base on MeshPhongMaterial)
(Decal texture build from MeshPhongMaterial then push to DecalGeometry)
Front Camera
Top Camera
Bottom Camera
Side + Top
Thank you.
VertexNormalHelper

Related

Certain Parts of Terrain Too Dark

Certain Parts of my terrain seem quite dark.I dont know why. As you can see in the image the left part is dark and the right is normal. It feels like shadow or some lighting problem.
Screenshot :
It's dark because you're using a single, directional light that's being a blocked by the wall on the left. Have a look at the Lighting window for your Scene:
Unity Manual for Lighting Window
There, you can play with settings like the "environment lighting" and its source. By adjusting this, you should be able to add a base amount of illumination throughout the scene.
If that doesn't work, you'll need to add more lighting objects to your scene. You can try to balance more directional lights from other directions. Or you can add local lights like spot/area lights to illuminate surfaces left in shadow by your directional light.

How can I give objects whole side with light?

I'm looking for an way to give specify light for some objects.
I have added new light to object to remove shadow on it, but then, the other objects also affected by additional light, and I don't want it.
I have let the object's castShadow = false; receiveShadow = false, but it doesn't work.
When the camera is positioned with the light directions, camera will see the 'light' meshes, and at the opposite position, camera will see the dark side.
I want both sides to see 'light' meshes.
(I want to remove the shadow.)
Thanks for your help. :)
I have added new light to object to remove shadow on it, but then, the other objects also affected by additional light, and I don't want it.
What you are looking for is called "selective lighting" which is not yet supported by three.js. Check out the following issue for more information:
https://github.com/mrdoob/three.js/issues/5180
The only workaround right now is to work with multiple scenes and render passes.
When the camera is positioned with the light directions, camera will see the 'light' meshes, and at the opposite position, camera will see the dark side.
When using a single directional, point or spot light, it's normal that this setup produces a lit and unlit side of a sphere mesh. You can only avoid this by adding an additional light on the other side of the mesh, by using unlit materials or again by using different scenes with different lighting setups.
three.js R112

How to offset target position in ThreeJS controls

I am using ThreeJS's OrbitControls so that when an object in my scene is clicked, the camera travels close to it and and starts orbiting around it. I'm just moving the controls.target position, camera position and setting controls.autoRotate = true.
The clicked object gets centered on screen, which is nice, but sometimes I need to show a text covering up to 50% of the bottom area of the screen, and then the selected objects gets hidden by it. So, I'd need to somehow offset the rotation center up a bit.
Perhaps another way of asking this is that I need to change the center of rotation so that it is NOT the center of the screen (or the center of the renderer canvas)
I've tried moving the target up but, of course, then the camera doesn't orbit around the selected 3D object but around an empty space close to it. Any idea on how to proceed?
Many thanks!
I finally got the desired results following the comments in this other thread:
by using camera.setViewOffset

How to create an orthographic/isometric directional light with three.js

I'm trying to create a shadow in my orthographic scene in three.js. I'd like to have a directional light so the shadow is offset from all objects equally in the scene. I am however having problems using DirectionalLight.
My first problem is that I can't get the shado to cover the entire scene, only part of it ever has a shadow. I played with the light's frustum settings, but can't figure out how to get it to cover the scene. Ideally I'd want the frustrum to match that of the camera.
The second problem is that the shadows aren't "clean". If I use a SpotLight the shadows have nice crisp borders (but obviously not the universal directionality I want). When I use a DirectionalLight the borders are misshappen and blurry.
In the samples the tile is a simply box created with CubeGeometry.
How can I create an ortographic directional light source for my scene?

Three.js - transparent objects when rotated with TrackballControls don't behave like transparent

When I add to the scene two objects and set their transparency as true with some opacity and using TrackballControls I rotate the scene by mouse, the object which was initially further from camera loses its transparency.
I read that this is Z-buffer problem and further objects from camera will be displayed first. But when I rotate the scene using TrackballControls, camera changes its position, so transparent objects should be displayed correctly. But it is not like that.
Here in this picture - on the right is frontview, on the left is backview which is not displayed correctly:
http://www.foto-ondruskova.cz/Experiment/lenses.jpg
Please, any solutions?
I have come across this problem and setting alphaTest: 0.5 to the material as suggested here solved my problem. But it is hit and miss. Give it a try. Hopefully it works!

Resources