Develop Reference

Artifact on 3d objects in threejs

Whenever I add a narrow 3d object like the one below to the scene, I encounter some unwanted artifacts like a repeating texture on the object's surface. It worth mentioning that everything looks fine until I switch the receive shadow property of the object to true.
to be more precise, I created a box geometry with the size of (0.35, 0.02, 0.15) then I made a MeshStandardMaterial and feed both geometry and material to a THREE.Mesh. the lightning consists of ambient light and a directional light
ideally, the object should look like this:
Here is the code for lightning, object, and material
let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
let directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.castShadow = true;
this.directionalLight.position.set(-20, 20, 32);
scene.add(this.ambientLight);
scene.add(this.directionalLight);
let box = new THREE.BoxGeometry(0.02, 0.15,
0.35)
let material = new THREE.MeshStandardMaterial({color: 'white',
shadowSide: THREE.FrontSide, side: THREE.DoubleSide})
let mesh = new THREE.Mesh(box, material)
mesh.receiveshadow = true
mesh.castshadow = true
scene.add(mesh)

This is known as shadow acne. It happens when light hits a surface at a shallow angle. You'll probably need to make small modifications to the LightShadow.bias property. Quoting from the documentation:
Shadow map bias, how much to add or subtract from the normalized depth when deciding whether a surface is in shadow. The default is 0. Very tiny adjustments here (in the order of 0.0001) may help reduce artifacts in shadows.
Try something like: directionalLight.shadow.bias = 0.0001; and start from there, making small adjustments until the shadow acne isn't noticeable.
There's also a second parameter named LightShadow.normalBias that you could tweak.

Three.js advanced polygonal design on plane

I am currently creating a plane like this:
var planeGeo = new THREE.PlaneGeometry(50, 50);
var planeMat = new THREE.MeshBasicMaterial({color: 0x87CEEB});
var plane = new THREE.Mesh(planeGeo, planeMat);
scene.add(plane);
That just creates a blue plane, as expected. Here, on the other hand, is the design/pattern I'm looking for:
This is from a game called Crash Of Cars. Notice the white polygons along the plane, that is what I am going for.
Any help is appreciated. Thanks!

What are the properties of three.js emissive materials

I'm working on a simple demonstration in three.js and am confused by the behaviour of THREE.MeshPhongMaterial coming from a background in the Unity Game Engine.
create_ring() {
// creates a ring mesh per inputed class data
const material = new THREE.MeshPhongMaterial({
color: this.color,
emissive: this.color,
emissiveIntensity: 1.6
});
const ring_geo = new THREE.TorusGeometry(this.radius, this.thickness, 16, 100);
// Translate in space
ring_geo.translate(5, 5, 0)
// add texture to mesh and output
const ring_mesh = new THREE.Mesh(ring_geo, material);
ring_mesh.receiveShadow = true;
ring_mesh.castShadow = true;
ring_mesh.name = "ring";
return ring_mesh
}
I was under the impression the materials would create a nice gentle pool of light on the floor geometry but now having researched the problem either I need some advice on how to implement this as a shader feature? Or I'm not understanding the limits and behaviour of materials in three.js? Below is an example of what is possible with a material's emissive option in Unity.

There's more than just an emissive material shown in the Unity screenshot above — the objects around the light probably were probably also marked as static, which Unity uses to "bake" the glow effect onto them, while compiling the application. There could also be a "bloom" post-processing effect to create the dynamic glow seen by the camera around the object.
Because three.js runs on the web and does not have an offline compilation step, these additional effects have to be configured manually. You can see the three.js bloom example for some help adding the bloom effect to a scene. Baking the light onto surrounding objects would generally be done in Blender, and then loaded into three.js with the base color texture or a lightmap.

Overlaying texture onto STL loaded mesh

I'm looking for an efficient method of overlaying a texture to cover a mesh. I'm not an expert, more a novice, when it comes to 3 dimensional mapping/objects. Below shows how I would like the end product to look.
When attempting to apply texture with the following code, the end result looks similar to below. I have not done any UV mapping, I believe my answer may be lay here. As you can see from the below image it roughly takes the general shade of the picture but I get the impression that the texture is being drawn between each vertice of the model rather than across the entirity.
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('resource/images/materials/Mahogany.jpg');
var STLLoader = new THREE.STLLoader();
STLLoader.load( 'test.stl', function ( geometry1 ) {
var meshMaterial = new THREE.MeshBasicMaterial({map:texture});
var mesh = new THREE.Mesh( geometry1, meshMaterial );
mesh.scale.set(1, 1, 1);
mesh.position.set(5, 20, 80);
scene.add(mesh);
});
The cube has the correct texturing, whereas my STL loaded mesh does not.
Please ignore the rotation of the object in the above picture, I will move to unioning my objects together once I have fixed my texturing issues.
Fairly new at asking questions on here so please do comment to help me expand my question if it's too general or not percise enough. Thank you.

You may use
THREE.MeshPhongMaterial()
instead of
THREE.MeshBasicMaterial()
THREE.MeshPhongMaterial() will wrap the material outside the object and we can get curved material as per the object.

Odd looking shadow with three.js

Very new to three.js and webgl and I am getting very strange looking shadows with a directional light.
Here is my code for the renderer:
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;
this.renderer.shadowCameraNear = 3;
this.renderer.shadowCameraFar = this.camera.far;
this.renderer.shadowCameraFov = 75;
this.renderer.shadowMapBias = 0.0039;
this.renderer.shadowMapDarkness = 0.5;
this.renderer.shadowMapWidth = 1024;
this.renderer.shadowMapHeight = 1024;
Any ideas?

The problem is that your light source is too large for the object you are shadowing. You can visualize the shadow camera by setting
light.shadowCameraVisible = true
Then try reducing the size of your light source by varying the parameter d below
light.shadowCameraLeft = -d
light.shadowCameraRight = d
light.shadowCameraTop = d
light.shadowCameraBottom = -d

This results from the way that DirectionLight is created in three.js (I had this question before). The approach used in three.js for a direction light is about the same as any other shadow creation: it creates a shadow map. With a directional light this shadow map is created with an orthogonal camera. So think about your light as the same as an OrthogonalCamera and think about how those view the scene. The light views the scene from the angle of the directional light, and creates a shadow map based on that view. This view of course has a different projection matrix than your camera. The main camera projection thus must transform the shadow to appear in its view. This results in shadows that look as your image shows. Indeed, the pixelation of that shadow reveals how the shadow camera is oriented, and its scale.
There's no way in three.js to create a true orthogonal shadow using the standard lights. Getting the ideal coverage of the shadow map from the camera's perspective is also not possible.