meshPhongMaterial shading THREE.FlatShading not applying

[dnuske]

Hi, I'm not being able to get the material rendered with flat shading. I'm implementing the same as I have with regular ThreeJS, but without the same results.

A basic example would be something like the following, it renders something that looks like a plane but it does have some elevation which would be noticeable with THREE.FlatShading

import React from 'react'
import style from './style.css'
import CSSModules from 'react-css-modules'
import React3 from 'react-three-renderer'
import THREE from 'three'

export class OverlayModel extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      cubeRotation: new THREE.Euler(),
      renderModel: false
    }

    // construct the position vector here, because if we use 'new' within render,
    // React will think that things have changed when they have not.
    this.cameraPosition = new THREE.Vector3(0, -4, 4);
    this.cameraRotation = new THREE.Euler( 0.4, 0, 0, 'XYZ' );

    this.lightPosition = new THREE.Vector3(100, -30, 50);
    this.lightTarget = new THREE.Vector3(0, 0, 0);

    this._onAnimate = () => {
      this.setState({
        cubeRotation: new THREE.Euler(
          this.state.cubeRotation.x + 0.008,
          0,
          0
        ),
      });

    };
  }

  componentWillUnmount() {
    this.setState({ renderModel: false })
  }

  render() {
    if (!this.state.renderModel) {
      return (<div></div>)
    }
    const width = window.innerWidth - 316;
    const height = window.innerHeight;

    // <meshBasicMaterial color={0x00aa00}></meshBasicMaterial>
    // <lineDashedMaterial visible={true} color={0xff0000}></lineDashedMaterial>
    // vertices={vertices}
    // pixelRatio( window.devicePixelRatio );
    // antialias={true}

    return (
      <React3
        mainCamera="camera"
        width={width}
        height={height}
        onAnimate={this._onAnimate}
        clearColor={0xffffff}>
        <scene>
          <perspectiveCamera
            name="camera"
            fov={45, width / height, 0.1, 3000}
            aspect={width / height}
            near={0.1}
            far={1000}
            position={this.cameraPosition}
            rotation={this.cameraRotation}>
          </perspectiveCamera>
          <ambientLight color={0x505050} />
          <directionalLight
                      color={0xffffff}
                      position={this.lightPosition}
                      lookAt={this.lightTarget} />
          <mesh rotation={this.state.cubeRotation}>
            <planeGeometry width={7} height={7} widthSegments={3} heightSegments={3} ref={this.applyHeights} ></planeGeometry>
            <meshPhongMaterial
                color={0xD3C39F}
                specular={0x111111}
                emissive={0x000000}
                shininess={40}
                shading={THREE.FlatShading}
                wireframe={false}
                side={THREE.DoubleSide}
                />
          </mesh>
        </scene>
      </React3>
    )
  }

  componentWillMount() {
    setTimeout(() => {
      this.setState({ renderModel: true })
    }, 500)
  }

  applyHeights(geometry) {
    var heightsArray = [1,1,1,1 ,1,1.2,1.2,1, 1,1.2,1.4,1, 1,1,1,1 ];

    console.log("geometry.vertices", geometry.vertices.length, heightsArray.length)
    for (var i = 0, l = geometry.vertices.length; i < l; i++) {
      geometry.vertices[i].z = heightsArray[i] ;
    }

  }

}

export default CSSModules(OverlayModel, style)

[toxicFork]

Hi, thank you for reporting this bug. I will take a look ASAP.

[toxicFork]

Hm... I have been testing the shading property with a sphere and it seems to work on the latest version, can you please give it a try with 2.3.1? Which version are you on at the moment?