threejs update r103 to r104

MeshPhongMaterial renders the 3d object without vertex colours on r104, whereas it works as expected on r103. Please change r103 to r104 to see the issue.

by adilrabbani

HTML

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <meta charset="UTF-8">
    <title>MeshPhong</title>
</head>

<body>
<div id="three" title=""></div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/PLYLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
</body>
</html>

JavaScript

/**
 * Create stats UI for different 3d scene settings
 */
function createStats() {
    let stats = new Stats();
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '2px';
    stats.domElement.style.top = '0';

    return stats;
}

/**
 * Defines Perspective camera
 * @returns {PerspectiveCamera|PerspectiveCamera}
 */
function createCamera() {
    let camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 8;
    camera.position.y = 0;
    camera.position.x = 0;
    camera.position.set(0, 7, 5);
    camera.up = new Vector3(0, 0, 1);

    return camera;
}

/**
 * Creates Orbit controls
 * @param camera - perspective camera
 * @param renderer - WebGL Renderer
 * @returns {THREE.OrbitControls}
 */
function createOrbitsControls(camera, renderer) {
    let controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener("change", render, {passive: false});
    controls.zoomSpeed = 1;
    return controls;
}

/**
 * Creates WebGL renderer
 * @returns {WebGLRenderer|WebGLRenderer}
 */
function createRenderer() {
    let renderer = new WebGLRenderer({
        antialias: true
    });

    renderer.setClearColor(0x7b7b7b);
    renderer.physicallyCorrectLights = true;
    renderer.gammaFactor = 2.2;
    renderer.outputEncoding = sRGBEncoding;
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = PCFSoftShadowMap;

    let w = window.innerWidth * 0.8;
    let h = window.innerHeight * 0.8;
    renderer.setSize(w, h);
    renderer.setPixelRatio(window.devicePixelRatio);

    return renderer;
}

var stats = createStats();

/**
 * Creates GUI controls
 * @param mesh - 3d mesh
 */
function createGUIControls(mesh) {
    const gui = new dat.GUI({});
    gui.domElement.id = 'gui';

    let parameters = {
        wireframe: false,
        visible: true,
        transparent: false,
        opacity: 1,
        showStats: false
    };

    //...