We Keep Coding

Three.js displacementMap does not affect lighting, only vertices

I'm using Three.js to apply a displacement map to a simple plane. The displacement applies successfully, but the lighting is wrong, as if all the normals remain unchanged. The result is a surface with the right shape that's lit as if it were flat.
displacement map:
result:
How can I fix this to properly change the lighting?
Here is the relevant bit of code:
// shortened from actual code - please excuse any small typos
var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 250);
var scene = new THREE.Scene();
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(100, 100, 100);
var ambient = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(light);
scene.add(ambient);
var camera = new THREE.PerspectiveCamera(60, 2, 1, 20000);
var geometry = new THREE.PlaneBufferGeometry(100, 100, 1000, 1000);
geometry.rotateX(-Math.PI / 2);
var material = new THREE.MeshPhongMaterial();
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('circlemap.png');
material.displacementScale = 20;
material.displacementMap = texture;
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// ... later
renderer.render(scene, camera)
edit: when I set flatShading: true in the material, the normals are updated correctly, but look bad (because of the flat shading):

You're going to have to pass a normalMap along with your displacementMap.
See this demo, when normalScale = 0 it's the equivalent of having no normalMap, and you can see that the reflections don't follow the displacement, only the default topography. However, when normalMap is 1, then the reflections do respect the displacement.
You need to generate a normalMap.

Three.js - How to scale a circle without scaling it's stroke?

I'm using a THREE.Path to create a Circular path and then using a TubeGeometry to use that Path to basically create a circle with transparent fill and a stroke whose thickness I can control. My question is, how can I scale up the Circular path at runtime?
Accessing the vertices through mesh.vertices results in a very weird result, because I'm accessing the Tube's Geometry, not the Path. If I change the path, then I have to create a brand new TubeGeometry and update the Tube with the new geometry by doing mesh.geometry = newTubeGeometry, and that just doesn't work at all. Scaling the Tube itself increases it's radius as well, so that's not the right solution either.
Any ideas?
Thanks

Just changing the geometry property does not work, you have to create a new instance of THREE.Mesh. You should also call geometry.dispose() on your old geometry because the renderer internally caches the corresponding WebGLBuffer objects. More information here:
https://discourse.threejs.org/t/changing-the-geometry-of-a-mesh/306

Just an example of how you can do that trick with THREE.TorusGeometry():
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 10);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var geometry = new THREE.TorusGeometry(5, 0.5, 8, 32);
geometry.rotateX(Math.PI * -0.5);
geometry.vertices.forEach(v => {
v.initPosition = new THREE.Vector3().copy(v);
});
var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: "red",
wireframe: true
}));
scene.add(mesh);
var clock = new THREE.Clock();
var time = 0;
render();
function render() {
requestAnimationFrame(render);
time += clock.getDelta();
geometry.vertices.forEach(v => {
v // take a vertex
.setY(0) // make it scalable in two dimensions (x, z)
.normalize() // make a normal from it
.multiplyScalar(Math.sin(time) * 2) // set the distance
.add(v.initPosition); // add the initial position of the vertex
});
geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Adding diagonal lines to a GridHelper object in Three.js?

First image is what I want. (I even want the opposite diagonal too, but I will derive that accordingly.) Second image is a normal GridHelper.
Would this be possible by adding another grid helper but rotated along the y-axis by 45 degrees?
I cannot seem to find anything in the official docs, so I am assuming that there is an alternate approach. Any pointers on how this could be done?
My code for the GridHelper:
grid = new THREE.GridHelper(80, 15, 0x000000, 0x000000);
grid.position.y = -0.2;
scene.add(grid);
I am thinking that a possible solution may lie in EdgesGeometry. I am still unsure about how to proceed with this, since:
EdgesGeometry( geometry, thresholdAngle )
Where geometry is any geometry object.
Does the GridHelper count as a geometry object? Here are the official docs.
EDIT:
Here is a visual example of my current situation: codepen example.

Using of THREE.PlaneBufferGeometry() and a material with wireframe: true will give you the desired result.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 50, 25);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var gridGeometry = new THREE.PlaneBufferGeometry(80, 80, 15, 15);
gridGeometry.rotateY(Math.PI);
gridGeometry.rotateX(-Math.PI * .5);
var gridMaterial = new THREE.MeshBasicMaterial({
color: "black",
wireframe: true
});
var gridWithDiagonals = new THREE.Mesh(gridGeometry, gridMaterial);
scene.add(gridWithDiagonals);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

THREE.ShaderMaterial opacity not working

I am switching to ShaderMaterial from MeshBasicMaterial in order to provide filters on my mesh textures. ShaderMaterial inherits from Material and hence opacity parameter is present. But changing this parameter doesn't change opacity of object. I am using THREE.HueSaturationShader which does not set alpha value.
I have added a very simple fiddle to showcase the situation
http://jsfiddle.net/thenectorgod/89aahytL/1/.
// BufferGeometry Tester
var hostDiv, scene, renderer, camera;
var WIDTH = 500;//window.innerWidth,
HEIGHT = 500;//window.innerHeight,
FOV = 35,
NEAR = 1,
FAR = 1000;
function init() {
hostDiv = document.createElement('div');
document.body.appendChild(hostDiv);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor( 0x888888, 1 );
hostDiv.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
camera.position.z = 50;
camera.lookAt(scene.position);
var geometry = new THREE.PlaneBufferGeometry(20,20);
var material = new THREE.ShaderMaterial({
transparent: true,
depthTest: false
});
material.opacity = 0;
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
scene.add(camera);
animate();
}
function render() {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
render();
}
init();
Though I set the opacity to 0 the object is still visible.
How can I use both opacity and Shaders without adding extra opacity parameter in all of them.

Your shader material has no shader. By default it renders something like MeshBasicMaterial but with a hardcoded GLSL color of red, and no transparency / opacity.
If you want a ShaderMaterial, you actually need to write GLSL shaders for it.

THREE.js Triangle is Black

So i was using THREE.JS and created a triangle. But even though i gave it color: 0xFF0000, it appears black on Screen.
Here is my Script:
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
var geometry = new THREE.Geometry(200,200,200);
var v1 = new THREE.Vector3(200,0,0); // Vector3 used to specify position
var v2 = new THREE.Vector3(-100,0,0);
var v3 = new THREE.Vector3(0,50,0); // 2d = all vertices in the same plane.. z = 0
// Push vertices represented by position vectors
geometry.vertices.push(v1);
geometry.vertices.push(v2);
geometry.vertices.push(v3);
// Push face, defined with vertices in counter clock-wise order
geometry.faces.push(new THREE.Face3(0, 2, 1));
// Create a material and combine with geometry to create our mesh
var redMat = new THREE.MeshLambertMaterial({color: 0xFF0000});
var triangle = new THREE.Mesh(geometry, redMat);
scene.add(triangle);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}
Hope you can find the mistake i made. I am sure it's just something really stupid.

late to the party...but for all who come after me.
The issue here is the type of material used
change
new THREE.MeshLambertMaterial({color: 0xFF0000});
to
new THREE.MeshBasicMaterial({color: 0xFF0000});
and it will show up red

Even I've struggled from this problem for sometime. The solution for me was to add an ambient light to the scene if you're using Lambert Material.
Just add:
var light = new THREE.AmbientLight(0xffffff);
scene.add(light);

Try add computeFaceNormals call upon geometry object:
geometry.computeFaceNormals();
*from https://stackoverflow.com/a/49226898/2154075