THREE.JS UV-отображение на ExtrudeGeometry

Мне нужно применить текстуру к объекту ExtrudeGeometry.

Форма представляет собой круг, а путь выдавливания состоит из двух векторов:

  • Один для вершины.
  • Один для дна.

Я выбрал цилиндрическую геометрию не потому, что мне нужно разместить верхние и нижние части моей геометрии в точных положениях, а также потому, что созданная геометрия не всегда будет чисто вертикальной (например, наклонный цилиндр).

Вот изображение сечения (один верхний вектор, один нижний вектор и фигура, выдавленная между этими двумя векторами).

раздел

и изображение текстуры, которую я пытаюсь применить.

раздел

Все, что я хочу сделать, это обернуть это изображение по вертикальным сторонам моего объекта только один раз.

Вот мой код:

var biVectors = [ new THREE.Vector3( this.startVector.x, this.startVector.y, this.startVector.z ) , new THREE.Vector3( this.endVector.x, this.endVector.y, this.endVector.z ) ];
    var wellSpline = new THREE.SplineCurve3(biVectors);
    var extrudeSettings = {
        steps : 1,
        material: 0,
        extrudeMaterial: 1,
        extrudePath : wellSpline
    };

    var pts = [];
    for (var i = 0; i <= this.segments; i++) {
        var theta = (i / this.segments) * Math.PI * 2;
        pts.push( new THREE.Vector3(Math.cos(theta) * this.diameter , Math.sin(theta) * this.diameter, 0) );            
    }
    var shape = new THREE.Shape( pts );
    var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

    var texture = THREE.ImageUtils.loadTexture( 'textures/sampleTexture2.jpg' );
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.flipY = false;

    var material = new THREE.MeshBasicMaterial( { map: texture } );

    var slice = new THREE.Mesh( geometry, material );
    var faceNormals   = new THREE.FaceNormalsHelper( slice );
    console.log("face normals: ", faceNormals);
    myCanvas.scene.add( faceNormals );
    slice.parentObject = this;
    myCanvas.scene.add( slice );
    this.object3D = slice;
}

Теперь, как вы можете видеть, отображение совсем не правильное.

Я прочитал много информации об этой проблеме за последние 3 дня. Но у меня заканчиваются варианты, так как я новичок в THREE.JS.

Я думаю, что мне нужно переопределить координаты UV, но я понятия не имею, как это сделать.

Кажется, что наложение текстуры на объект, подобный цилиндру, в THREE.JS совсем не просто.

Может ли кто-нибудь помочь мне в этом вопросе?


person Arnaud    schedule 27.01.2015    source источник
comment
Не могли бы вы вместо этого использовать CylnderGeometry и применить к нему матрицу сдвига, чтобы получить желаемый наклонный эффект? stackoverflow.com/questions/25639268/   -  person WestLangley    schedule 27.01.2015
comment
Моя цель — смоделировать буровую скважину в 3D. Я не могу использовать CylinderGeometry, так как на изображении показана только небольшая часть моего 3D-колодца, которая экструдирована вдоль своего пути. Скважина разделена на секции (здесь отображается одна), и каждая секция будет иметь свою текстуру (геологическая информация). Верхний и нижний вектора, по сути, являются векторами вдоль сплайна.   -  person Arnaud    schedule 28.01.2015
comment
Можете ли вы срезать каждый цилиндр, применить к каждому текстуру, а затем сложить цилиндры? Я пытаюсь предложить обходной путь для ExtrudeGeometry.   -  person WestLangley    schedule 28.01.2015