javascript - 用网格线填充 ShapeGeometry

Question

我目前正在使用正交相机构建平面图俯视图。我有不同形状的地板，所以我需要用网格线填充它，比如地图纹理，它会根据几何形状进行调整。如何用网格线填充形状几何图形。我不能使用网格助手，因为你不能像几何体中的材质那样映射它。

这是我的代码

        var scene = new THREE.Scene();
        var camera = new THREE.OrthographicCamera(
            window.innerWidth / - 2, window.innerWidth / 2,window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        // this can be any shape vertices
        var rectangle_vertices = `[
            {"x":37.59899999999991,"y":256.15200000000027},
            {"x":37.59899999999992,"y":-196.20799999999997},
            {"x":642.3589999999999,"y":-196.20799999999997},
            {"x":642.3589999999999,"y":256.15200000000027}
        ]`;

        rectangle_vertices = JSON.parse(rectangle_vertices);

        var shape = new THREE.Shape(rectangle_vertices);

        var geometry = new THREE.ShapeGeometry(shape);
        var material = new THREE.MeshBasicMaterial({
            color : 0xffffff
        });

        var floor = new THREE.Mesh(geometry, material);
        scene.add( floor );

        camera.position.x = 300;
        camera.position.y = 0;
        camera.position.z = 5;

        renderer.render( scene, camera );

标签： javascriptthree.js