Disabling the shadow when setting the face color in Three.js

Question

Disabling the shadow when setting the face color in Three.js

When creating geometric objects in my project, I am randomly setting colors on the faces:

//  Material used to create the mesh
var material = new THREE.MeshLambertMaterial({ color: 0xffffff, ambient: 0xffffff, vertexColors: THREE.FaceColors})

function addColor(geometry) {

    var i = 0,
        il = geometry.faces.length,
        color,
        r, g, b, f, fl;

    for (; i < il; i += 12) {

        r = Math.random(),
        g = Math.random(),
        b = Math.random();

        f = 0,
        fl = 12;

        for (; f < fl; f += 1) {
            geometry.faces[i + f].color.setRGB(r, g, b);
        }
    }
}

Although the colors are applied correctly, the new object does not seem to cast or receive shadows. Objects without modified face colors work fine with shadows.

Any suggestions on how I can add face colors while still maintaining shadows in my project?

javascript three.js webgl

Answer 1

Answer №1

UPDATE: I attempted to replicate the issue you are facing, but in my case, everything is functioning as expected (tested on Chrome 35 & Firefox 25, threejs r67). The section of the code that determines the face color is identical to yours.

    var material = new THREE.MeshLambertMaterial({
      vertexColors: THREE.FaceColors
    });

    for (var i = 0; i < 3; i++){

      var cube = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material);

      cube.position = new THREE.Vector3(0, 0, -300 * (i - 1));
      cube.castShadow = true;
      cube.receiveShadow = true;

      var geo = cube.geometry;

      for (var j = 0, k = geo.faces.length; j < k; j++){

        var r = Math.random(),
            g = Math.random(),
            b = Math.random();

        geo.faces[j].color.setRGB(r, g, b);
      }

      scene.add(cube);

    }

    ...

    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(0, 500, 500);

    directionalLight.castShadow = true;

    scene.add(directionalLight);

    ...

    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFSoftShadowMap;

Having a fiddle for this would be great, but based on your code, it might be beneficial to notify the material that an update is required.

  var material = new THREE.MeshLambertMaterial({ color: 0xffffff, ambient: 0xffffff, vertexColors: THREE.FaceColors})
  function addColor(geometry) {

    var i = 0,
        il = geometry.faces.length,
        color, r, g, b, f, fl;

    for (; i < il; i += 12) {
      ...
    }

    material.needsUpdate = true;     

  }

I hope this information proves useful to you.

Answer 2

UPDATE: I attempted to replicate the issue you are facing, but in my case, everything is functioning as expected (tested on Chrome 35 & Firefox 25, threejs r67). The section of the code that determines the face color is identical to yours.

    var material = new THREE.MeshLambertMaterial({
      vertexColors: THREE.FaceColors
    });

    for (var i = 0; i < 3; i++){

      var cube = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material);

      cube.position = new THREE.Vector3(0, 0, -300 * (i - 1));
      cube.castShadow = true;
      cube.receiveShadow = true;

      var geo = cube.geometry;

      for (var j = 0, k = geo.faces.length; j < k; j++){

        var r = Math.random(),
            g = Math.random(),
            b = Math.random();

        geo.faces[j].color.setRGB(r, g, b);
      }

      scene.add(cube);

    }

    ...

    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(0, 500, 500);

    directionalLight.castShadow = true;

    scene.add(directionalLight);

    ...

    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFSoftShadowMap;

Having a fiddle for this would be great, but based on your code, it might be beneficial to notify the material that an update is required.

  var material = new THREE.MeshLambertMaterial({ color: 0xffffff, ambient: 0xffffff, vertexColors: THREE.FaceColors})
  function addColor(geometry) {

    var i = 0,
        il = geometry.faces.length,
        color, r, g, b, f, fl;

    for (; i < il; i += 12) {
      ...
    }

    material.needsUpdate = true;     

  }

I hope this information proves useful to you.

Disabling the shadow when setting the face color in Three.js

Answer №1

Similar questions

Analyzing viewer engagement by monitoring the duration of video watched using JavaScript

Reconfigure an ancestral item into a designated key

Having trouble retrieving react environment variables from process.env?

Effective way to manage Angular scope without resorting to $parent.$parent

Preventing click events with pointer-events property in CSS while still allowing scrolling

Maximizing values entered into form fields

Can I employ a PHP script as a "server" for a React application?

The ReactJS Ajax request returns a successful status code of 200 and retrieves the data, however, an error message

Adjusting the focal point of a brochure on open street map

Sending data from jQuery to an AngularJS function is a common task that can be accomplished in

Utilize Javascript to load content dynamically while ensuring each page has a distinct link to individual content pages

Retrieving string-based JSON information

Redirecting from HTTP to HTTPS with node.js/Express

Why is the location search not staying centered after resizing the map on Google Maps?

The function WebForm_DoCallback is not recognized

Suggestions for a JavaScript tool that automatically crops images

The document inside the database is displayed in italicized text when it is stored in Firebase

Challenges with handling callbacks in Javascript

What are some potential causes of webpack-dev-server's hot reload feature not working properly?

What is causing my background image to move upward when I include this JavaScript code for FlashGallery?