Load texture on coin/circle

Questions
1

Hello, I want to place a round texture on a circle, called ‘coin’ in this example. In other words, I am using UV mapping in order to do so. However, it does not show anything, just a white screen.
my code is:

var coin = new THREE.Geometry();
var r = 10.0;
coin.faceVertexUvs[0] = ;
for (var i=0; i<100; i++) {
var a = i * 1/100 * Math.PI * 2;
var z = Math.sin(a);
var x = Math.cos(a);
var a1 = (i+1) * 1/100 * Math.PI * 2;
var z1 = Math.sin(a1);
var x1 = Math.cos(a1);
coin.vertices.push(
new THREE.Vector3(new THREE.Vector3(0, 0, 0)),
new THREE.Vector3(new THREE.Vector3(xr, 0, zr)),
new THREE.Vector3(new THREE.Vector3(x1r, 0, z1r))
);

coin.faceVertexUvs[0].push([
new THREE.Vector2(0.5, 0.5),
new THREE.Vector2(x/2+0.5, z/2+0.5),
new THREE.Vector2(x1/2+0.5, z1/2+0.5)
]);
coin.faces.push(new THREE.Face3(i3, i3+1, i*3+2));
}

coin.computeFaceNormals();
coin.computeBoundingSphere();

var coin_texture = new THREE.TextureLoader().load(“./cookie.jpg”);
var coin_mat = new THREE.MeshLambertMaterial({map:coin_texture});

var coin_top = new THREE.Mesh( coin, coin_mat );

scene.add(coin_top);

2

If the scene is not rendering, there is probably some error messages in your browser console.

coin.vertices.push(
new THREE.Vector3(new THREE.Vector3(0, 0, 0)),
new THREE.Vector3(new THREE.Vector3(x r, 0, z r)),
new THREE.Vector3(new THREE.Vector3(x1 r, 0, z1 r))
);

Ok at first I thought you tried to ommit multiplication symbols in your code, but it seems it’s a formatting function of this forum that happens when it is next to the thing to multiply. Add a whitespace on each side of the multiplication symbol. And use code formatting in this forum for code instead instead of quote block.

Why do you instantiate your Vector3 like this ?

new THREE.Vector3(new THREE.Vector3(0, 0, 0))

It should be

new THREE.Vector3(0, 0, 0)
1 Like