我能'；t使用THREE.js向自定义创建网格添加纹理

我正在以编程方式生成网格（地面）。之后，我添加一个纹理到它，但我所ged的只是这个网格上的素色

这是我的代码：

var Three = new function () {
    var scene = new THREE.Scene()

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
    camera.position.set(-5, 5, 5);
    camera.rotation.order = 'YXZ';
    camera.rotation.y = -Math.PI / 4;
    camera.rotation.x = Math.atan(-1 / Math.sqrt(2));

    var renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true

    var light = new THREE.AmbientLight(0xffffff)
    light.position.set(150, 100, 100)
    scene.add(light);

    this.init = function () {
        $('body').append(renderer.domElement);
        Three.render();
    }
    this.render = function () {
        requestAnimationFrame(Three.render);
        renderer.render(scene, camera);
    }

    var xy = [],
        maxX = 7,
        maxY = 10

    for (i = 0; i < maxX; i++) {
        for (j = 0; j < maxY; j++) {
            xy.push([i, j])
        }
    }

    var river = [
        [0, 5],
        [0, 4],
        [1, 3],
        [2, 2],
        [3, 2],
        [4, 1],
        [5, 1],
        [6, 0]
    ]

    var grassGeometry = new THREE.BufferGeometry(),
        waterGeometry = new THREE.BufferGeometry()

    var grassVertexPositions = [],
        waterVertexPositions = []

    for (var i = 0; i < xy.length; i++) {
        grassVertexPositions.push([xy[i][0], xy[i][1], 0])
        grassVertexPositions.push([xy[i][0] + 1, xy[i][1], 0])
        grassVertexPositions.push([xy[i][0], xy[i][1] + 1, 0])

        grassVertexPositions.push([xy[i][0] + 1, xy[i][1] + 1, 0])
        grassVertexPositions.push([xy[i][0], xy[i][1] + 1, 0])
        grassVertexPositions.push([xy[i][0] + 1, xy[i][1], 0])
    }

    for (var i = 0; i < grassVertexPositions.length; i++) {
        for (var j = 0; j < river.length; j++) {
            if (river[j][0] == grassVertexPositions[i][0] && river[j][1] == grassVertexPositions[i][1]) {
                grassVertexPositions[i][2] = -0.5
            }
        }
    }

    waterVertexPositions.push([0, 0, -0.2])
    waterVertexPositions.push([maxX, 0, -0.2])
    waterVertexPositions.push([0, maxY, -0.2])

    waterVertexPositions.push([maxX, maxY, -0.2])
    waterVertexPositions.push([0, maxY, -0.2])
    waterVertexPositions.push([maxX, 0, -0.2])

    var grassVertices = new Float32Array(grassVertexPositions.length * 3),
        waterVertices = new Float32Array(waterVertexPositions.length * 3)

    for (var i = 0; i < grassVertexPositions.length; i++) {
        grassVertices[i * 3 + 0] = grassVertexPositions[i][0];
        grassVertices[i * 3 + 1] = grassVertexPositions[i][1];
        grassVertices[i * 3 + 2] = grassVertexPositions[i][2];
    }

    for (var i = 0; i < waterVertexPositions.length; i++) {
        waterVertices[i * 3 + 0] = waterVertexPositions[i][0];
        waterVertices[i * 3 + 1] = waterVertexPositions[i][1];
        waterVertices[i * 3 + 2] = waterVertexPositions[i][2];
    }

    grassGeometry.addAttribute('position', new THREE.BufferAttribute(grassVertices, 3))
    waterGeometry.addAttribute('position', new THREE.BufferAttribute(waterVertices, 3))


    var textureLoader = new THREE.TextureLoader();
    textureLoader.load('/img/deska_0.png', function (texture) {

        var grassMaterial = new THREE.MeshLambertMaterial({map: texture}),
            waterMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff}),
            grassMesh = new THREE.Mesh(grassGeometry, grassMaterial),
            waterMesh = new THREE.Mesh(waterGeometry, waterMaterial)

        grassMesh.rotation.x = -Math.PI / 2;
        waterMesh.rotation.x = -Math.PI / 2;

        scene.add(grassMesh);
        scene.add(waterMesh);
    });
};

$(document).ready(function () {
    Three.init();
});

var三=新函数（）{
var scene=new THREE.scene（）
var摄像机=新的三视角摄像机（45，window.innerWidth/window.innerHeight，11000）
相机。位置。设置（-5，5，5）；
camera.rotation.order='YXZ'；
camera.rotation.y=-Math.PI/4；
camera.rotation.x=Math.atan（-1/Math.sqrt（2））；
var renderer=new THREE.WebGLRenderer（）
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true
var灯光=新的三个环境灯光（0xffffff）
灯。位置。设置（150100100）
场景。添加（灯光）；
this.init=函数（）{
$（'body'）.append（renderer.domeElement）；
三、render（）；
}
this.render=函数（）{
requestAnimationFrame（三个渲染）；
渲染器。渲染（场景、摄影机）；
}
变量xy=[]，
maxX=7，
最大值=10
对于（i=0；i

为什么我看到的是纯色而不是纹理

p、 美国。

---

如果我将纹理更改为其他纹理，则颜色会发生变化。

它可能需要UVcoordinates@2pha我需要面吗？哦，是的，你需要面，否则纹理没有任何应用。很抱歉，我帮不上什么忙，但我没有在代码中创建几何体，我总是在3d程序中创建。没有正确的UV，你永远不会在需要的位置拉伸纹理。