The lighting discrepancies on Three.js planes do not align with the material used

Question

The lighting discrepancies on Three.js planes do not align with the material used

After creating a shape in Three.Js by combining a curved plane and two flat planes, I encountered an issue. While the vertical plane and curved plane blend seamlessly, there is a noticeable harsh line where the horizontal plane meets the curve. The lighting appears misaligned, and I'm aiming for the three planes to present themselves as a single object with smooth shading. Could I be making an error in my approach?

CodePen link

addShape() {
                var radius =58, height=100, startAngle=THREE.Math.degToRad(0), endAngle=THREE.Math.degToRad(90), horizontalSegments=25, verticalSegments=25;
                var width = radius * 2 * Math.PI;
                var plane = new THREE.PlaneGeometry(width, height, horizontalSegments, verticalSegments);
                var index = 0;

                for(var i=0; i<=verticalSegments; i++) {
                    for(var j=0; j<=horizontalSegments; j++) {
                        var angle = startAngle + (j/horizontalSegments)*(endAngle - startAngle);
                        plane.vertices[index].z = radius * Math.cos(angle);
                        plane.vertices[index].x = radius * Math.sin(angle);
                        index++;
                    }
                }
                var material = new THREE.MeshLambertMaterial({color: 0xa2cddd, side: THREE.DoubleSide});
                var mesh = new THREE.Object3D();
                var curve = new THREE.Mesh(plane, material);
                curve.rotation.z = THREE.Math.degToRad(-90)


                var plane1 = new THREE.PlaneGeometry(height, height, horizontalSegments, verticalSegments);
                var side1 = new THREE.Mesh(plane1, material);
                side1.rotation.z = THREE.Math.degToRad(270)
                side1.position.z = radius;
                side1.position.x = -radius * 0.85;

                var plane2 = new THREE.PlaneGeometry(height, height, 1, 1);
                var side2 = new THREE.Mesh(plane2);
                side2.rotation.y = THREE.Math.degToRad(90)
                side2.position.x = radius * 1.0
                side2.position.z = -radius * 0.8;

                plane.mergeMesh(side1);
                plane.mergeMesh(side2);
                mesh.rotation.y = THREE.Math.degToRad(180);
                mesh.add(curve);
                this.mesh = mesh;
                this.scene.add(mesh);
            }
addLight() {
    let light1 = new THREE.PointLight(0xffffff, 1, 200);
    light1.position.set(0, 20, 10);
    this.scene.add(light1);

    let light2 = new THREE.AmbientLight(0x404040); // soft white light
    this.scene.add(light2);
  }

https://i.sstatic.net/LuvFP.png

javascript three.js

Answer 1

Answer №1

To begin with, the first step is to calculate the vertex normals. You can achieve this by using the

THREE.Geometry.computeVertexNormals

method.
Refer to THREE.Geometry for more information.

plane.computeVertexNormals();

Another approach to simplify the process is to create the THREE.PlaneGeometry in a single band. This way, you have the flexibility to choose the start angle and end angle according to your preference, ensuring seamless connection between the planes at the start and end points with the curved segment:

var radius = 58, height = 100,
    startAngle = THREE.Math.degToRad(-20),
    endAngle = THREE.Math.degToRad(110),
    horSegs = 25, vertSegs = 25,
    startLen = 100, endLen = 100;
var width = startLen + endLen + radius * (endAngle-startAngle);
var plane = new THREE.PlaneGeometry( width, height, horSegs+2, vertSegs);

var index = 0;
for (var i = 0; i <= vertSegs; i++) {
  plane.vertices[index].z = radius * Math.cos(startAngle) + startLen * Math.sin(startAngle);
  plane.vertices[index].x = radius * Math.sin(startAngle) - startLen * Math.cos(startAngle);
  index++;
  for (var j = 0; j <= horSegs; j++) {
    var angle = startAngle + j / horSegs * (endAngle - startAngle);
    plane.vertices[index].z = radius * Math.cos(angle);
    plane.vertices[index].x = radius * Math.sin(angle);
    index++;
  }
  plane.vertices[index].z = radius * Math.cos(endAngle) - endLen * Math.sin(endAngle);
  plane.vertices[index].x = radius * Math.sin(endAngle) + endLen * Math.cos(endAngle);
  index++;
}
plane.computeVertexNormals();

