Three.js所有纹理都是白色

Question

我更改了 Three.js 的版本，因为我想使用投影仪，但现在我所有的纹理都变成了白色。我找不到它有什么问题。我在控制台中没有收到任何错误，这让我有点迷失。 我用的是r122。 有人知道发生了什么事吗？

这里的大部分代码来自于代码笔： https://codepen.io/yitliu/pen/bJoQLw

//----------VARIABLES----------


const dpi = window.devicePixelRatio;
const theCanvas = document.getElementById('canvas');


var h = window.innerHeight,
    w = window.innerWidth;
aspectRatio = w / h,
    fieldOfView = 25,
    nearPlane = .1,
    farPlane = 1000;
container = document.getElementById('container');

var dae, scene, camera, renderer;


var Colors = {
    cyan: 0x248079,
    brown: 0xA98F78,
    brownDark: 0x9A6169,
    green: 0x65BB61,
    greenLight: 0xABD66A,
    blue: 0x6BC6FF
};



function init() {


    //----------SCENE----------

    scene = new THREE.Scene();


    //----------CAMERA----------

    camera = new THREE.PerspectiveCamera(
        fieldOfView,
        aspectRatio,
        nearPlane,
        farPlane);


    //----------RENDER----------


    renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });
    renderer.setSize(w * dpi, h * dpi);
    theCanvas.style.width = `${w}px`;
    theCanvas.style.height = `${h}px`;
    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);
    camera.position.set(-5, 6, 8);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    //---------LIGHT---------

    var light = new THREE.AmbientLight(0xffffff, .5);

    var shadowLight = new THREE.DirectionalLight(0xffffff, .5);
    shadowLight.position.set(200, 200, 200);
    shadowLight.castShadow = true;

    var backLight = new THREE.DirectionalLight(0xffffff, .2);
    backLight.position.set(-100, 200, 50);
    backLight.castShadow = true;
    scene.add(backLight);
    scene.add(light);
    scene.add(shadowLight);

    //---------CONTROLS---------


    const controls = new THREE.OrbitControls(camera, renderer.domElement);



    //---------GEOMETRY---------

    var geometry_left = new THREE.CubeGeometry(2, .2, 4);
    var material_grass = new THREE.MeshLambertMaterial({ color: Colors.greenLight });
    var ground_left = new THREE.Mesh(geometry_left, material_grass);
    ground_left.position.set(-1, 0.1, 0);
    ground_left.receiveShadow = true;
    scene.add(ground_left);

    var geometry_bot = new THREE.CubeGeometry(4, .2, 1);
    var material_grass = new THREE.MeshLambertMaterial({ color: Colors.greenLight });
    var ground_bot = new THREE.Mesh(geometry_bot, material_grass);
    ground_bot.position.set(0, 0.1, 2);
    ground_bot.receiveShadow = true;
    scene.add(ground_bot);


    var geometry_top = new THREE.CubeGeometry(4, .2, 1);
    var material_grass = new THREE.MeshLambertMaterial({ color: Colors.greenLight });
    var ground_top = new THREE.Mesh(geometry_top, material_grass);
    ground_top.position.set(0, 0.1, -2);
    ground_top.receiveShadow = true;
    scene.add(ground_top);

    var geometry_river = new THREE.CubeGeometry(1, .1, 4);
    var material_river = new THREE.MeshLambertMaterial({ color: Colors.blue });
    var river = new THREE.Mesh(geometry_river, material_river);
    river.position.set(.5, .1, 0);
    river.receiveShadow = true;
    scene.add(river);

    var geometry_bed = new THREE.CubeGeometry(1, .05, 4);
    var bed = new THREE.Mesh(geometry_bed, material_grass);
    bed.position.set(.5, .025, 0);
    scene.add(bed);


    var geometry_right = new THREE.CubeGeometry(1, .2, 4);
    var ground_right = new THREE.Mesh(geometry_right, material_grass);
    ground_right.position.set(1.5, 0.1, 0);
    ground_right.receiveShadow = true;
    scene.add(ground_right);

    var tree = function (x, z) {
        this.x = x;
        this.z = z;


        var material_trunk = new THREE.MeshLambertMaterial({ color: Colors.brownDark });
        var geometry_trunk = new THREE.CubeGeometry(.15, .15, .15);
        var trunk = new THREE.Mesh(geometry_trunk, material_trunk);
        trunk.position.set(this.x, .275, this.z);
        trunk.castShadow = true;
        trunk.receiveShadow = true;
        scene.add(trunk);

        var geometry_leaves = new THREE.CubeGeometry(.25, .4, .25);
        var material_leaves = new THREE.MeshLambertMaterial({ color: Colors.green });
        var leaves = new THREE.Mesh(geometry_leaves, material_leaves);
        leaves.position.set(this.x, .2 + .15 + .4 / 2, this.z);
        leaves.castShadow = true;
        scene.add(leaves);
    }



    tree(-1.5, -1.5);
    //tree(-1.25,.75);
    tree(-.25, -.85);
    tree(0.4, 2);
    //tree(1.25,-2);
    tree(1.75, .35);



    var material_wood = new THREE.MeshLambertMaterial({ color: Colors.brown });

    var geometry_block = new THREE.CubeGeometry(1.3, .02, .6);
    var block = new THREE.Mesh(geometry_block, material_wood);
    block.position.set(.5, .21, .2);
    block.castShadow = true;
    block.receiveShadow = true;

    scene.add(block);






    //---------CAR---------



    var loader = new THREE.ColladaLoader();
    loader.load('offroadcar.dae', function (collada) {
        dae = collada.scene;
        dae.scale.x = dae.scale.y = dae.scale.z = 0.1;
        dae.position.set(-1, .2, 0);
        dae.updateMatrix();
        //customizeShadow(dae, .25)
        scene.add(dae);
        dae.castShadow = true;
        dae.receiveShadow = true;
    })




}// end of init


//---------STARTING---------

init();
animate();


//---------LISTENERS---------

theCanvas.addEventListener('click', function (evt) {
    clickInfo.userHasClicked = true;
    clickInfo.x = evt.clientX - theCanvas.offsetLeft;
    clickInfo.y = evt.clientY - theCanvas.offsetTop;
}, false);


//---------METHODS---------


function animate() {
    renderer.render(scene, camera);
    requestAnimationFrame(function () { animate(); });
}