Polygon & texture

Questions
,
1

I am building a customized shape that x,y,z are given by external program
then I need to add a texture to this shape
the only way I found is to use Face3
but the Face3 manages a triangle
which makes my texture ugly
how can I set a texture in a customized shape with several (more than 3) sets of points ?
thx for your help (sorry for my bad English, I am French)

2

Without an example of code (and an example of data), it’s hard to understand what you do and what you want to achieve.

3

you perfectely right
here is my generic code I use

material2 returns correctely my shapes with the good color
but material1 (which is a texture) returns all shapes as black !
I tested my texture in a Box and it works fine, so texture itself is not the issue
If I use a “normalized” shape (circle, box, rectangle, …) texture is ok
but with a customized shape, it doesn’t
I am an old programmer, but very new with three.js,
so don’t hesitate to correct me
I will not take offence if you explain I came to a wrong track for my need
thx

var geometry = new THREE.Geometry();
var i = col.Arg0;
var verticeIndex = -1;
for (var NumberOfPoints = this._entity.Characteristics[++i].Values[row].Value; NumberOfPoints 0; NumberOfPoints--) {
    var x = this._entity.Characteristics[++i].Values[row].Value,
        y = this._entity.Characteristics[++i].Values[row].Value,
        z = Is3D ? this._entity.Characteristics[++i].Values[row].Value : 0;
    geometry.vertices.push(new THREE.Vector3(x, y, z));
    verticeIndex++;
    if (verticeIndex >= 2) {
        var face = new THREE.Face3(verticeIndex - 2, verticeIndex - 1, verticeIndex);
        geometry.faces.push(face);
    }
}                    

geometry.computeFaceNormals();
geometry.computeVertexNormals();

var texture = new THREE.TextureLoader().load('textures/crate.gif');
var material1 = new THREE.MeshBasicMaterial({ map: texture });

var data = {
    transparent: true, opacity: 1, overdraw: true, linewidth: 100, color: Options["stroke"]
};
var material2 = new THREE.LineBasicMaterial(data);

imesh++;
mesh[imesh] = new THREE.Mesh(geometry, material1);
scene.add(mesh[imesh]);
4

Your custom geometry has no UVs. You’ll have to add them yourself if you want to display a texture on a custom geometry.

1 Like
5

Ok, but how ?
I can’t find example
is that a three.js statement ?
where to code it ?
the wikipedia you sent doesn’t help
thx
Rgs

6

Working with procedural geometry can be a challenging task for 3D developers. You might want to study the built-in geometry entities of three.js to see how such algorithms work. But be aware, they are all based on BufferGeometry.

1 Like
7

For BufferGeometry I have two really simple examples.

http://threejs.hofk.de/BufferGeometry/01_buffer.html

http://threejs.hofk.de/BufferGeometry/02_buffer.html

indexed_B

1 Like
8

A possibly helpful guide to the problem.
https://solutiondesign.com/blog/-/blogs/webgl-and-three-js-texture-mappi-1

1 Like
9

thx hufk

the “official” shapes (such circle, box, …) always work with texture
only the customized polygon does not (with me at least !)
so, your second reply doesn’t match
but I’ll try the first one
I’ll post in any case
thx

10

Hello,
I am still not able to see any of texture in my shape
here is simplification of mycode
I can see the shape, but the texture doesn’t apply to it. Why ???
any help would be appreciated
Thx

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-50, -50, 0));
geometry.vertices.push(new THREE.Vector3(50, -50, 0));
geometry.vertices.push(new THREE.Vector3(50, 50, 0));
geometry.vertices.push(new THREE.Vector3(0, 100, 0));
geometry.vertices.push(new THREE.Vector3(-50, 50, 0));
geometry.vertices.push(new THREE.Vector3(-50, -50, 0));
var uvTex = new THREE.TextureLoader().load(this._relativePath + “/images/water.jpg”);
var material1 = new THREE.MeshBasicMaterial({ map: uvTex, side: THREE.DoubleSide }); // uv grid
mesh01 = new THREE.Line(geometry, material1);
scene.add(mesh01);

11

Looks like you’ve missed to calculate .faceVertexUvs of your THREE.Geometry()

12

ok, but how ?
wiki is theoric only
I need an real & pratic sample.
thx anyway

13

There are no restrictions to take a look at the source code and to see how the things work.

1 Like