Check out the code snippet below:

class World {
  constructor() {
    this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setClearColor(0x000000);
    document.body.appendChild(this.renderer.domElement);
    this.resize();

    // this.addCube();
    this.addShape();
    this.addLight();

    requestAnimationFrame(this.render.bind(this));
    window.addEventListener("resize", this.resize.bind(this));
  }

  update() {
    if (this.cube) this.cube.rotation.y += 0.01;
    if (this.mesh) this.mesh.rotation.y += 0.01;
  }

  addLight() {
    let light1 = new THREE.PointLight(0xffffff, 1, 200);
    light1.position.set(0, 20, 10);
    this.scene.add(light1);

    let light2 = new THREE.AmbientLight(0x404040); // soft white light
    this.scene.add(light2);
  }

  
  addShape() {
    var radius = 58, height = 100,
        startAngle = THREE.Math.degToRad(-20),
        endAngle = THREE.Math.degToRad(110),
        horSegs = 25, vertSegs = 25,
        startLen = 100, endLen = 100;
    var width = startLen + endLen + radius * (endAngle-startAngle);
    var plane = new THREE.PlaneGeometry( width, height, horSegs+2, vertSegs);
    
    var index = 0;
    for (var i = 0; i <= vertSegs; i++) {
      plane.vertices[index].z = radius * Math.cos(startAngle) + startLen * Math.sin(startAngle);
      plane.vertices[index].x = radius * Math.sin(startAngle) - startLen * Math.cos(startAngle);
      index++;
      for (var j = 0; j <= horSegs; j++) {
        var angle = startAngle + j / horSegs * (endAngle - startAngle);
        plane.vertices[index].z = radius * Math.cos(angle);
        plane.vertices[index].x = radius * Math.sin(angle);
        index++;
      }
      plane.vertices[index].z = radius * Math.cos(endAngle) - endLen * Math.sin(endAngle);
      plane.vertices[index].x = radius * Math.sin(endAngle) + endLen * Math.cos(endAngle);
      index++;
    }
    plane.computeVertexNormals();

    var material = new THREE.MeshLambertMaterial({
      color: 0xa2cddd,
      side: THREE.DoubleSide
    });
    
    var mesh = new THREE.Object3D();
    var curve = new THREE.Mesh(plane, material);
    curve.rotation.z = THREE.Math.degToRad(-90);

    mesh.add(curve);
    this.mesh = mesh;
    this.scene.add(mesh);
  }

  render() {
    this.update();
    requestAnimationFrame(this.render.bind(this));
    this.renderer.render(this.scene, this.camera);
  }

  resize() {
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    this.camera.position.z = 200;

    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }
}

var _w = new World();

<script src="https://threejs.org/build/three.min.js"></script>

Answer 2

To begin with, the first step is to calculate the vertex normals. You can achieve this by using the

THREE.Geometry.computeVertexNormals

method.
Refer to THREE.Geometry for more information.

plane.computeVertexNormals();

Another approach to simplify the process is to create the THREE.PlaneGeometry in a single band. This way, you have the flexibility to choose the start angle and end angle according to your preference, ensuring seamless connection between the planes at the start and end points with the curved segment:

var radius = 58, height = 100,
    startAngle = THREE.Math.degToRad(-20),
    endAngle = THREE.Math.degToRad(110),
    horSegs = 25, vertSegs = 25,
    startLen = 100, endLen = 100;
var width = startLen + endLen + radius * (endAngle-startAngle);
var plane = new THREE.PlaneGeometry( width, height, horSegs+2, vertSegs);

var index = 0;
for (var i = 0; i <= vertSegs; i++) {
  plane.vertices[index].z = radius * Math.cos(startAngle) + startLen * Math.sin(startAngle);
  plane.vertices[index].x = radius * Math.sin(startAngle) - startLen * Math.cos(startAngle);
  index++;
  for (var j = 0; j <= horSegs; j++) {
    var angle = startAngle + j / horSegs * (endAngle - startAngle);
    plane.vertices[index].z = radius * Math.cos(angle);
    plane.vertices[index].x = radius * Math.sin(angle);
    index++;
  }
  plane.vertices[index].z = radius * Math.cos(endAngle) - endLen * Math.sin(endAngle);
  plane.vertices[index].x = radius * Math.sin(endAngle) + endLen * Math.cos(endAngle);
  index++;
}
plane.computeVertexNormals();

