1

私はthree.jsで作業しており、平面の形をしています。この形状はテクスチャを取得する必要があります。以下に、私がこれをどのように試しているかを示します。問題は、テクスチャがシェイプの 2 つのエッジにある 2 つのストライプでしか表示されないことです。texture.repeat の値を高くすると、このストライプが細くなります。ここに関連トピックがあることは知っていますThree.JS ShapeGeometry でテクスチャをレンダリングすることは可能ですか? 、しかし、それがどのように役立つか理解できません。

    //Draw Floorshape
    var points_floor = [];

    points_floor.push(new THREE.Vector2(edges[edges.length-1][edges[3].length-1][0], edges[edges.length-1][edges[3].length-1][1]));
    for (var i = 0; i < edges.length; i++) {
        for (var j = 0; j < edges[i].length; j++) {
            points_floor.push(new THREE.Vector2(edges[i][j][0], edges[i][j][1]));
        }
    }

    var shape_floor = new THREE.Shape(points_floor);

    var floorGeometry = new THREE.ShapeGeometry(shape_floor);
    var texture = new THREE.ImageUtils.loadTexture("./img/tileable_wood_texture_by_ftIsis_Stock.jpg");
    texture.repeat.set(0.1, 0.1);
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

    var materialFloor = new THREE.MeshBasicMaterial({
        map : texture,
        side : THREE.DoubleSide
    });

    var floor = new THREE.Mesh(floorGeometry, materialFloor);
    floor.overdraw = true;
4

0 に答える 0