Check out the code snippet below:

class World {
  constructor() {
    this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setClearColor(0x000000);
    document.body.appendChild(this.renderer.domElement);
    this.resize();

    // this.addCube();
    this.addShape();
    this.addLight();

    requestAnimationFrame(this.render.bind(this));
    window.addEventListener("resize", this.resize.bind(this));
  }

  update() {
    if (this.cube) this.cube.rotation.y += 0.01;
    if (this.mesh) this.mesh.rotation.y += 0.01;
  }

  addLight() {
    let light1 = new THREE.PointLight(0xffffff, 1, 200);
    light1.position.set(0, 20, 10);
    this.scene.add(light1);

    let light2 = new THREE.AmbientLight(0x404040); // soft white light
    this.scene.add(light2);
  }

  
  addShape() {
    var radius = 58, height = 100,
        startAngle = THREE.Math.degToRad(-20),
        endAngle = THREE.Math.degToRad(110),
        horSegs = 25, vertSegs = 25,
        startLen = 100, endLen = 100;
    var width = startLen + endLen + radius * (endAngle-startAngle);
    var plane = new THREE.PlaneGeometry( width, height, horSegs+2, vertSegs);
    
    var index = 0;
    for (var i = 0; i <= vertSegs; i++) {
      plane.vertices[index].z = radius * Math.cos(startAngle) + startLen * Math.sin(startAngle);
      plane.vertices[index].x = radius * Math.sin(startAngle) - startLen * Math.cos(startAngle);
      index++;
      for (var j = 0; j <= horSegs; j++) {
        var angle = startAngle + j / horSegs * (endAngle - startAngle);
        plane.vertices[index].z = radius * Math.cos(angle);
        plane.vertices[index].x = radius * Math.sin(angle);
        index++;
      }
      plane.vertices[index].z = radius * Math.cos(endAngle) - endLen * Math.sin(endAngle);
      plane.vertices[index].x = radius * Math.sin(endAngle) + endLen * Math.cos(endAngle);
      index++;
    }
    plane.computeVertexNormals();

    var material = new THREE.MeshLambertMaterial({
      color: 0xa2cddd,
      side: THREE.DoubleSide
    });
    
    var mesh = new THREE.Object3D();
    var curve = new THREE.Mesh(plane, material);
    curve.rotation.z = THREE.Math.degToRad(-90);

    mesh.add(curve);
    this.mesh = mesh;
    this.scene.add(mesh);
  }

  render() {
    this.update();
    requestAnimationFrame(this.render.bind(this));
    this.renderer.render(this.scene, this.camera);
  }

  resize() {
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    this.camera.position.z = 200;

    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }
}

var _w = new World();

<script src="https://threejs.org/build/three.min.js"></script>

The lighting discrepancies on Three.js planes do not align with the material used

Answer №1

Similar questions

How can I create a fading trail effect in Three.js that diminishes over time?

webstorm error: unresolved function or method when using npm azure-storage modules

Is there a way to detect duplicate usernames in a form without actually submitting the form, and then automatically focus on the username field if a duplicate is

Debugging a script designed to output a value of 1 if the Mean equals the Mode, and 0 if they are not equal

Countdown Timer App using Flask

What is the best way to refresh a navigation bar after making an API request, such as when using Google Sign-In?

Unable to modify $scope value within the directive

Output the initial value and subsequently disregard any values emitted during a specified time interval

Is the variable leaping to a superior scope?

Guide on implementing a bootstrap loading spinner during the process of retrieving data from an external api

Executing React Fetch API Twice upon loading the page

Error in Typescript: Attempting to access the property 'set' of an undefined value

Setting a Vue child component class directly from its parent component

Is there a replacement for findIndex in Internet Explorer?

Tips for saving HTML data locally

Creating React elements dynamically with material-ui can be done by utilizing state expressions in properties. This allows for the generation

Contrasting ./ and $ in React project module imports

Transferring properties from React Router to child components on the server side

Will a JavaScript source map file continue to function properly even after the source code file has been minified?

Adding new pages in express.js without increasing the complexity of the routes